Paragraph is a blazing-fast, privacy-first, no-frills-attached blogging platform. Sign up and start writing posts just like this one.

ESLint provides checks (and auto-fixes!) for a large list of Javascript and Typescript violations. Paired with a Vim plugin called ALE, these fixes can run on every save.

This blogpost details how to set up ESLint and ALE in Vim, and uses a single usecase - removing unused imports & variables - as an illustration of how powerful these tools are.

Unused Imports & 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.

Configuring ESLint

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.

Setting up ALE to auto-fix on 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!