IDEs

Webstorm

Using Prettier with ESLint

ESLint and Prettier are code quality tools that help ensure consistent code formatting and catch potential errors. To use them with Webstorm, we are using ESLint with eslint-plugin-prettier. To reformat the current file/folder, use the Fix ESLint Problems action. You can find it using Find Action (Cmd/Ctrl-Shift-A) or add a keyboard shortcut to it in Preferences | Keymap. Make sure that the ESLint integration is enabled in Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint.

Visual Studio Code (VSCode)

Using Prettier with ESLint

To use ESLint and Prettier with VSCode, you need to install the necessary plugins. You can do this using the extension sidebar in VSCode. Here is an example settings.json configuration that will apply fixes whenever a file is saved:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"eslint.format.enable": true,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

To configure ESLint and Prettier in VSCode further, refer to the official documentation:

• ESLint Getting Started Guide
• Prettier Installation Guide
• ESLint Configuration Guide
• Prettier Configuration Guide