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:
Please help with the final configuration so that everything works fine.
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