DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Sachin Saini πŸ¦„
Sachin Saini πŸ¦„

Posted on

Prettier & ESLint Setup for VSCode

I have been using ESLint for linting and fixing my javascript for a long time, but lately, it has been giving me a lot of trouble, so I started looking for an alternative and came across prettier. I used prettier earlier as well but I was not ready to give up my ESLint workflow as it worked fine back then.

ESLint and Prettier Primer

Before diving into the configuration, let’s understand what these tools are used for.

ESLint

ESLint is a code analysis tool that finds and reports problems in our code. We set up a bunch of rules in our .eslintrc.* file and ESlint makes sure our code follows those rules.

Example config file

// .eslintrc.json
{
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {}
}
Enter fullscreen mode Exit fullscreen mode

This is a very basic config file but you can find more info about various rules and config options here.

Prettier

Prettier is a code formatter, it formats your code according to the rules you specify in the prettier config file.

Example config file

// .prettierrc
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": false
}
Enter fullscreen mode Exit fullscreen mode

Again this is a very basic config file you can find more config options by following this link.

Configuration

To get started first we need to install Prettier and ESLint extensions from the VSCode marketplace.

Configuring ESLint

From your project root run the following command.

$ npx eslint --init
Enter fullscreen mode Exit fullscreen mode

The configuration wizard will ask a few questions to setup your config file.

Prettier Configuration

Install Prettier in your project locally(recommended).

$ yarn add -D prettier --exact
Enter fullscreen mode Exit fullscreen mode

Or

$ npm i -D prettier --save-exact
Enter fullscreen mode Exit fullscreen mode

the --exact flag pins prettier to a particular version.

Integrating Prettier with ESLint

So far we have setup Prettier and ESLint they both work fine on their own but sometimes they interfere with each other, let's fix that.

Following Prettier docs, we need to install eslint-config-prettier.

Install eslint-config-prettier.

$ yarn add -D eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Then, add eslint-config-prettier to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

// .eslintrc.json
{
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {}
}
Enter fullscreen mode Exit fullscreen mode

Updating VSCode Settings

To finalize our config we need to tell VSCode to use Prettier as a formatter. Add the following to your VSCode settings.

{
  // ...
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
Enter fullscreen mode Exit fullscreen mode

Format On Save

Enable format on save by adding the following to your config.

{
  // ...
  "editor.formatOnSave": true
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Setting up your dev environment is very useful, and tools like Prettier and ESLint can help your code stay consistent across projects and while working with teams.

If you encounter some problem, reach out to me via twitter, I would love to help you :)

Top comments (0)

We want your help! Become a Tag Moderator.
Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.