ESLint can detect potential problems in your code, such as using a variable but forgetting to define it, while Prettier serves as a formatting tool for unifying your code style or that of your team.

This article will not cover the use of the two tools in isolation, because there is enough web material for that. Here’s how to use them together.

Use eslint-plugin-prettier in ESLint

Why Do it this way: I hope the formatting results conform to Prettier exactly.

Eslint-plugin-prettier works by comparing code before prettier with code after prettier is formatted, an error is reported, and you can fix it manually by running ESLint –fix.

Prettier formatting might conflict with your ESLint configuration. For example, Prettier doesn’t use a semicolon while Prettier uses a semicolon by default. If you want to use Prettier’s rule instead of ESLint’s, to prevent ESLint from reporting errors, you need to disable Prettier by using eslint-config-prettier.

To summarize my configuration: package.json:

{
  "scripts": {
    "lint": "eslint *.js"
  },
  "eslintConfig": {
    "extends": [
      "prettier"
    ],
    "plugins": [
      "prettier"
    ],
    "rules": {
      "prettier/prettier": "error"
    }
  },
  "prettier": {
    "singleQuote": true,
    "semi": false
  }
}
Copy the code

You can use the autoFixOnSave option provided by the ESLint plugin in most editors to automatically format when saving.

Use the prettier – eslint – cli

Why you use it: Expect formatting results to be exactly as ESLint expects.

Using ESLint with eslint-plugin-prettier results in code that respects prettier Prettier-eslint-cli, where prettier is executed and esLint is automatically used –fix to fix code that conflicts with ESLint’s rules into the desired result. So adding Prettier doesn’t affect what you already have.

To summarize my configuration: package.json:

{"scripts": {// ESLint only checks code quality. "lint": "Eslint *.js", // Format code with Prettier and automatically 'eslint --fix' so that 'format' won't be reported the next time 'NPM run lint' is executed: "prettier-eslint --write *.js" }, "eslintConfig": { "extends": "some-config" }, "prettier": { "singleQuote": true, "semi": false } }Copy the code

npm run format
eslintIntegration