I saw a colleague in webShtom highlighting of unused exports, how to enable this in VS Code?
The screenshot pretty much shows what you need: ESLint + TypeScript ESLint plugin + the no-unused-vars lint rule.
The minimal .eslintrc.json config file for this might look similar to this:
{
"root": true,
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
},
"plugins": [
"#typescript-eslint"
],
"rules": {
"#typescript-eslint/no-unused-vars": ["warn"],
}
}
Note that TypeScript itself supports emitting warnings / errors for unused local variables via its noUnusedLocals tsconfig setting.
Related
I have a tsconfig file like this
{
"include": ["tests/**/*.ts"],
"exclude": [],
"compilerOptions": {
"composite": true,
"lib": [],
"skipLibCheck": true,
"outDir": "lib",
"types": ["vitest/globals"]
}
}
as I have defined types for vitest/globals so yarn vitest cmd is working fine and executing the tests cases as well. But in the VS Code its showing me error
How I can fix/silent it in vs-code?
I had to add the following to my .eslintrc.json file to fix this issue in a test setup module:
"globals": {
"vi": true
},
However if you're using TypeScript, you should also add this to your compilerOptions in your tsconfig.json:
"types": ["vitest/globals"]
edit: you already had this in your tsconfig.json but I'll leave it in here anyway in case it helps someone
We're using #babel/cli to build a library. I've been trying to show eslint issues when using babel --watch ... but no issues are reported.
babel.config.json
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
]
}
.eslintrc
{
"env": {
"browser": true,
"node": true
},
"parser": "#babel/eslint-parser",
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
}
Is it possible to show eslint issues in #babel/cli's output?
My eslint parser as for now is #typescript-eslint/parser. I want to use #babel/plugin-proposal-optional-chaining plugin, which requires babel-eslint parser.
I saw the eslint-multiple-parsers but it says that it was deprecated :
Use ESLint configuration based on glob patterns (overrides). See https://eslint.org/docs/user-guide/configuring/#configuration-based-on-glob-patterns.
How can I set multiple parses that way?
From the Configuration Based on Glob Patterns
A glob specific configuration works almost the same as any other ESLint config. Override blocks can contain any configuration options that are valid in a regular config, with the exception of root and ignorePatterns.
In your eslint config file you can add an overrides section which is an array of objects. Each object is required to have files key where you define the glob pattern. Any file which match will then use the overriden config. Example:
{
// estree parser
"env": {
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:security/recommended"
],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"security"
],
"rules": {
"indent": [ "error", 4 ]
},
// rest of your "normal" configuration here
"overrides": [{
// for files matching this pattern
"files": ["*.ts"],
// following config will override "normal" config
"parser": "babel-eslint",
"parserOptions": {
// override parser options
},
"plugins": [
"#babel/plugin-proposal-optional-chaining"
],
"rules": [
// override rules
],
},
}]
}
However if you already use #typescript-eslint/parser then you probably already match *.ts files, and overriding would only make every *.ts file use babel-eslint instead, which doesn't solve your issue.
I assume you want both parsers (typescript-eslint and babel) to run against same file, but I don't know easy solution for that.
Is your goal to run parser A against files X and parser B against files Y?
#enterthenamehere-bohemian’s anwser is the solution.
Is your goal to run both parsers against the same files?
It depends…
Is your eslint running inside your editor?
As of today, I can see no solution inside a single eslint config file. You would need a single config file if you want to run it inside your editor.
Is your eslint running in your commandline or Continuous Integration environment?
You need three config files.
File .eslintrc.json
{
"parser": "#typescript-eslint/parser",
"extends": ["./eslint-common-rules.json"],
"rules": {
…typescript parser rules here
}
…
}
File .eslintrc.babel.json
{
"parser": "babel-eslint",
"extends": ["./eslint-common-rules.json"],
"rules": {
…babel parser rules here
}
…
}
File eslint-rules.json
{
"rules": { …
…common eslint rules here
}
…
}
Having that, you can run both in your comanndline:
eslint # <- runs .eslintrc.json
eslint --config .eslintrc.babel.json
Despite clearly indicating in esignore that I want to ignore everything inside lib directory, vscode is saying 9 problems found in that minimized file.
If I run eslint inside foldera in command line everything is fine
using this extension
My directory structure:
foldera/
.eslintrc
.eslintignore
src/
file.js
lib/
wantoignore.min.js
folderb/
morefiles.js
.eslintrc
.eslintignore
.eslintrc file
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"no-console": "off"
}
}
.eslintignore
lib/*
workspace settings:
"eslint.workingDirectories": [
"./client", "./server"
]
I solved this problem following the official doc here.
Basically you need to add the following content to the vscode workspace settings (usually located in your project's root/.vscode/settings.json), so that vscode knows which configs to honor when you're working on a specific script file:
{
"eslint.workingDirectories": [ "./reactApp" ],
}
I had a similar problem, figured out need to set workingDirectory to nested folder:
module
lib
src
index.ts
.eslintrc.js
.eslintignore
VSCode setting should be:
"eslint.workingDirectories": [ "./module/lib" ]
And not
"eslint.workingDirectories": [ "./module" ]
My solutions is:
Source map
root/.vscode/settings.json
Script
{
"eslint.workingDirectories": [{ "mode": "auto" }],
}
I updated all my packages and now I use eslint 2.4.0 and babel-eslint 5.0.0.
But now, I have got an error on eslint check :
AssertionError: ImportDeclaration should appear when the mode is ES6
and in the module context.
and my .eslintrc is :
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"react"
]
}
There is an incompatibility ? Breaking change ?
Thanks
I got the "ImportDeclaration should appear when the mode is ES6 and in the module context" yesterday(29th July 2022), but finally got it fixed today.
If you installed eslint newly in your nextJS project, edit this section of your eslintrc.json file to look like this.
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 13,
"sourceType": "module"
}
The fix for me was to change my "ecmaVersion" from "latest" to 13.
Once you do this, running the eslint command might throw fresh errors, simply update your eslint rules to stop those errors.
For me, I had to change "react/prop-type": "off" to "react/prop-types": "off" - I simply added an "s" to the "react/prop-type" part.
I hope this helps
Edit:
The bug is now fixed. You can safely use "eslint": "^2.4.0".
There is a know issue about that (here too).
I suggest you to simply use the version 2.2.x for the moment.