How to set the folder to lint in the .eslintrc.json file, instead after the eslint command in package.json.
package.json (snippet)
"scripts: {
"lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
}
I want only:
"scripts: {
"lint": "eslint",
}
and define the path and ext in the .eslintrc.json.
Alternativ, set .eslintignore to ignore ALL but not ./src.
I only want to lint the src-folder. Not the root.
Also for the eslint plugin of vscode.
My current solution:
.eslintignore
/*
!/src
But I wondering, why is there no option in the config files to set the folder/s to lint.
I'm looking for the most common and elegant solution.
Maybe it sounds like a duplicate here. But I searched a lot of topics and found nothing similar to solve my problem.
Set in overrides inside .eslintrc.json
If you specified directories with CLI (e.g., eslint lib), ESLint searches target files in the directory to lint. The target files are *.js or the files that match any of overrides entries (but exclude entries that are any of files end with *).
{
"rules": {
"quotes": ["error", "double"]
},
"overrides": [
{
"files": ["bin/*.js", "lib/*.js"],
"excludedFiles": "*.test.js",
"rules": {
"quotes": ["error", "single"]
}
}
]
}
Refer: document of Configuring ESLint
I've adapted your solution with the .eslintignore file and put the rules directly into my config file's ignorePatterns option (.eslintrc.cjs in my case). Works like a charm for me:
module.exports = {
ignorePatterns: ['/*', '!/src']
[...]
}
In addition to #billythetalented's comment I had to add a dot in the package.json:
"scripts": {
"lint": "eslint .",
...
}
Otherwise, It didn't lint anything
Related
In my TypeScript project we are using "eslint": "^7.14.0". I want to write an override for a lint rule.
I have a number of directories in my project which has a named pattern: e.g.
src-manager
src-ui-core
src-ui-main
I want my lint rule to only go to the folders with 'ui' in the name and to not run against the other folders.
e.g.
How can I do that?
https://toools.cloud/miscellaneous/glob-tester
This is what I have tried but it does not work:
**/src-ui-*/**
e.g.
.eslintrc.json
"overrides": [
{
"files": ["**/src-ui-*/**"],
"rules": {"myrule": "error"}
}
]
I have files in my nx project with import declaration without any use and I want to remove them.
After I searched in stackoverflow I found the answer to open the file in vscode, and press alt+shift+o and when the declaration is not used then it's remove and sort the import.
But I have 10,000 files. so is there a command to do that in all those files? I looking in eslint but there is no rule for that.
Install the no-unused-imports plugin
Add unused-imports to the plugins section of your .eslintrc file
{
"plugins": ["...", "unused-imports"]
}
add the following rules
"no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
],
Then add script to your package.json file
"scripts": {
...
"fix-lint-errors": "eslint nx --fix"
},
from command line run the script
npm run fix-lint-errors
or
yarn fix-lint-errors
If you are a heavy vscode user, so you can simply open your preference settings then add the following to your settings.json:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
Or you can make a stand alone tslint file that has the following in it:
{
"extends": ["tslint-etc"],
"rules": {
"no-unsed-declaration: true"
}}
Then run the following command to fix the imports:
tslint --config tslint-imports.json --fix --project
Then use
ng build
or
ng build name_of_project --configuration=production
I am trying to customize my imports using babel. I am following this link:
https://medium.com/#leonardobrunolima/react-tips-working-with-relative-path-using-create-react-app-fe55c5f97a21
This is my config-overrides.js
const { injectBabelPlugin } = require('react-app-rewired');
const rootImportConfig = [
"root-import",
{
rootPathPrefix: "~",
rootPathSuffix: "src"
}
];
module.exports = config => injectBabelPlugin(rootImportConfig, config);
Package.json:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
Currently, this gives me an error that:
The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement
Hence, I installed
nom install customize-cra react-app-rewired --dev
and changed 'react-app-rewired' to 'customize-cra' in my js file as suggested here:
https://github.com/arackaf/customize-cra#available-plugins
However, that still doesn't work since the injectBabelPlugin is also depreciated. What the function should I use here then? I tried the config files from here but it doesn't work from me either. It's src-functionality is also different.
https://github.com/timarney/react-app-rewired/issues/348
How can I fix my config file and imports? Instead of
import { ResultAlert } from '../../components/alerts/ResultAlert';
I want to do something like this:
import {ResultAlert} from '~/components';
I think you can achieve what you want here without having to resort to hacking the react-scripts. Simply use a baseUrl configuration in your jsconfig.js or tsconfig.ts file. More details in this blog post: https://dev.to/mr_frontend/absolute-imports-in-create-react-app-3ge8
But essentially:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
Then you can do things like import Home from "components/Home" and it'll just work.
I wrote some npm scripts that builds the ./lib directory before publish to npm.
1. script is responsible to convert all es6 *.js files in ./src/components/ to es5 syntax and then copy the files to ./lib (same structure).
This is the script:
"cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js --copy-files"
And this is the .babelrc file:
{
"presets": [
"react",
"stage-1"
],
"env": {
"development": {
"presets": [
"latest",
"react-hmre"
]
},
"production": {
"presets": [
[
"latest",
"es2015"
]
],
"plugins": [
"transform-react-constant-elements",
"transform-react-remove-prop-types",
[
"transform-imports",
{
"react-bootstrap": {
"transform": "react-bootstrap/lib/${member}",
"preventFullImport": true
},
"lodash": {
"transform": "lodash/${member}",
"preventFullImport": true
}
}
]
]
},
"test": {
"presets": [
"latest"
]
}
}
}
I have another script that responsible to convert .less files to .css and copy them to ./lib (same structure):
"lessc-glob ./src/components/**/*.less lib"
Everything works well as expected, but i have one problem now. The import that i have inside the .js files are referring to .less files, but i need it to change to .css extensions.
To make things clear,
What i have now is:
import css from './styles.less';
Converted into this:
var _styles = require('./styles.less');
But i want it to convert to this:
var _styles = require('./styles.css');
replace can be installed and utilized to find instances of .less and replace them with .css in your resultant ES5 .js file/s.
npm script
Add a replace script to your package.json as follows:
...
"scripts": {
...
"replace": "replace \".less\" \".css\" ./lib/components/ -r --include=\"*.js\""
},
...
A call to the replace script can then be chained to the end your script that is responsible for converting all es6 *.js files. E.g.
...
"scripts": {
...
"quux": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js --copy-files && npm run replace",
"replace": "replace \".less\" \".css\" ./lib/components/ -r --include=\"*.js\""
...
},
...
Note the && npm run replace part added to the end of your current quux script.
I've assumed the components folder is copied to the lib folder too. If it's not then the ./lib/components/ part in the replace script will need to be changed to ./lib/.
I like to exclude the test folder form linting with tslint in vscode. So I have placed an exclude into my tslint.json config file. Unfortunately the exclude statement is not working. Does any one know how to set the exclude up?
{
"exclude": "tests/**/*.ts",
"rulesDirectory": ["node_modules/tslint-microsoft-contrib"],
"rules": {
"export-name": true,
...
}
}
Latest update: this can now be set in in tslint.json (the following configuration works with tslint 5.11)
{
"linterOptions": {
"exclude": [
"bin",
"build",
"config",
"coverage",
"node_modules"
]
}
}
It seems that this is an open feature request.
Further information can be found here: https://github.com/palantir/tslint/issues/73
Update:
for those who use VSCode with tslint as editor/linting you can add the following to the VSCode config:
// Configure glob patterns of file paths to exclude from linting
"tslint.exclude": "**/PATH_eg_TESTS/**/*.ts"
This worked for me in tslint: 6.1.2.
In the root folder where tslint.json is located create the file path to directory.
"linterOptions": {
"exclude": [
"libs/folder/folder/**",
"apps/stuff/stuff/**"
]
}