VS Code Prettier ESLint

A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.

Prerequisites

This extension requires prettier:^1.9.1, eslint:^6.8.0, prettier-eslint:^10.1.0 packages to be installed either locally or globally.

Troubleshooting

Error: Cannot find module 'prettier' OR Error: Cannot find module 'eslint'

1. Quit Visual Studio Code
2. Open terminal and run rm -rf node_modules to erase your local node_modules
3. Run npm install or yarn install to reinstall your node_modules
4. Install Prettier and ESLint locally

Please create an issue before adding a rating. I am the only contributor currently. https://gitlab.com/idahogurl/vs-code-prettier-eslint/issues

Configuration

The extension uses your ESLint and Prettier configuration files. These files are resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn't) found.

ESLint Configuration File

(From https://eslint.org/docs/user-guide/configuring)

Use a JavaScript, JSON or YAML file to specify configuration information for an entire directory and all of its subdirectories. This can be in the form of an .eslintrc.* file or an eslintConfig field in a package.json file.

Prettier Configuration File

(From https://prettier.io/docs/en/configuration.html)

Prettier uses cosmiconfig for configuration file support. This means you can configure prettier via (in order of precedence):

• A "prettier" key in your package.json file.
• A .prettierrc file, written in JSON or YAML, with optional extensions: .json/.yaml/.yml (without extension takes precedence).
• A .prettierrc.js or prettier.config.js file that exports an object.
• A .prettierrc.toml file, written in TOML (the .toml extension is required).

Running Formatter

Once installed, open a JavaScript file. Press CTRL + CMD + P (macOS) or CTRL + Shift + P (Windows/Linux) to format a file or a selection of code.

You can enable the Format on Save setting to avoid entering the command all the time.

Default Formatter

• Open the file you want to format
• Press CTRL + SHIFT + P (Windows/Linux) or CMD + SHIFT + P (macOS) to open the command palette
• Start typing Format Document With and select it
• Choose the bottom item Configure Default Formatter
• Choose Prettier ESLint

Setup Format on Save

• Set Prettier Eslint as the default formatter as detailed above
• Open User or Workspace settings
  • On Windows/Linux - File > Preferences > Settings
  • On macOS - Code > Preferences > Settings
• Start typing Format on and select it
• Check Format on Save (found mid-page in the right panel)
• Ensure both Format on Input and Format on Paste are disabled. They are not supported functionality
• Afterward, the file should format automatically once you save it

Contributing

If you have suggestions for how this extension could be improved, or want to report a bug, open an issue! I'd love all and any contributions. If you are interested in contributing to the project, check out the Contributing Guide.

Current Contributors ✨

Thanks goes to these wonderful people (emoji key):

Rebecca Vest 💬 💻 📖 🚇 🐛 🤔 👀 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!