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" }],
}
Related
I'm trying to get module path aliases clickable in vscode
// Ctrl+click Working fine
import Layout from "src/components/layout/Layout";
// Not working
import SEO from "#components/SEO";
My JSconfig.json file
{
"compilerOptions": {
"jsx": "react",
"baseUrl": ".",
"paths": {
"#components/*": ["/src/components/*"],
"#sections/*": ["/src/sections/*"],
"#assets/*": ["/src/assets/*"]
}
}
}
I have tried everything without success
Here is the solution
{
"compilerOptions": {
"jsx": "react",
"baseUrl": "./",
"paths": {
"#components/*": ["./src/components/*"],
"#sections/*": ["./src/sections/*"],
"#assets/*": ["./src/assets/*"]
}
}
}
Had same issue with 'Go to definition'. And on the end I found it was not working for me because I had both tsconfig.json and jsconfig.json in the project.
Seems when tsconfig.json is present, alias setting from jsconfig.json are ignored.
As I want gradually convert stuff into Typescript, but have lot of .js files I kept tsconfig.json, and added "**/*.js" to the "include" list, so it sees also .js files. Now aliases in vscode are clickable.
tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/components/*": [
"components/*"
]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.js"
]
}
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?
I have below folder structure:
-src
-component
-button
-button.js
-button.scss
-dropdown
-dropdown.js
-dropdown.scss
When I use live sass compiler to watch the scss file, it generates 2 files like button.css and button.css.map, but it does not generate in the same path.
I want these generated files to be generated in the same path like below:
-src
-component
-button
-button.js
-button.scss
-button.css
-button.css.map
-dropdown
-dropdown.js
-dropdown.scss
-dropdown.css
-dropdown.css.map
In setting.json
{
"editor.wordWrap": "on",
"workbench.iconTheme": "eq-material-theme-icons",
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist/css"
}
]
}
How should I do it?
In setting.json
{
"editor.wordWrap": "on",
"workbench.iconTheme": "eq-material-theme-icons",
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": null
}
]
}
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
I have a project with both JS and TS files (and JSX/TSX). I have a separate .eslintrc.json file for JS vs. TS. I'd like to be able to tell VSCode which eslint config file to use depending on the file extension.
Tried putting the settings in settings.json under the [typescript] field but that didn't work.
I think it should be possible to use 1 file and overrides option:
.eslintrc.js
module.exports = {
"root": true,
"plugins": ["#typescript-eslint"],
"rules": {
// JavaScript rules
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"plugins": [
"#typescript-eslint"
],
"rules": {
// TypeScript rules
}
}
]
}
And changing workspace settings:
"eslint.validate": [
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]