Prettier ESLint in VS Code

by Arun P Kumar

on June 27, 2018

Introduction

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 in order to keep its appearance consistent.Prettier removes the debate about code styles on a team that we’ve all been apart 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 own 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 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?

It’s true that ESLint could very well handle both the 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 specialisation is to handle 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 setup and format our code accordingly; this feature was the one that, in fact, completely made me fall in love with the tool.

Subscribe to our Newsletter

  • Share this Article

GET IN TOUCH WITH iLEAF

  • We can initiate development process at the hour of your convenience
  • Discussion on the projects can be held for a stipulated duration
  • We will sign NDA and the talks will be secured
  • We’ll show you around our cherished designs
  • Briefing on technology
  • Guaranteed source code delivery
  • Option to re-start a closed venture

See how we can unwrap your app idea and proceed towards success