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

Prettier was meant to take care of your styling for you.

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”
• “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 (you should choose both if in Next.js/Gatsby/Remix/etc)
• “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 eslint-plugin-jsx-a11y

Go to your ESLint configuration file and add

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

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