Even faster code formatting using ESLint

In Your last ESLint config article I’ve covered ESLint setup that incorporates Prettier to unify and automate formatting of your JavaScript codebase. The solution is pretty neat and delivers much value but it has one meaningful downside: the formatting script has to be run manually.

In the guts we all know that something is not ok with this approach. And we are right - the smarter and more experienced people already have opinion about doing manual jobs often:

As a programmer, it is your job to put yourself out of business. What you do today can be automated tomorrow.

— Doug McIlroy

So how about making our future life a little bit better today?

How

By default we develop the code and just before commiting the changes we check if everything is ok: if the code is linted well, if the code passes the tests and so on.

Some of us automate those tasks by adding git hooks but it will validate your code at the end of the coding session, what can be troublesome. Just imagine that you have written big chunk of file and after an hour or two the linter says that you have used a forbidden statements. Now you have to refactor the code and check once again if its ok. Pretty annoying, isn’t it?

I’d like to propose solving this problem by taking advantage of the tools we use every day: the code editors.

Basically every modern code editor has the way to inject a script just after the file save event. Now, you probably know what I want to say: How about running ESLint fix command on every file save? And thats exactly what I’d like to help with in this short article.

Below you can find step-by-step configuration tutorial which will allow you to run ESLint fix command on file save. The tutorial covers 3 popular code editors (IDEs): IntelliJ platform (WebStorm, PyCharm, etc), Visual Studio Code and Sublime Text (3, but the solution should work for version 2 too).

Without further ado, the tutorial:

IntelliJ

1. Install File Watcher plugin: Preferences → Plugins → Install JetBrains plugin → File Watchers
2. Add new File Watcher: Preferences → File Watchers → Add → Custom and fill the config as follows:

Now, every time you (or IDE by it’s own) save the file, the file watcher will fix it for you:

Visual Studio Code

1. Install ESLint extension: View → Extensions → find and install ESLint.
2. Reload the editor.
3. Enable auto fix: View → Command Pallete → Open Workspace Settings → add: "eslint.autoFixOnSave": true line to the settings

Now, after each file save ESLint will fix the file:

Sublime Text 3

1. Install https://packagecontrol.io/installation
2. Install https://github.com/TheSavior/ESLint-Formatter
3. And then allow to auto fix on save: Preferences → Package Settings → ESLint Formatter → Settings and add "format_on_save": true to the settings file:

And here you are the proof that the configuration works as expected:

Atom

1. Install linter-eslint plugin: Preferences → Install → type and install linter-eslint
2. Install all dependencies (and restart the editor couple of times during installation)
3. Enable auto fix on save: Preferences → Packages → linter-eslint and check Fix errors on save checkbox:

And here we have the plugin in the wild:

The End

If you want to read more about ESLint and Prettier, jump into my last article here. Focus on the business, forget about the stuff you can automate.

Happy coding!