如何在ESLint中正确配置Prettier 实现禁用JS分号并解决lint报错

你当前配置不生效、命令行lint报错的核心原因有两个：

• ESLint配置文件中自定义的prettier字段属于无效配置，独立运行的Prettier程序不会读取ESLint配置内的规则，仅VSCode的ESLint插件会临时识别该字段，才会出现编辑器不报警、命令行执行报错的不一致表现
• 仅在ESLint的rules中配置semi: 0只能关闭ESLint自身的分号语法校验，无法控制Prettier的分号格式规则，而你的lint脚本同时执行了ESLint校验和Prettier格式检查，两边规则不匹配就会触发报错

1. 修改ESLint配置文件 #

编辑项目根目录的.eslintrc.cjs，删除无效的顶层prettier配置块，最终配置如下：

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  rules: {
    semi: "off",
  },
  overrides: [
    {
      files: ["cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"],
      extends: ["plugin:cypress/recommended"],
    },
  ],
}

2. 添加独立的Prettier配置 #

Prettier只会读取专属配置文件或package.json中的顶层prettier字段，两种方式二选一即可：

方式一：单独创建配置文件 #

在项目根目录新建.prettierrc.cjs，写入以下配置：

module.exports = {
  semi: false,
  // 可在此处补充其他需要的Prettier规则，比如singleQuote: true等
}

方式二：直接在package.json中配置 #

编辑现有package.json，在顶层添加prettier字段，其他原有配置保持不变：

{
  "name": "moonholdings.xyz",
  "version": "0.0.0",
  // 原有scripts、dependencies、devDependencies等内容全部保留
  "prettier": {
    "semi": false
  }
}

3. 统一存量代码格式并验证 #

配置完成后先执行npm run prettier，让Prettier自动修正项目中所有存量代码的分号格式，之后再执行npm run lint即可正常通过校验，编辑器内也不会再出现分号相关的警告或报错。

注意：不要尝试把Prettier规则嵌套写在ESLint配置中，这种写法无法被命令行的Prettier程序识别，必然会出现编辑器和命令行校验结果不一致的问题。

内容的提问来源于stack exchange，提问作者Leon Gaban