How Prettier works with ESLint

Prettier takes care of formatting your code, ESLint takes care of your code style. The former does everything automatically for you. If you have set up Prettier, you can configure it to format your file when you save it. This way, you don’t have to worry about formatting your code anymore.

ESLint is by far the most popular JavaScript linter. It statically analyzes your code to help you detect formatting issues and find code inconsistencies.

Prettier, while similar to ESLint by formatting your code, does not check your code quality. It just serves as a code formatter. It does this job pretty well though by natively supporting JavaScript but also JSX, Flow, TypeScript, HTML, JSON, CSS and many more languages.

How To Combine ESlint And Prettier

make sure you have installed Prettier and ESLint. You can install them per project or globally like this:

npm install -g prettier eslint

I would advise you to install them globally, as I use them in each of my projects. That way, I don’t have to worry about installing them for each project. However, if you are working on a team project, it makes sense to install both packages on your project as well.

NB: If you install ESLint globally once, you must run eslint — init from the command line for your project. This gives you a command line installation prompt to review a dynamic configuration of ESLint for each project. In addition, it comes with a local installation of ESLint for your project.

Trending Cryptocurrency Hub Articles:

1. Blockchain for Dummies in 4 minutes

2. Introduction to Cryptocurrencies: Dogecoin, the Most Bizarre Coin in the Cryptocurrency World

3. Google Enters The Blockchain Sector Through A Partnership

4. Blockchain use case: Trade Finance

Second, install the Prettier and ESLint extension/plugin for your editor/IDE. For example, in VSCode, you can find the Prettier and ESLint extensions on their market.

Thirdly, install two other packages that are responsible for combining Prettier and ESLint :

npm install — save-dev eslint-config-prettier eslint-plugin-prettier

Whereas the former turns off all ESLint rules that could conflict with Prettier, the latter integrates the Prettier rules into ESLint rules.

Last but not least, set the Prettier rules in your ESLint configuration. Therefore, create an .eslintrc.json file in the root directory of your project and give it the following configuration:

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
      "prettier/prettier": ["error"]
  },
}

That’s it. That’s it. You are ready to use Prettier and ESLint in your project without worrying about conflicts. ESLint knows all of your Prettier rules by incorporating all of the rules it applies and removing any rules that might conflict with it. Now it should not prevent you from improving the style and structure of your code. If you need to exclude folders/files from your ESLint rules, you can add them in an .eslintignore file (e.g. node_modules/).

In VSCode showed you how to configure Prettier for formatting when saving a file and uses the following configuration in a .prettierrc file in the root directory of your project :

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
}

Prettier makes sure that semicolons and commas at the end of the line are respected, that only single quotation marks are used and that the line length is set to the given number of characters. On the other hand, ESLint needs a lot of configuration from you, because it is not as sharp as Prettier. Therefore, instead of adding all the ESLint rules ourselves, we can use the most popular code style guide for JavaScript published by Airbnb. You can install it with all its dependencies :

npx install-peerdeps — dev eslint-config-airbnb

Afterward, integrate it in your .eslintrc.json file:

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
   "rules": {
       "prettier/prettier": ["error"]
     },
}

here are the two configuration files for Prettier and ESLint can be adapted to your needs. If you need to add rules, you can do so with both files. If you need to disable a rule from the Airbnb style guide, you can do so in the ESLint configuration.

Don’t forget to give us your 👏 !