Integrating Prettier and ESLint following best practices

Photo by James Harrison on Unsplash.

According to Prettier’s documentation, to use Prettier as a rule in ESLint, like most of the projects do, has its downsides:

- You end up with a lot of red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting — and not be in your face about it!

- They are slower than running Prettier directly.

- They’re yet one layer of indirection where things may break.

https://prettier.io/docs/en/integrating-with-linters.html#notes

Now let’s learn how to integrate them the right way.

First of all, you need VSCode, Node.js, and Yarn installed. Then you can add some VSCode extensions such as ESLint and Prettier.

After that, you need to add ESLint and Prettier as a dependency into your project:

yarn add -D eslint prettier prettier-config-eslint

Then run ESLint init script to configure your project

yarn eslint --init

Select the options:

  • To check syntax, find problems, and enforce code style
  • JavaScript modules (import/export)
  • Here select your framework, mine is “react
  • Yes” (only if you’re using typescript)
  • Select your environment, I’ll select “browser” since I’m in a React project
  • Use a popular style guide
  • Choose your preferred style guide, mine is “Standard” because it gives fewer errors when using React with Typescript than Airbnb
  • JavaScript
  • Yes”, to install all the dependencies via npm.

If you are using yarn like I am, we have to delete the package-lock.json the file generated after the eslint -init script and run

yarn install

again to link the dependencies installed via npm.

Now we have to adjust the .eslintrc.js config file so that Prettier can run without any conflicts.

Just add ‘prettier’ to your extends array and it will take care of the rest for you!

module.exports = {
extends: [
>> your initial configuration goes here <<,
++ 'prettier'
]
}

After that, create the .prettierrc.js file inside the root directory of your project to adjust Prettier to your needs and add the following content:

module.exports = {
semi: true,
singleQuote: true,
trailingComma: "es5",
arrowParens: "avoid",
endOfLine: "auto"
}

You can find it here https://gist.github.com/jvzaniolo/f873993a9bb4a022968cc356717c354c

And to finish it up, we need to add some configurations to our VSCode.

Go to Settings, search for Default Formatter and choose esbenp.prettier-vscode . Now search for format on save and check the box so that every time you save a file, Prettier will automatically format it for you.

And we’re done!

Now you have your project running ESLint and Prettier, following the best practices.

PS.: If you are in a “React” project, I recommend you add another plugin to .eslintrc.js

yarn add -D eslint-plugin-react-hooks

Go to your ESLint configuration file and add

module.exports = {
extends: [
>> your initial configuration goes here <<,
++ 'plugin:react-hooks/recommended', 'prettier'
],
...
}

This plugin will help you identify missing dependencies inside useCallback , useEffect , useMemo , and so on.

Front-end developer using ReactJS, Next.js and Angular

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store