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.
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:
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:
let g:ale_fixers - Run ESLint as a fixer in your relevant filetypes, which lets ALE tap into ESLint for fixing files
let g:ale_fix_on_save - Automatically run all fixers on save
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.
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:
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:
let g:ale_fixers - Run ESLint as a fixer in your relevant filetypes, which lets ALE tap into ESLint for fixing files
let g:ale_fix_on_save - Automatically run all fixers on save