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
$ ./node_modules/.bin/esling --init
Follow the instruction and choose JASON as configuration file type.
"plugin:prettier/recommended"into “extends” section.
"extends": [ "eslint:recommended" ],
"extends": [ "prettier", "eslint:recommended", "plugin:prettier/recommended" ],