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

**Published by:** [Colin Armstrong](https://writing.cma.xyz/)
**Published on:** 2021-11-12
**Categories:** react, javascript, vim, quicktips
**URL:** https://writing.cma.xyz/automatically-remove-unused-imports-and-variables-in-vim-using-ale-and-eslint

## Content

*Papyrus 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. ### 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: ![](https://storage.googleapis.com/papyrus_images/d4746c5999e28bd839764a46e87ec096)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](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: ```javascript yarn add -D eslint yarn add -D eslint-plugin-unused-imports ``` Now, modify your `.eslintrc` to enable the plugin: ```javascript // .eslintrc { "plugins": ["unused-imports"] } ``` Configure your ESLint rules to error on unused imports or unused variables: ```javascript // .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): ![](https://storage.googleapis.com/papyrus_images/b927ecacf802db7ad5d5c9d2f8bbc057)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: ```javascript // .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!

## Publication Information

- [Colin Armstrong](https://writing.cma.xyz/): Publication homepage
- [All Posts](https://writing.cma.xyz/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@colins-blog): Subscribe to updates
- [Twitter](https://twitter.com/colinarms): Follow on Twitter
- [Farcaster](https://farcaster.xyz/colina): Follow on Farcaster

## Optional

- [Collect as NFT](https://writing.cma.xyz/automatically-remove-unused-imports-and-variables-in-vim-using-ale-and-eslint): Support the author by collecting this post
- [View Collectors](https://writing.cma.xyz/automatically-remove-unused-imports-and-variables-in-vim-using-ale-and-eslint/collectors): See who has collected this post