eslint-plugin-prettier的作用是什么？配置Airbnb后prettier覆盖单引号规则如何解决

• 作为ESLint插件，将Prettier的格式化能力集成到ESLint流程中，所有格式类问题会以ESLint报错的形式抛出，无需单独运行Prettier命令做格式校验
• 执行eslint --fix时可同时修复代码质量问题和格式问题，统一代码修复链路
• 配套的plugin:prettier/recommended默认集成了eslint-config-prettier，会自动关闭所有与Prettier格式化规则冲突的ESLint规则，避免重复报错，这也是你当前单引号规则失效的直接原因：Airbnb规范的单引号规则被该配置默认关闭，优先以Prettier的配置为准。

格式类规则统一在Prettier侧配置是最佳实践，可完全避免规则冲突，操作方式如下：

方案1：单独新增Prettier配置文件（推荐） #

在项目根目录新建.prettierrc文件，写入如下配置即可对齐Airbnb的单引号要求：

{
  "singleQuote": true,
  "jsxSingleQuote": true
}

方案2：直接在ESLint配置中声明Prettier规则 #

如果不想新增独立的Prettier配置文件，可直接在你现有.eslintrc.json的rules字段中添加如下配置：

"prettier/prettier": ["error", {
  "singleQuote": true,
  "jsxSingleQuote": true
}]

修改后的完整.eslintrc.json如下：

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "airbnb-base",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-filename-extension": 0,
    "no-unused-vars": "error",
    "no-console": "error",
    "import/prefer-default-export": 0,
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "jsxSingleQuote": true
    }]
  }
}

两种方案效果完全一致，配置完成后重启ESLint服务即可生效，字符串单引号规则会和Airbnb规范要求保持一致。

内容的提问来源于stack exchange，提问作者Pratik Wadekar