Config ESLint and Prettier in WebStorm

WebStorm comes with the function of Reformat Code , but it conflicts with the rules of ESLint and Prettier, so you must configure ESLint in WebStorm to use its code hint and Prettier to use its format function.

These two tools have been integrated in newer versions of WebStorm, but are not enabled by default.

Prepare

First make sure that the Node environment is installed locally. This article selects the global installation of ESLint andPrettier. The installation method following the project installation is similar, and you can modify the relevant path yourself.

The global installation is as follows:

# Necessary
yarn global add eslint
yarn global add prettier

# Optional
yarn global add eslint eslint-plugin-prettier
yarn global add eslint-config-prettier

ESLint

Open Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint ，using Automatic ESLint configuration or Manual ESLint configuration.

Optional: There is an item Run eslint --fix on save in the settings page, becausePrettier is also used, so there is no need to check this item.

Prettier

Open Preferences > Languages & Frameworks > JavaScript > Prettier ，checking Prettier package ,if WebStorm does not automatically fill in the correct path, you need to fill it in manually. Assuming a MacOS system, and using the above installation method, the path should be ~ / .config / yarn / global / node_modules / prettier.

Optional: There is an item Run on save for files in the settings page, it is recommended to check, so that the code can be automatically formatted through Prettier when Command + S.

If you not check the above configuration, you need to format the code through Command + Option + Shift + P, and you need to change the habit of formatting through Command + Option + L.

Config

Prettier will read whether there is a configuration file in the same level directory of the current file, if not, it will search up by level. We can create a new .prettierrc file in the root directory of the project. The example is as follows:

{
  "singleQuote": true,
  "semi": true,
  "jsxSingleQuote": true
}

After editing in WebStorm, a prompt will appear at the top asking if you want to apply the changes, just select Yes.