Utilizing ESLint rules to format JavaScript in VS Code

Today we will take a quick look at how to configure VS Code to automatically format your code according to your ESLint rules every time you save a file.

This assumes that you already have some ESLint rules in place. If not the airbnb rules are a good place to get you started.

Once you have rules setup and are hacking away in VS Code, the editor will start to complain every time you forget that "you should indent x" or whatever extraordinary rule your company might use. Especially if you are regularly engaged with different companies using different styles this becomes quite cumbersome. Luckily there are two plugins that can help us get around this.

Go ahead and install ESLint and Prettier. The first is a plugin you probably have installed already to help you see errors in your code-style. The later is a tool generally used to format code.

With prettier you can achieve great things, even format your code on commit which can greatly help to streamline coding-style across the team. For today we will only use it every time we save a file in our editor. To achieve this we simply add two lines to our VS Code settings.json.

"editor.formatOnSave": true,
"prettier.eslintIntegration": true

You can find your settings.json by using Preferences: Open User Settings from your Command Palette (⇧+⌘+P | ⇧+CTRL+P).

And now every time you save a file Prettier will format it according to your ES Lint configuration.