How to remove unused imports with a command? - javascript

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

Related

How to instruct ESLint to ignore a ruleset in a project?

In my VSCode (Win 10) I have installed the VSCode extension ESLint. On my computer is a Node project, with a JS file inside. If I open this JS file in VSCode, ESLint reports infractions from several different rule sets, including Prettier (screenshot). For this project only, how can I instruct ESLint to not check any of the rules in the Prettier rule set?
FYI when I open VSCode, here is a list of the extensions installed.
The .eslintrc.json file for this project contains the following:
{
"extends": [
"plugin:#wordpress/eslint-plugin/recommended"
],
"env": {
"browser": true,
"jquery": true
}
}
Note: The plugin #wordpress/eslint-plugin/recommended is a separate plugin I have added to this project, and it has rules that I want ESLint to list and report.
Inside eslintrc.js, you can omit/edit the rules you do not like, as such:
module.exports = {
extends: 'airbnb-base',
rules: {
'no-console': 'off',
'no-restricted-syntax': 'off',
'linebreak-style': 0,
'guard-for-in': 'off',
'max-len': ['error', { code: 160 }],
},
};
You can override such rules inside .eslintrc.json according to
{
"extends": [
...
],
...
"rules": {
"<rule1>": "off",
...
}
}
There are a few ways you can ignore rules from ESLint
Manually specify each rule in .eslintrc file as off
{
"extends": [
...
],
...
"rules": {
"<rule1>": "off",
...
}
}
Ignore files or folder from eslint rules i.e. add ignorePatterns
{
"ignorePatterns": ["temp.js", "**/vendor/*.js"],
"rules": {
//...
}
}
Create .eslintignore file and exclude the files or folder from being linted by ESLint. ESLint Ignore

ESLint define folder in config file. (Ignore all but..., Include only...)

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

How to configure StandardJS?

One of the main features of StandardJS is that it doesn't require configuration.
The problem is that I want to configure it. I don't want to put:
/* eslint-env mocha */
...in every test file. I want to configure StandardJS to treat everything in the test directory as mocha tests.
I've found in the README that some configuration is possible, e.g.:
{
"standard": {
"globals": [ "myVar1", "myVar2" ]
}
}
...but I'm struggling to find more comprehensive documentation about the configuration options. Is it possible to configure StandardJS to treat files in different directories differently?
You have a couple of options to try out and see what works for your specific project depending on the recent implementation of StandardJS.
Define your own globals
in package.json:
"standard": {
"globals": [
"describe",
"before",
"after",
"beforeEach",
"afterEach",
"it",
"assert"
]
}
or in .eslintrc:
{
"globals": {
"describe": false,
"before": false,
"after": false,
"beforeEach": false,
"afterEach": false,
"it": false,
"assert": false
}
}
More on ESLint's configuration.
Define an environment
in package.json:
"standard": {
"env": {
"mocha": true
}
}
or in .eslintrc:
{
"env": {
"mocha": true
}
}
Check out currently available environments
Run StandardJS as an NPM script with the environment specified
in package.json:
{
"scripts": {
"lint": "standard --env mocha"
}
}
Use a plugin
after installing the plugin (e.g. eslint-plugin-mocha)
in package.json:
"standard": {
"plugins": [
"mocha"
]
}
or in .eslintrc:
{
"plugins": [
"mocha"
]
}
Create your own, customized rules based on StandardJS
Check out this repository. The quick rundown:
Install with:
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
Then create a .eslintrc file by extending StandardJS and start to fill with your own rules:
{
"extends": "standard"
}
Since StandardJS uses ESLint under the hood, you can pretty much configure it however you want it using ESLint's documentation.

babel es5 to es6 converting less extension to css on imports

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/.

How to exclude a folder from tslint?

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/**"
]
}

Categories

Resources