Eslint apply changes to all rules for a plugin (jsx-a11y) - eslint

I am following the below approach to change error to warning for individual rules.
"eslintConfig": {
"extends": [
"react-app",
"plugin:jsx-a11y/recommended"
],
"rules": {
"jsx-a11y/click-events-have-key-events": "warn",
"jsx-a11y/no-static-element-interactions": "warn",
"jsx-a11y/no-autofocus": "warn",
"jsx-a11y/mouse-events-have-key-events": "warn"
}
},
Is there a better way to apply changes to all rules for a plugin for example something like below (which doesn't work)
"eslintConfig": {
"extends": [
"react-app",
"plugin:jsx-a11y/recommended"
],
"rules": {
"jsx-a11y/*": "warn"
}
},

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",
}
}

Typescript + node js absolute paths. With eslint setup.(Unable to resolve path to module (import/no-unresolved))

I am aware that this question has been asked multiple times however after trying most of them I am unable to make it work for my use case. I am building simple API with Typescript and Node. I have all my code residing in the src folder from the root.
To avoid those annoying ../../ i have configured absolute paths in my tsconfig.json with the following declarations.
"baseUrl": "./",
"paths": {
"*":[
"./src/*"
]
},
So lets say i have a config.ts file, I should be able to access it from 'src/controllers/tickets.controllers.ts' by just calling import config from 'config'
This does not work.
Additionally in my .eslintrc.json file i have added the following declarations as mentioned in many any answers related to this question.
{
"env": {
"es2021": true,
"node": true
},
"extends": [
"airbnb-base"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"#typescript-eslint"
],
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"ts": "never"
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [
".js",
".ts"
]
}
}
}
}

How to set an option value for an ESLint rule?

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"}],
....
}

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