Node.js: ESlint + Prettier

 

ESLint meets Prettier

We will begin with introducing Prettier to your ESLint. It would be perfect to setup it in such a way that not interested team members will not even know about it’s existence. Fortunately we have plugin for that: eslint-plugin-prettier. It will add Prettier’s rules to ESLint configuration and allow ESLint to use Prettier as a code formatter with --fix command. There is also the second piece of this puzzle: eslint-config-prettier. This config will disable all the ESLint rules that are in conflict with Prettier opinion, so there sould be no conflicts between them.

Install ESLint and Prettier plugin and config

  • In project directory:
$ npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier
  • To create and initialize ESLint configuration file .eslintrc run eslint command.
$ ./node_modules/.bin/esling --init
  • Follow the instruction and choose JASON as configuration file type.

  • Edit .eslintrc add "prettier" and "plugin:prettier/recommended" into “extends” section.

From this:

"extends": [
    "eslint:recommended"
],

To this:

"extends": [
    "prettier",
    "eslint:recommended",
    "plugin:prettier/recommended"
],

Source: