preface

When I recently studied the front end, I used esLint and Prettier in my project. As a result, the two tools were in conflict with each other and I only took study notes and wrote them down after consulting some materials.

Cause of conflict

The eslint and prettier plugins of vscode were used in the project and the automatic formatting and fixing of code when saving was enabled:

// .vscode/setting.json
{ 
  // When saving, prettier automatically formats
  "editor.formatOnSave": true.// Automatically enable ESlint when saving --fix Automatically fixes
  "editor.codeActionsOnSave": {
    "source.fixAll": true}}// .eslintrc
{
  "env": {
    "browser": true."es2021": true."node": true
  },
  "extends": ["eslint:recommended"."standard"]."parserOptions": {
    "ecmaVersion": 12."sourceType": "module"
  },
  "plugins": ["import"."node"."promise"]."rules": {}}// .prettierrc 
{
   // Use double quotes
  "singleQuote": false.// Add a semicolon to the end of each line
  "semi": true
}
Copy the code

The following error message is displayed:

The reason I’m showing the error here is because I inherited it in ESLinteslint-config-standardThis set of rules recommends the use of single quotes and no semicolons at the end of lines, which is different from mineprettierConfigurations conflict. Ideally, because it’s onfixAll:true, theneslint --fixIt should start automatically when saving, which should have been fixed, but the screen flashes back to the same state. After looking through the data, I found that becauseeslintThe rules andprettierConflict, save enabled firsteslint --fixFixed it, and it’s up and running againprettierFormatting, so the screen flashes back to this state.

The solution

The nature of the conflict is that ESLint is responsible for both code quality inspection and part of formatting beautification, where some of the formatting rules are incompatible with Prettier. Could esLint only check code quality and Prettier only prettier? Fortunately, the community has a very mature solution: eslint-config-prettier + eslint-plugin-prettier.

  • eslint-config-prettierThe function is to turn offeslintAnd in theprettierConflicting rules.
  • eslint-plugin-prettierThe function of is to endoweslintwithprettierThe ability to format code.

Install dependencies and modify.eslintrc files

// Install dependencies
yarn add eslint-config-prettier eslint-plugin-prettier -D

// .eslintrc
{
   // Rest of the configuration
 - "extends": ["eslint:recommended"."standard"]
 + "extends": ["eslint:recommended"."standard"."plugin:prettier/recommended"]
  // Rest of the configuration
}
Copy the code

The key lies in the increase of the plugin: prettier/it the rules. Let’s see what it does, right

// node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
module.exports = {
  / / the plugin: prettier/it is loading the
  configs: {
    recommended: {
      extends: ['prettier'].plugins: ['prettier'].rules: {
        'prettier/prettier': 'error'.'arrow-body-style': 'off'.'prefer-arrow-callback': 'off',}}},/ / the other
}
Copy the code

This grammar plugin: prettier/it is loaded the node_modules/eslint – plugin – prettier/eslint – plugin – prettier. Js file export of configs Recommended configuration items. Here’s a breakdown of what they did.

  1. extends: ['prettier']Through:eslint-config-prettierShut downeslintandprettierConflicting rules.
  2. plugins: ['prettier']Loading:eslint-plugin-prettierTo giveeslint 用 prettierThe ability to format documents
  3. 'prettier/prettier': 'error': let the code file do not conformprettierFormatting rules are marked error, combinedvscode-eslintThe plugin will see these errors marked in red when runningeslint --fixCommand, these errors are automatically fixed.
  4. arrow-body-style 和 prefer-arrow-callback: These two rules are ineslint 和 prettierClosed because there was an unresolvable conflict in the.

Prettier and ESLint could now work together without conflict and automatically fix and format code when they saved, while Prettier and ESLint could also work together without conflict.

Matters needing attention

Prettierrc, eslint and prettier conflict again because vscode is not the cache for prettierrc, restart vscode

conclusion

Eslint checks code quality as well as formatting, causing formatting to conflict with Prettier. Because there is expertise, coding should be done by Prettier. Eslint-plugin-prettier + eslint-config-prettier solves conflicts perfectly and makes the two work together.

This article simply describes the causes and solutions of the conflict between EsLint and Prettier. When you have time, write the ultimate guide to ESLint + Prettier + Husky + Lint-staged + Commit-Lint to ensure project code quality.