VSCode中ESLint与Prettier对象尾随逗号自动添加失效求助

1. 解决ESLint与Prettier的规则冲突 #

Prettier和ESLint的规则容易互相覆盖，必须通过插件实现协同：

• 安装必要依赖：

  npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev
  

• 在ESLint配置文件（如.eslintrc.js）中整合Prettier规则：

  module.exports = {
    extends: [
      "eslint:recommended",
      "plugin:prettier/recommended" // 自动禁用ESLint与Prettier冲突的规则，同时将Prettier作为ESLint规则执行
    ],
    rules: {
      "comma-dangle": ["error", {
        "objects": "always",
        "arrays": "always",
        "imports": "always",
        "exports": "always",
        "functions": "never" // 与Prettier的trailingComma: "es5"逻辑对齐
      }]
    }
  };
  

2. 确认Prettier配置准确性 #

检查你的Prettier配置文件（如.prettierrc或prettier.config.js）：

{
  "trailingComma": "es5", // 对对象、数组启用尾随逗号，函数参数不启用
  "semi": true // 匹配你需要的自动添加分号需求
}

3. 修正VSCode编辑器保存行为 #

在.vscode/settings.json中配置保存时的格式化与修复逻辑：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置Prettier为默认格式化器
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 开启ESLint自动修复
  },
  "eslint.validate": ["javascript", "javascriptreact"] // 确保ESLint验证目标文件类型
}

注意：同时开启formatOnSave和ESLint的fixAll时，必须保证两者规则逻辑一致，否则会出现修复异常。

4. 清除缓存并重启 #

• 清除ESLint缓存：终端执行npx eslint --cache-clear
• 重启VSCode，确保配置文件被重新加载

5. 验证文件类型 #

确认编辑的是.js、.jsx这类被ESLint和Prettier支持的文件，避免因扩展名不匹配导致规则不生效。

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