At the start of a a new React project, I create many different components, and I bootstrap them by copying & pasting component files. This can quickly lead to a large mess of unused imports & variable declarations:

Let’s see how we can remove them - automatically - using the power of ESLint and Vim.

The core solution to this problem is a handy ESLint plugin called eslint-plugin-unused-imports. (Other solutions I found online rely on TSList, which is deprecated, so an ESLint-based solution is preferred).

Let’s install ESLint, as well as the eslint-plugin-unused-imports plugin:

yarn add -D eslint
yarn add -D eslint-plugin-unused-imports

Now, modify your .eslintrc to enable the plugin:

// .eslintrc

{
	"plugins": ["unused-imports"]
}

Configure your ESLint rules to error on unused imports or unused variables:

// .eslintrc

{
	"rules": {
		"no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
		"unused-imports/no-unused-imports": "error",
		"unused-imports/no-unused-vars": [
			"warn",
			{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
		]
	}
}

Now, we should see unused-imports/no-unused-imports detecting the unused imports (instead of no-unused-vars, as in the screenshot above):

And running eslint --fix should automatically remove these imports!

We can do better, though - let’s configure Vim to auto-fix on every save.

ALE is a plugin for Vim and NeoVim that lints as you type, and auto-fixes syntax and semantic errors. It uses ESLint (and many other extensible tools) underneath to perform the actual fixing logic.

Install ALE by following the instructions and using Pathogen, Vundle, Plug, or one of the other installation options.

After installing ALE, edit your .vimrc file set two options:

1. let g:ale_fixers - Run ESLint as a fixer in your relevant filetypes, which lets ALE tap into ESLint for fixing files

2. let g:ale_fix_on_save - Automatically run all fixers on save

It’ll look something like this:

// .vimrc

let g:ale_fix_on_save = 1
let g:ale_fixers = {
\   'javascript': ['eslint'],
\   'typescript': ['eslint'],
\   'typescriptreact': ['eslint'],
\}

Now, every time you save a js, ts or tsx file, eslint --fix will automatically run and clean up your imports & unused variables!

At the start of a a new React project, I create many different components, and I bootstrap them by copying & pasting component files. This can quickly lead to a large mess of unused imports & variable declarations:

Let’s see how we can remove them - automatically - using the power of ESLint and Vim.

The core solution to this problem is a handy ESLint plugin called eslint-plugin-unused-imports. (Other solutions I found online rely on TSList, which is deprecated, so an ESLint-based solution is preferred).

Let’s install ESLint, as well as the eslint-plugin-unused-imports plugin:

yarn add -D eslint
yarn add -D eslint-plugin-unused-imports

Now, modify your .eslintrc to enable the plugin:

// .eslintrc

{
	"plugins": ["unused-imports"]
}

Configure your ESLint rules to error on unused imports or unused variables:

// .eslintrc

{
	"rules": {
		"no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
		"unused-imports/no-unused-imports": "error",
		"unused-imports/no-unused-vars": [
			"warn",
			{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
		]
	}
}

Now, we should see unused-imports/no-unused-imports detecting the unused imports (instead of no-unused-vars, as in the screenshot above):

And running eslint --fix should automatically remove these imports!

We can do better, though - let’s configure Vim to auto-fix on every save.

ALE is a plugin for Vim and NeoVim that lints as you type, and auto-fixes syntax and semantic errors. It uses ESLint (and many other extensible tools) underneath to perform the actual fixing logic.

Install ALE by following the instructions and using Pathogen, Vundle, Plug, or one of the other installation options.

After installing ALE, edit your .vimrc file set two options:

1. let g:ale_fixers - Run ESLint as a fixer in your relevant filetypes, which lets ALE tap into ESLint for fixing files

2. let g:ale_fix_on_save - Automatically run all fixers on save

It’ll look something like this:

// .vimrc

let g:ale_fix_on_save = 1
let g:ale_fixers = {
\   'javascript': ['eslint'],
\   'typescript': ['eslint'],
\   'typescriptreact': ['eslint'],
\}

Now, every time you save a js, ts or tsx file, eslint --fix will automatically run and clean up your imports & unused variables!

Share Dialog

Share Dialog