Search code examples
eslintwebstormprettier

ESLint and Prettier conflict in WebStorm


In my project we use both ESLint and Prettier for code and seems they conflict with each other.

Here is the Prettier configuration in .prettierrc file :

{
  "endOfLine": "auto",
  "arrowParens": "avoid",
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "trailingComma": "all",
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "singleQuote": false
      }
    }
  ]
}

And here is a part of ESLint in .eslintrc.json file:

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*",
    "*.d.ts"
  ],
  "plugins": [
    "html",
    "import",
    "simple-import-sort",
    "@typescript-eslint"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "airbnb-typescript/base"
      ],
      "rules": {
        
      }
    },
    {
      "files": [
        "*.component.html",
        "*.container.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ]
    },
    {
      "files": [
        "*.component.ts",
        "*.container.ts"
      ],
      "extends": [
        "plugin:@angular-eslint/template/process-inline-templates"
      ]
    }
  ]
}

Prettier should be used with all files while the ESLint should be used with html, js and ts.

Here are the configs from the settings:

Prettier

ESLint

Please help with the final configuration so that everything works fine.


Solution

  • You can follow the official recipes at https://prettier.io/docs/en/integrating-with-linters.html, namely, use the eslint-config-prettier to turn the conflicting ESLint rules off, and then set up Prettier as your default code formatter in Settings | Languages & Frameworks | JavaScript | Prettier