I'm trying to specify the file extensions that ESLint should check by setting overrides in the configuration rather than needing to use the --ext command line flag. The documentation for that says:
By default, ESLint lints *.js files and the files that match the overrides entries of your configuration.
The documentation for overrides says that glob patterns for files can be along the lines of "src/*.js" or "**/*.js" and that these are relative to the base directory of your ESLint configuration file. Neither of these options are working for me to make ESLint process files beyond the default of *.js (in my case *.jsx).
Here's the output when I run ESLint with --ext:
scott#dev /home/scott/project (main)
$ npx eslint --ext .js,.jsx ./src
/home/scott/project/src/file.jsx
1:1 warning Unexpected console statement no-console
✖ 1 problem (0 errors, 1 warning)
As expected, it produces a warning. But without --ext, ESLint doesn't produce any output.
The directory structure:
/home/scott/project/
.eslintrc.js
src/
file.jsx
.eslintrc.js:
const rules = {
// ...
};
module.exports = {
// ...
overrides: [
{
files: [ "*.jsx" ], // also doesn't work with "src/**/*.jsx", "**/*.jsx"
rules: rules
}
],
rules: rules
};
What do I have to do?
Related
In Jest we can configure transformIgnorePatterns to ignore files to be transpiled, which defaults to "/node_modules/". However, if a dependency is not translated when it is published, such as /node_modules/atest, according to the instructions on the official website, it should be configured to transformIgnorePatterns, which feels contrary to the "ignored" meaning of this configuration.
I want to know which files are translated and which files are ignored and not translated by pressing the configuration file below.
module.exports = {
// ...
transformIgnorePatterns: ['/node_modules/atest']
// ...
}
Possible answer 1: Dependencies in node_modules except atest are transpiled
Possible answer 2: Only atest in node_modules is transpiled, the rest of the dependencies are not transpiled
From the doc, the transformIgnorePatterns option has default value: ["/node_modules/", "\\.pnp\\.[^\\\/]+$"]
It means:
If the file path matches any of the patterns, it will not be transformed.
So, the packages inside the node_modules directory will NOT be transformed by default.
Now, you have a package named atest which is not a pre-compiled package, you need to transform it using babel and don't transform other packages inside node_modules. So the configuration should be:
{
"transformIgnorePatterns": ["/node_modules/(?!(atest)/)"]
}
Test paths:
/node_modules/atest/index.js
/node_modules/react/index.js
/node_modules/lodash/index.js
/node_modules/dayjs/index.js
The /node_modules/atest will be excluded from transformIgnorePatterns configuration which means it will be transformed.
See the regexp test
My .estintrc.yaml:
parser: "#typescript-eslint/parser"
parserOptions:
sourceType: module
project: tsconfig.json
tsconfigRootDir: ./
env:
es6: true
browser: true
node: true
mocha: true
plugins:
- "#typescript-eslint"
With it, I have many errors like:
D:\*****\project\package.json
0:0 error Parsing error: "parserOptions.project" has been set for #typescript-eslint/parser.
The file does not match your project config: package.json.
The extension for the file (.json) is non-standard. You should add "parserOptions.extraFileExtensions" to your config
I did not ask to check .json files.
I want .ts and .vue files only will be being linted.
Which setting I missed?
When you call eslint you can use the —ext flag to tell it what file types to check. To limit file types in the config file, you would have to wrap all rules and extended configs within an override.
I would however also recommend eslint-plugin-json as alternate solution.
Recently in our project we migrated to use the #typescript-eslint/parser to slowly migrate from tslint. Everything has mostly been smooth but I have a small problem/question I can't work out.
Do I need to specify ignore files/patterns in both the tsconfig exclude array, as well as the ignorePatterns on the .eslintrc export object? What is the difference?
We have a messages.js file inside our src/lang directory that I'm trying to ignore but currently throws a lint error on our pre-commit hook, which got me wondering about this question and how these two setups work together.
Parsing error: "parserOptions.project" has been set for '#typescript-eslint/parser'
The file does not match your project config: src/lang/messages.js. The file must be included in at least one of the projects provided
I think my understanding of these intertwine is off, as when eslint runs, I thought the parserOptions would pick up the project rules from the tsconfig, where the js files are excluded.
Currently, the sections I'm talking about in our eslintrc looks like:
module.exports = {
parser: '#typescript-eslint/parser',
parserOptions: {
project: path.resolve(__dirname, './tsconfig.json'),
tsconfigRootDir: __dirname,
useJSXTextNode: true,
sourceType: 'module',
ecmaFeatures: {
modules: true,
jsx: true,
},
},
ignorePatterns: ['node_modules/**', '.storybook/**', 'src/stories/**', '*.scss', '*.js'] // ignoring here works
tsconfig:
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "src/**/*.js"], // exclude here doesn't work.
package.json:
"scripts": {
"lint": "tsc --project ./tsconfig.json --noEmit && eslint --ext=jsx,ts,tsx src"
},
ESLint passes the #typescript-eslint/parser plugin a list of files (which ESLint obtains from the command-line). The #typescript-eslint/parser plugin cannot control this list, so it does its best to act based upon the list it is given.
The error message is attempting to inform the user that ESlint is linting a file that is excluded from being parsed by the #typescript-eslint/parser plugin. From the plugin's perspective, there are two reasons this could occur:
The file was purposefully, explicitly excluded (by adding it to the tconfig exclude).
The user forgot to add the file to the tsconfig include.
In the latter case (which is much more common), the plugin wants to inform the user that their config is wrong, so that they can correct it. Hence the error message you saw.
In order to correctly exclude files from TSLint, one option is to use a .eslintignore file.
You can also change the eslint command to ignore the excluded files:
eslint ... --ignore-pattern "src/**/*.js"
(But be aware that the ignore pattern is relative to the current directory, not relative to the location of tsconfig etc.)
Alternatively, if you do want ESLint to lint the files (but still exclude them in tsconfig), you can consider providing a more inclusive tsconfig for #typescript-eslint/parser by creating a tsconfig.eslint.json file that extends from your normal tsconfig.
Also see these GitHub issues:
#typescript-eslint/parser doesn't ignore files, which is excluded by/in tsconfig.json #905
parse error on excluded files #1174
Exclude files in tsconfig without throwing an #typescript-eslint/parser error #1350
I was able to use the tsconfig exclude by using the JS config file .eslintrc.js and doing the following:
const tsConfig = require('./tsconfig.eslint.json');
module.exports = {
...
ignorePatterns: tsConfig.exclude,
};
I have a folder structure similar to this:
/root
.eslintrc.json
package.json
/someFolder
/sub
/sub
/anotherFolder
/src
/containers
/components
/oneMoreFolder
/sub
/sub
I'm working with create-react-app and am applying airbnb rules. I have been able to run the linter in a specific folder easily from the CLI but on compile, it targets ALL folders.
I want to run the linter on compile on just the files within the /src folder.
How can I go about this? I've tried a number of solutions.
Thank you!
TL:DR How do I target just one subfolder and all of its files on compile when using eslint and create-react-app?
inside your .eslintrc.json
{
"rules": {
"quotes": [ 2, "double" ]
},
"overrides": [
{
"files": [ "src/**/*.js" ],
"rules": {
"quotes": [ 2, "single" ]
}
}
]
}
in .eslintignore
/someFolder
/anotherFolder
/oneMoreFolder
I used ignorePatterns option. It'll tell ESLint to ignore specific files and directories. It's useful when your IDE (ex. VS Code) is reporting errors in unwanted files.
{
"ignorePatterns": ["gulpfile.js", "gulp/**/*", "webpack.config.js"]
}
You can Also use the .eslintignore file.
You need to do something like eslint src/**/*.js[x]. If you are running a webpack build(or precommit hook) that does linting check then add it within the scripts object inside package.json.
Where you have written the script to run lint in package.json, there only mention the folders you want to target
scripts:{"lint": "eslint src public"}
Then if you want to ignore some type of files in the respective folders, you can mention in ESLint config file.
I'm running eslint v1.8.0 against this test.js file:
require('fs');
var a = 1;
At first, my .eslintrc file is blank:
{
}
Running eslint test.js returns:
1:1 error "require" is not defined no-undef
1:9 error Strings must use doublequote quotes
2:5 error "a" is defined but never used no-unused-vars
This is a node app, though, so I need to tweak it a bit. Running eslint --env node test.js returns:
1:9 error Strings must use doublequote quotes
2:5 error "a" is defined but never used no-unused-vars
Perfect, that's exactly what I want. So I modify my .eslintrc file to be:
{
"env": {
"node": true
}
}
When I run estlint test.js file now, it returns nothing at all. Why does adding this to my .eslintrc remove the quotes and no-unused-vars warnings?
After eslint 1.0.0, all the rules by default are off. So if you run eslint with no rules on you should get 0 results. This tells me that you might have .eslintrc file some where in the folder chain up or down which is getting picked up. Run eslint with --debug flag to understand where are the settings getting picked from.