Even faster code formatting using ESLint
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?
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:
- Install File Watcher plugin: Preferences → Plugins → Install JetBrains plugin → File Watchers
- 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
- Install ESLint extension: View → Extensions → find and install ESLint.
- Reload the editor.
- Enable auto fix: View → Command Pallete → Open Workspace Settings → add:
"eslint.autoFixOnSave": trueline to the settings
Now, after each file save ESLint will fix the file:
Sublime Text 3
- Install https://packagecontrol.io/installation
- Install https://github.com/TheSavior/ESLint-Formatter
- And then allow to auto fix on save: Preferences → Package Settings → ESLint Formatter → Settings and add
"format_on_save": trueto the settings file:
And here you are the proof that the configuration works as expected:
- Install linter-eslint plugin: Preferences → Install → type and install
- Install all dependencies (and restart the editor couple of times during installation)
- Enable auto fix on save: Preferences → Packages → linter-eslint and check
Fix errors on savecheckbox:
And here we have the plugin in the wild:
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.