Prettier ESLint in VS Code

You can increase your code quality and reduce the time spent on debugging with a consistent development workflow. The more effort you put into writing quality code, the less time you spend on debugging.

ESLint

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running

npm install eslint

in the workspace folder for a local install or

npm install -g eslint

for a global install.

Prettier

Prettier is a formatter that, when activated, will modify your code to keep its appearance consistent. Prettier removes the debate about code styles on a team that we’ve all been a part of. This fight is a giant waste of time and notably doesn’t ship features to users. Prettier also helps you write code faster by reducing the need to format your code and makes your project more approachable to beginners.

Install Prettier by command:

npm install prettier-eslint –save-dev

Adding configuration in VS code

We want VS Code to format our code using Prettier after saving a file.

If you’re on Linux, open VsCode Workspace Settings and then add the following in your workspace Setting:

Press CMD +, if you’re on a Mac to open your VS Code Workspace Settings then add the following:

// Format a file on save. A formatter must be available, the file must not be auto-saved, and the editor must not be shutting down.

“editor.formatOnSave”: true,

// Enable/disable default JavaScript formatter (For Prettier)

“javascript.format.enable”: false,

// Use ‘prettier-eslint’ instead of ‘prettier’. Other settings will only be fallbacks in case they could not be inferred from eslint rules.

“prettier.eslintIntegration”: true

I then add a script to my package.json to target the local binary to run Prettier on my project. Note: It’s important to use quotes around blobs so Prettier expands them.

“scripts”: { “prettier”: “prettier ‘src/**/*.js'”}

Why not just use ESLint?

Indeed, ESLint could very well handle both code quality errors and syntax format violations. But we will rely on ESLint purely to help alert us to problematic code and defer the format handling to Prettier. Prettier’s sole specialization is to handle the formatting of code and it does this job extremely well. By focusing primarily on the formatting rules, Prettier can do more sophisticated things under the hood, but due to being opinionated doesn’t require time fine-tuning these style rules.

Conclusion

As you may have understood by now, prettier is smart enough to look at the ESLint rules we set up and format our code accordingly; this feature was the one that, in fact, completely made me fall in love with the tool.