Prettier integration by ESLint rules in WebStorm

Question

I created the rules in ESLint, how can I make Prettier format the code according to the rules specified in ESLint.

.eslintrc.js

  module.exports = {
   rules: {
      quotes: ["error", "single"]
   }
  };

Before saving:

After saving, Prettier automatically formats the code:

I want to use Prettier and ESLint. Without using .prettierrc.js -> singleQuote: true,. in order for Prettier to format the file according to the ESLint rules, before saving, Prettier takes the rules specified in eslintrc.js and formats the code. How can I do this?

In VSCode User Settings, set "prettier.eslintIntegration": true

what about WebStorm?

Answer 1

I'll take a project created with the create-nuxt-app utility, where ESLint and Prettier are already properly configured for this example.

For reference only, here's what the config files look like. Open spoilers to see if needed.

.prettierrc

.eslintrc.js

.editorconfig

.package.json

Next, follow these steps to set up your IDE:

1. Re-import a project.

   To do it, you should remove the .idea directory from the project root. Then import the project again. Note that you will lose all project related settings. But this step is necessary because the IDE configures the Code Style and Editor settings during import. You can check this by opening the Event Log.

   

2. Open .prettierrc and in the dialog "Use code style based on Prettier for this project?" choose No.

   

3. Open Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint
   And make sure the Automatic ESLint configuration checkbox is enabled.

   

4. Then open Settings | Languages & Frameworks | JavaScript | Prettier and configure the Prettier package.

   

   Now when you press Ctrl+Alt+Shift+P the file will be formatted according to Prittier settings.

   But this option does not suit us, since not all rules specified for ESLint will apply. We need to run eslint --fix instead, which will format the file according to Prettier settings.

   So let's assign the shortcut Ctrl+Alt+Shift+ P to run eslint --fix.

5. Remove the Format with Prettier shortcut in Settings | Keymap.

   

6. Then reassign the shortcut to Fix ESLint problems.

   

Now when you run Ctrl+Alt+Shift+P your file will be correctly formatted.