How do you turn off an eslint rule, for example no-inferrable-types which comes from the extension "eslint:recommended"?
For example if my .eslintrc.json contains:
"extends": [
"eslint:recommended",
.....
"#typescript-eslint/no-inferrable-types": [
"error",
{
"ignoreParameters": false,
"ignoreProperties": false
}
],
Set the value to "off" , as described here:
https://eslint.org/docs/latest/user-guide/configuring/rules
For example:
"#typescript-eslint/no-inferrable-types": "off",
Related
I have named exports disabled in NextJS' pages/ and (now) app/ folders. If it is relevant. I have a root config that disabled default exports for the entire application. Then those two folders have an .eslintrc to override and flip the relevant rules.
Root .eslintrc rules
{
"root": true,
"rules": {
"import/no-default-export": "error",
"import/prefer-default-export": "off",
"import/no-named-export": "off"
}
}
app/ and pages/ .eslintrc rules
{
"ignorePatterns": ["middleware.ts", "./**/middleware.ts"],
"rules": {
"import/no-default-export": "off",
"import/prefer-default-export": "error",
"import/no-named-export": "error"
},
"root": false
}
Is there a way to create an exception for their known valid exports? i.e. getServerSideProps
I installed ESLint and set these settings in setting.json but EsLint does not start properly globally for VS Code.
Invalid Options: - Unknown options: envs, globals, parserOptions, rules
- 'envs' has been removed. Please use the 'overrideConfig.env' option instead.
- 'globals' has been removed. Please use the 'overrideConfig.globals' option instead.
- 'parserOptions' has been removed. Please use the 'overrideConfig.parserOptions' option instead.
- 'rules' has been removed. Please use the 'overrideConfig.rules' option instead.
These are my settings:
"eslint.options": {
"envs": [
"es6",
"browser",
"node",
"mocha"
],
"globals": [
"expect"
],
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error",
"curly": "error",
"quotes": [
"warn",
"single"
],
"no-undef": "error"
}
},
In case you are still looking for an answer, I just had the same issue.. You need to wrap your eslint options into an overrideConfig object. In this case the aimed object in the error message overrideConfig.(...) will be provided correctly.
Similar issue here
First things first, I have some basics but I don't consider myself as a developer at all :p
Here's my problem: I cloned a repo ( this one ) in order to work on a brand new portfolio and test the whole enchilada, but i ran into some errors, as I'm not familiar at all with the eslint setup.
After cloning the repo, I try to gatsby develop and I ran into a few error messages like this one:
Generating development JavaScript bundle failed
/home/asus/code/chrisnopa/gatsby-projects/portf-boilerplate/src/hoc/withProvider.js
4:25 error Missing file extension for "store/createStore" import/extensions
✖ 1 problem (1 error, 0 warnings)
File: src/hoc/withProvider.js
Here's the content of my .eslintrc file :
"parser": "babel-eslint",
"env": {
"browser": true,
"jest": true,
"es6": true,
"node": true
},
"extends": [
"airbnb",
"prettier"
],
"plugins": [
"prettier"
],
"globals": {
"graphql": true
},
"rules": {
"react/jsx-filename-extension": 0,
"react/require-default-props": 0,
"react/jsx-one-expression-per-line": 0,
"arrow-body-style": 0,
"import/no-unresolved": 0,
"prettier/prettier": ["error", {
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}]
}
}
I added this line to the part "Rules" : "import/extensions": [".js", ".jsx", ".json", ".ts", ".tsx"]
and it fixed everything except for one error. Here is the message in my console :
Generating development JavaScript bundle failed
.eslintrc:
Configuration for rule "import/extensions" is invalid:
Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '".js"').
File: src/pages/index.js
failed Building development bundle - 4.029s
Any idea on what I am doing wrong here, and on how to fix this would be much appreciated!
Updated eslint-plugin-import to v2.11.0 (or above)
I am using ESLint with the prettier plugin and configuration:
// eslintrc.js
extends: [
`eslint:recommended`,
`plugin:react/recommended`,
`plugin:#typescript-eslint/recommended`,
`plugin:prettier/recommended`,
`prettier/react`,
`prettier/#typescript-eslint`
]
This works great, but I would like to disable a certain prettier rule, which is removing "unneeded" parentheses (removing them actually breaks my code):
// Replace `(state.counter)` with `state.counter` eslint(prettier/prettier)
return <div>{(state.counter)}</div>
As you can see from the message above, it doesn't state which rule exactly is causing this behavior and therefore I don't know which one to override.
I have tried to override all rules found in eslint-prettier-config, but nothing worked and I don't want to keep using // eslint-disable-next-line prettier/prettier.
Prettier is not so configurable. You can try configuration they have: https://prettier.io/docs/en/configuration.html
Put .prettierrc file, or eslint config like this:
{
rules: {
'prettier/prettier': [
'error',
{
trailingComma: 'all',
tabWidth: 2,
semi: false,
singleQuote: true,
bracketSpacing: true,
eslintIntegration: true,
printWidth: 120,
},
],
}
}
It is not currently possible to disable that specific rule from prettier through configuration, but to override rules in eslint that come from the extends block, you can either write in the rule like this:
"rules": {
"prettier/prettier": "off"
"#typescript-eslint/no-use-before-define": [
"error",
{ "functions": false, "variables": true, "classes": true },
],
}
Or to only override it for a specific file pattern you can override it in the overrides block.
"overrides": [
{
"files": ["*.html"],
"rules": {
"prettier/prettier": "off",
"#typescript-eslint/unbound-method": "off"
}
}
]
Here I am showing both the config you were looking for, and an inherited rule from a nested package to show future visitors how to do it.
I'm trying to turn off lint warning for my eslint at VS code.
My code is contains.
console.log('blabla..');
eslint said as below.
error Unexpected console statement no-console
Even though already add no-restricted-syntax at my .eslintrc.json, no fixed.
Here is my .eslintrc.json
{
"env": {
"es6": true,
"node": true,
"amd": true,
"mocha": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"rules": {
"linebreak-style": [
"error",
"windows"
],
"no-restricted-syntax": [
"error",
{
"selector": "CallExpression[callee.object.name='console'][callee.property.name=/^(log|warn|error|info|trace)$/]",
"message": "Unexpected property on console object was called"
}
]
}
}
What did I mistake?
Allowing the console.log to stay in code is requiring a separate rule.
You need to add 'no-console' statement to your eslint config rules.
Like so:
rules: {
"no-console": 0
}
A better practice is to warn you about all the console.log in your code, like so:
rules: {
"no-console": 1
}
I followed the advice of Elad and went into the package.json to add the rule of "no-console": 0 and at first it didn't seem like it worked but this is because I needed to restart the development server. If it seems like it's not working, make sure you restart the development server because if you change anything in the package-json, you have to restart your server.
You can add // eslint-disable-line if you need to ignore a specific (or multiple) line