IDEs

Webstorm

Using Prettier with ESLint

ESLint and Prettier are essential tools for maintaining consistent code formatting and identifying potential issues. In Webstorm, we integrate ESLint with eslint-plugin-prettier. To reformat a file or folder, use the Fix ESLint Problems action, which can be accessed via Find Action (Cmd/Ctrl-Shift-A) or assigned a keyboard shortcut in Preferences | Keymap. Ensure that ESLint integration is activated in Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint.

Visual Studio Code (VSCode)

Using Prettier with ESLint

To enable ESLint and Prettier in VSCode, you must install the required extensions through the extension sidebar. Below is an example settings.json configuration that automatically applies fixes when saving a file:

"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
}

For further configuration of ESLint and Prettier in VSCode, consult the official documentation:

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