Develop Reference

eslint indent and #typescript-eslint/indent conflict

So I'm using eslint and prettier on a TS express app. I want to set tab width to 4, but it seems the base eslint and the typescript eslint are in conflict.
This is what it gives me for the same line:
This is my eslintrc.json:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "standard-with-typescript",
"overrides": [],
"parserOptions": {
"ecmaVersion": "latest",
"project": "tsconfig.json"
},
"rules": {
"indent": ["error", 4],
"prettier/prettier": ["error", { "endOfLine": "auto" }]
},
"parser": "#typescript-eslint/parser",
"plugins": ["prettier"]
}
This is my prettierrc.json:
{
"singleQuote": true,
"arrowParens": "always",
"printWidth": 120,
"semi": false,
"tabWidth": 4
}
Any idea how to resolve it so I can just have 4 spaces to a tab?

If you're using prettier and eslint, you should use the prettier eslint configuration. It will disable every style-only eslint rule. It should be ok, since styles would be left for prettier to format. See the docs for more info on this.
Since you have the prettier plugin installed, you can change your extends line to this and it should be enough:
"extends": ["standard-with-typescript", "plugin:prettier/recommended"]

I need remove the semicolon error ESLint + Prettier

How can I remove the semicolon rule?
I've tried to remove the semi rules, but I'm not succeeding. When I save the file once it removes the semicolons and lint complains that it's missing, and when I insert it it complains again saying to remove.
I would like to keep the semicolon
Thats my .prettierrc file:
{
"printWidth": 100,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"endOfLine":"auto",
"semi": true
}
and thats my .eslintrc file
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"airbnb",
"plugin:prettier/recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended"
],
"plugins": ["prettier", "react", "react-hooks"],
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
],
"react-hooks/exhaustive-deps": "warn",
"react-hooks/rules-of-hooks": "error",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/jsx-indent-props": [2, 4],
"react/jsx-indent": [2, 4],
"react/jsx-one-expression-per-line": [0],
"react/prefer-stateless-function": [1],
"react/static-property-placement": [1, "property assignment"],
"react/prop-types": "off"
}
}

I got rid of the same error by setting the prettier rules configuration in .eslintrc to:
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "off"
}
],
while keeping in .prettierrc:
"endOfLine": "auto"
NOTE: This is just an intent to workaround the error you (and I) got, but the effect I see is that the "endOfLine" rule will work when using the pretty formatted but not when running eslint.

Within the rules section, override prettier configuration like so:
"rules": {
"prettier/prettier": ["error", { "semi": false }],
}
This will disallow the use of a semicolon where it's not required, as per the prettier rules.

A rule from .eslintrc.json isn't being respected, but the same rule in an eslint comment is

The rule "react-redux/useSelector-prefer-selectors" isn't being respected when I put it in my .eslintrc.json, but other rules are. However, when I put
/* eslint react-redux/useSelector-prefer-selectors: "off" */
At the top of the offending file, the error goes away.
My .eslintrc.json file (In my root directory):
{
"env": {
"browser": true,
"commonjs": true,
"es2020": true,
"node": false
},
"extends": [
"airbnb",
"react-app",
"airbnb/hooks",
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:react-redux/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"react",
"react-redux"
],
"rules": {
"indent": [
"warn",
"tab"
],
"no-tabs": "off",
"no-unused-vars": "warn",
"consistent-return": "warn",
"no-mixed-spaces-and-tabs": 0,
"react/prop-types": 0,
"unused-imports/no-unused-imports": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react-redux/useSelector-prefer-selectors": "off",
"react/jsx-indent": "off",
"react/jsx-filename-extension": "off",
"react/jsx-no-useless-fragment": "warn"
}
}

Figured it out thanks to a comment by #guiwme5. While I don't use vscode, I do use WebStorm - and it seems they both have the same issue - they don't reload .eslintrc.* files when they change.
So if you stumble across this trying to figure out why your IDE isn't respecting your eslint rules, try restarting the IDE.

Prettier rule "no-multiple-empty-lines" not working in React.js project

I want to have an ability to use 2 blank lines in some parts of my code.
Prettier default behaviour allows to have 1 blank line maximum.
I've tried to use "no-multiple-empty-lines": [2, {"max": 2 }] but it doesn't work at all and prettier still complains.
This is my .eslintrc config file. If you need any other information please let me know.
{
"env": {
"node": true,
"browser": true,
"es6": true,
"commonjs": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"sourceType": "module"
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:react/recommended"
],
"rules": {
"prettier/prettier": "error",
"no-multiple-empty-lines": [2, {"max": 2 }],
"react/jsx-uses-vars": [2],
"react/react-in-jsx-scope": "off",
"react/prop-types": "off"
},
"plugins": [
"prettier",
"react"
],
"settings": {
"react": {
"version": "detect" // React version. "detect" automatically picks the version you have installed.
}
}
}

This might not work in your case -- I'm just running eslint without prettier -- but try this line instead:
"no-multiple-empty-lines": ["error", { "max": 2, "maxBOF": 0, "maxEOF": 0 }]
If you definitely want to run it through prettier with eslint though, it looks like that might not work at all. Not sure I'm reading this issue correctly, but it seems like that might not be configurable in prettier? If all you want is to change eslint's behavior though, I think the above line should work because I just had to use it in my own config.

Eslint airbnb gets enforces self closing div tag if the div is empy. How can I disable this rule?

Airbnb linting rules are removing the closing div tag if the div element is empty eg:
<div></div>
Is replaced by
<div/>
My .eslintrc file is this:
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"impliedStrict": true,
"jsx": true
}
},
"env": {
"node": true,
"es6": true
},
"plugins": ["react"],
"rules": {
"react/jsx-filename-extension": ["off"],
"react/prefer-stateless-function": ["off"],
"arrow-body-style": ["error", "always"],
"react/self-closing-comp": [
"error",
{
"component": true,
"html": false
}
]
}
}

Set "react/self-closing-comp" to "off".
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"impliedStrict": true,
"jsx": true
}
},
"env": {
"node": true,
"es6": true
},
"plugins": ["react"],
"rules": {
"react/jsx-filename-extension": ["off"],
"react/prefer-stateless-function": ["off"],
"arrow-body-style": ["error", "always"],
"react/self-closing-comp": "off"
}
}

I know this post is quiet old but for those who need, I have found a solution, which worked for me :
try :
module.exports = {
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended'
],
rules: {
'vue/no-unused-vars': 'error',
'vue/multi-word-component-names': 'off',
'vue/html-self-closing': 'off',
indent: 'off'
}
}
That's how my config file looks like with Vue3, maybe it can help.