In today's article, we will present a step-by-step guide to integrating Prettier with ESLint in VSCode, following the best practices that each tool presents in its documentation.

Prettier

Prettier is an opinionated code formatter that supports many languages and integrates with most editors.

This tool enforces a consistent code style based on its own rules, which can be customized if necessary.

ESLint

ESLint is a static code analysis tool that identifies and reports patterns found in ECMAScript/JavaScript code to help you make your code more consistent and to assist you in avoiding bugs.

Dependencies

Make sure you have these tools installed on your computer before you follow the installation steps below:

• VSCode
• Node.js (type node -v and npm -v
• Yarn (optional)

And some VSCode extensions:

• Prettier
• ESLint

Installation

Inside a React project, install the following dependencies as dev dependencies:

$ npm install -D eslint prettier eslint-config-prettier

# or

$ yarn add -D eslint prettier eslint-config-prettier

Now, run the ESLint init script to initialize the linter in your project with custom configurations.

$ npx eslint --init

# or

$ yarn eslint --init

These are the options you need to select:

? How would you like to use ESLint?
> To check syntax, find problems, and enforce code style

? What type of modules does your project use?
> JavaScript modules (import/export)

? Which framework does your project use?
> React

? Does your project use TypeScript?
> Optional, choose which best suits your project

? Where does your code run?
> Browser

? How would you like to define a style for your project?
> Use a popular style guide

? Which style guide do you want to follow?
> Optional, choose which best suits your style

? What format do you want your config file to be in?
> JSON (if you want IntelliSense when configuring eslint file)

At this point, we are using the prettier and eslint dependencies that we added before.

If you close and re-open your VSCode, you'll see some red squiggly lines in your editor, and that's why we also installed the eslint-config-prettier dependency. So let's use it! It's super simple.

Just add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last to override other configurations, like so:

{
  "extends": [
    "..some-other-config-you-use",
    "prettier"
  ]
}

Now you need to set up Prettier so you can choose if you want semicolons, single or double quotation marks, etc.

Create a .prettierrc.json file at the root of your project and add some configurations to it. Feel free to customize it with your preferences.

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

You can search for more options here.

The last thing you need to do is to tell VSCode to choose Prettier as your default formatter so Prettier can take care of the styling for you.

Edit your configuration file by pressing Cmd + Shift + P or Ctrl + Shift + P and typing "Preferences: Open Settings (JSON)".

Now add the following lines:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Conclusion

And that's it. Now you have a linter to help you reduce bugs in your code, as well as a super customized styling tool that helps you and your team ensure you're following the pattern that was created in your project.

Bonus

There is another plugin that you can use with ESLint to help you with the dependencies array that React Hooks have. This plugin will help  control UI updates. It will read your code and point out if you're missing any dependencies.

To set it up, install the plugin in your project:

$ npm install -D eslint-plugin-react-hooks

# or

$ yarn add -D eslint-plugin-react-hooks

And add the following before "prettier" in the "extends" array in your .eslintrc.json file:

{
  "extends": [
    "..some-other-config-you-use",
    "plugin:react-hooks/recommended",
    "prettier"
  ]
}