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"]

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.

vscode not picking up .eslintrc settings

VSCode shows unnecessary escape character error - no-useless-escape setting.
But the .eslintrc has the following settings and does not contain the no-useless-escape settings:
{
"root": true,
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "script"
},
"env": {
"node": true,
"browser": false
},
"extends": "eslint:recommended",
"rules": {
"semi": ["error", "always"],
"indent": ["error", 4, {
"VariableDeclarator": 1,
"SwitchCase": 1,
"MemberExpression": 1,
"ArrayExpression": "first"
}],
"no-mixed-requires": "off",
"no-restricted-imports": "off",
"no-undef":"off",
"no-console":"off",
"no-trailing-spaces": "error",
"no-unused-vars": "warn",
"no-empty": ["error", {"allowEmptyCatch": true}]
}
}
My workspace setting refer to the .eslintrc file correctly:
"eslint.options": {"configFile": ".eslintrc"}
What is wrong here? Are there some global configurations that need to be overridden?

Saugat Acharya already mentioned the cause for the problem in the comments.
To fix it you just turn that rule explicitly off by adding the following rule to your eslint.rc file:
{
"rules": {
"no-useless-escape": "off"
}
}