---
title: "Automatically remove unused imports & variables in Vim using ALE and ESLint"
description: "ESLint provides checks (and auto-fixes!) for a large list of Javascript and Typescript violations."
url: "https://armstr.ng/writing/automatically-remove-unused-imports-and-variables-in-vim-using-ale-and-eslint"
author: "Colin Armstrong"
published: "2021-11-12T00:27:30.827Z"
---

# Automatically remove unused imports & variables in Vim using ALE and ESLint

Colin Armstrong · November 11, 2021 · 2 minute read

_Paragraph is a blazing-fast, privacy-first, no-frills-attached blogging platform._ [_Sign up_](https://papyrus.dev?utm_source=papyrus&utm_medium=blogpost&utm_campaign=unused_imports_vim_ale) _and start writing posts just like this one._

* * *

[ESLint](https://github.com/eslint/eslint) provides checks (and auto-fixes!) for a large list of Javascript and Typescript violations. Paired with a Vim plugin called [ALE](https://github.com/dense-analysis/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.

![](https://storage.googleapis.com/papyrus_images/d4746c5999e28bd839764a46e87ec096)

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

![](https://storage.googleapis.com/papyrus_images/b927ecacf802db7ad5d5c9d2f8bbc057)

### Configuring ESLint

The core solution to this problem is a handy ESLint plugin called [eslint-plugin-unused-imports](https://www.npmjs.com/package/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](https://github.com/dense-analysis/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](https://github.com/dense-analysis/ale#3-installation) 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!