How to set an option value for an ESLint rule? - eslint

I'd like to change my ESLint rules to set the option "properties" value to "never" on the "camelcase" rule. I've read the docs two or three times but didn't quite understand how one does that. Camelcase rule docs
This is my current .eslintrc.json:
{
"env": {
"es2021": true,
"node": true
},
"extends": ["airbnb-base", "plugin:import/typescript"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["#typescript-eslint"],
"rules": {
"camelcase": ["error"],
"linebreak-style": "off",
"comma-dangle": "off",
"implicit-arrow-linebreak": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never"
}
]
}
}

You can do it this way.
"rules": {
"camelcase": ["error", {"properties": "never"}],
....
}

Related

ESLint node/no-missing import does not recognizes my regular imports

I get the error:
ESLint: "../common/product-detail-actions" is not found.(node/no-missing-import)
on the line
import { ProductDetailPageActions } from '../common/product-detail-actions';
I cannot figure out why.
This is my .eslintrc.json:
{
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:node/recommended",
"plugin:cypress/recommended"
],
"parserOptions": {
// Only ESLint 6.2.0 and later support ES2020.
"ecmaVersion": 2020
},
"rules": {
"cypress/no-assigning-return-values": "error",
"cypress/no-unnecessary-waiting": "warn",
"cypress/assertion-before-screenshot": "error",
"cypress/no-force": "warn",
"cypress/no-async-tests": "error",
"node/no-missing-import": "error",
"node/no-unsupported-features/es-syntax": "off",
"no-unused-vars": "off"
}
}
And in package.json I have added this:
"engines": {
"node": ">=8.10.0"
},

How to set rule to not use keyword `function` using Eslint rules in .eslint file?

I have React app and I want to disable or throw an error when the keyword function is used, I have looked at all the eslint rules doc, but didn't find what I am looking for.
my .eslintrc as follow:
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"settings": {
"react": {
"version": "detect"
}
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"react/react-in-jsx-scope": "off",
"no-unused-vars": "warn",
"no-console": "warn",
"func-names": "warn",
"comma-dangle": 1,
"quotes": "warn",
}
}

ESLINT error on browser + conflict with PRETTIER + failing to compile

I am new at work and my colleagues are all on holidays. Before holidays my colleague replaced moment.js for day.js in our project and I started having some sync problems with all those files where the changes took place, they got solved by reinstalling Node.
However, I keep getting these ESLINT/ Prettier errors in both the browser and the terminal. I guess he also made some changes in that configuration. I tried reinstalling ESLINT and it didn't help, then I uninstalled Prettier but the problem persists. I see the problems are related to "," (comas) and spaces. How can I fix this?
error in browser
The .eslintrc file:
{
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"window": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": { "jsx": true },
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["jest"],
"rules": {
"linebreak-style": ["error", "unix"],
"semi": ["error", "always"],
"no-unused-vars": "off",
"react/prop-types": 0,
"react/display-name": ["off"],
"react/no-find-dom-node": ["off"],
"prettier/prettier": ["error", {}, { "usePrettierrc": true }]
},
"settings": { "react": { "version": "detect" } },
"overrides": [
{
"plugins": ["jest"],
"files": ["**/*.ts", "**/*.tsx"],
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"window": true
},
"rules": {
"prettier/prettier": ["error", {}, { "usePrettierrc": true }],
"react/prop-types": "off",
"react/display-name": "off",
"#typescript-eslint/no-unused-vars": "warn",
"#typescript-eslint/no-loss-of-precision": "warn",
"no-unsafe-optional-chaining": "warn"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": { "jsx": true },
"ecmaVersion": 2020,
"sourceType": "module",
"project": "./tsconfig.json"
},
"settings": { "react": { "version": "detect" } }
}
]
}
.prettierrc file:
{
"arrowParens": "avoid",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "always",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": true
}

How i can get warning instead of error in ESLint for no-unused-vars?

How I can get a warning instead of an error while using ESLint?
I use ESLint 6.7.2 version with a plugin for babel and react.
This is my actual .eslintrc.json:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
},
"settings": {
"react" : {
"version": "16.7.0"
}
},
"parser": "babel-eslint"
}
I've found the answer:
It enough to add a rule for no-unused-vars:
"rules": {
"no-unused-vars": "warn"
},
Also, restart the server.

Can't get eslint-plugin-css-modules too work. Keeps complaining about my usage of :local(.className)

I am trying to get my eslint-plugins-css-modules plugin too work.
I am new too linting in general and may not have set this up correctly.
The exact error I get is about:
Parsing error: Unexpected token
The error is at the ':'
I have a scss file as follows:
:local(.onlineUsersWidget) {
height: 100%;
}
And an eslintrc like this:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jest/recommended",
"plugin:css-modules/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"css-modules"
],
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"overrides": [
{
"files": ["*test.js"],
"rules": {
"react/display-name": 0
}
}
]
}

Resources