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
Related
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",
First of all, some facts:
Node.js requires that all local imports include the imported module's extension (e.g. import hello from './hello.js', not import hello from './hello').
TypeScript will compile imports with or without the .js extension, which means a missing .js extension is a runtime error.
TypeScript doesn't transform imports to add the .js extension or convert .ts to .js.
In my Node.js project, I want to make missing a missing .js extension be a build-time error using the import/extensions ESLint rule. However, when I enable this rule using the following configuration:
{
"root": true,
"env": {
"node": true
},
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"import/resolver": {
"typescript": {},
"node": {
"extensions": [".js"]
}
}
},
"rules": {
"import/extensions": ["error", "ignorePackages"]
}
}
running eslint gives me the following error:
/sandbox/src/index.ts
1:19 error Missing file extension "ts" for "./hello.js" import/extensions
Source files:
// index.ts
import hello from "./hello.js";
hello();
// hello.ts
export default function hello() {
console.log("Hello");
}
CodeSandbox link: https://codesandbox.io/s/elated-germain-13glp7
I fixed this with the following config:
{
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"rules": {
"import/extensions": ["error", "ignorePackages"],
"import/no-unresolved": "off"
}
}
The main thing is to disable the "import/no-unresolved" rule and remove "settings"."import/resolver"."node". ("import/no-unresolved" is redundant as unresolved imports are resolved at the compilation stage.) Other items removed here were already being added as a result of extending the #typescript-eslint plugins.
I found an eslint plugin that can fix missing .js extensions for imports in .ts files, instead of just showing an error:
https://github.com/AlexSergey/eslint-plugin-file-extension-in-import-ts
https://www.npmjs.com/package/eslint-plugin-file-extension-in-import-ts
Install:
npm i -D eslint-plugin-file-extension-in-import-ts
Add to .eslintrc file:
{
"plugins": [
"file-extension-in-import-ts"
],
"rules": {
"file-extension-in-import-ts/file-extension-in-import-ts": "error"
}
}
NOTE: I ran into an issue similar to https://github.com/import-js/eslint-plugin-import/issues/1292 when using this package, and it will incorrectly try to add .js extensions on these paths when fixing automatically.
You could try ts-add-js-extension package to append .js extension to the transpiled JavaScript files. After you install you can do
ts-add-js-extension add --dir={your-transpiled-outdir}
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