I'm trying to remove unused imports and declarations as answered in this SO thread for Angular. I'm trying to achieve the goal using eslint-plugin-react, but not found any option to remove the unused imports and daclarations from the entire project, with a single command.
Here is my .eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12
},
"plugins": [
"react",
"@typescript-eslint",
"unused-imports"
],
"rules": {
"indent": [
"warn",
"tab"
],
"linebreak-style": [
"warn",
"windows"
],
"quotes": [
"warn",
"double"
],
"semi": [
"warn",
"always"
],
"@typescript-eslint/no-unused-vars": "on",
"unused-imports/no-unused-imports-ts": "on"
}
}
Or is there a way to do the same using ESLint or Typescript Hero extensions in VS Code?
Using unused-imports
plugin and unused-imports/no-unused-imports-ts
rule, eslint --fix
will remove the import
s.
Here is an example repo which --fix
removes the unused import
s.
https://github.com/moshfeu/eslint-ts-unused-imports
yarn add -D eslint-plugin-unused-imports
// eslint.config.js
import tseslint from "typescript-eslint";
import unusedImports from "eslint-plugin-unused-imports";
export default tseslint.config(
{
plugins: {
"unused-imports": unusedImports,
},
rules: {
"unused-imports/no-unused-imports": "warn",
},
}
);
eslint has a built-in fix option.
eslint ... --fix
If rules
contains no-unused-vars
, eslint will "fix" the unused import by removing them (along with other auto fixes).