The cause and solution of configuration conflict between ESLint and Prettier in VSCode

I inherited someone else’s project while developing a front-end project, and then encountered the following ghost indentation problem when saving it. I had no idea at the time, but I temporarily solved the problem by turning off VSCode’s editor.formatonsave configuration. I didn’t know much about ESLint and Prettier at that time, but used them as the trend. Some time ago, I studied them and found the cause of the problem by trying to find the solution.

Background of “Ghost animal indentation” :

VSCode uses the ESLint plugin and Prettier plugin. The editor setting.json configuration is as follows:

{
  "editor.formatOnSave": true.// Automatic formatting when saving
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode".// Use prettier when formatting
  },
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // Use eslint to verify files when saving}}Copy the code

There are esLint, Prettier, eslint-config-prettier, eslint-plugin-prettier installed in the project

.prettierrc

{
    "singleQuote": true,
    "semi": true,
}
Copy the code

.eslintrc

module.exports = {
    extends: ["eslint:recommended"."plugin:prettier/recommended"],... Other configurations};Copy the code

Cause of the problem

Through the test found that “ghost livestock indent” is caused by configuration conflict.

According to the configuration above in setting.json and project, when saved,

1. Editor usePrettierAccording to the plugin.prettierrcConfiguration in the file to beautify the code,
2. At the same time,ESLintPlug-ins are also based on.eslintrcThe configuration in the file beautifies and validates the code, which is used hereeslint-plugin-prettiertheeslintThe plugin to useprettierReplaced theeslintFor the code beautification part of the function itself, where the configuration is the official default configuration and does not follow.prettierrcFile to read configuration
3. So when.prettierrcThis kind of problem occurs when the official default configuration is inconsistent with the configuration of the.The editor doesn’t know who to listen to

Solution:

1. Prettier does not need to be used if the default for Prettier is acceptable.

   Editor configuration

   {
     "editor.formatOnSave": false
     "editor.codeActionsOnSave": {
           "source.fixAll.eslint": true // Use eslint to verify files when saving}}Copy the code

   or

     "editor.formatOnSave": true."[javascript]": {
       "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "eslint.format.enable": true
   Copy the code

   Under the project

   .eslintrc

   module.exports = {
       extends: ["eslint:recommended"."plugin:prettier/recommended"],... Other configurations};Copy the code

   This configuration, which uses the editor’s ESLint plug-in to beautify the code format when saved automatically, via the prettier plug-in configured in the ESLint project.

   In this case, you want to modify prettier’s default configuration by overwriting the setting of the prettier plug-in in.eslintrc.js. Rules need to be configured.

   module.exports = {
   	extends: ["eslint:recommended"."plugin:prettier/recommended"].rules: {
           'prettier/prettier': ['error', { singleQuote: true.parser: 'flow'}],},... Other configurations};Copy the code

2. Use the editor’s plugin for Prettier to beautify code, and the ESLint plugin to check code quality.

   Editor configuration

   {
     "editor.formatOnSave": true."editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "[javascript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode",}}Copy the code

   .prettierrc (in preferred configuration)

   {
       "singleQuote": true,
       "semi": true,
   }
   Copy the code

   .eslintrc

   module.exports = {
       extends: ["eslint:recommended"."prettier"].// eslint-plugin-perttier is not used, eslint-config-prettier is used. Other configurations};Copy the code