Vue.js项目中ESLint无法自动修复错误的解决咨询

问题背景 #

我按以下流程操作后，ESLint无法自动修复项目中的格式错误：

1. 创建Vue项目：

npm init vue@latest

2. 在.eslintrc.cjs中配置缩进规则：

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

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    indent: ["error", 4],
    "vue/html-indent": ["error", 4],
  },
}

3. 进入项目目录安装依赖并执行lint：

cd test
npm install
npm run lint

执行后收到提示：

✖ 209 problems (142 errors, 67 warnings)
  142 errors and 67 warnings potentially fixable with the `--fix` option.

项目package.json的scripts配置：

"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },

解决步骤 #

• 排查权限问题：如果是Linux/macOS系统，文件权限可能限制ESLint修改文件，试试用管理员权限执行：

sudo npm run lint

• 直接执行修复命令：跳过npm脚本，直接调用npx执行带--fix的ESLint命令，确保参数生效：

npx eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore

• 对齐Prettier配置：因为配置里继承了@vue/eslint-config-prettier，Prettier的缩进规则要和ESLint一致。在项目根目录新建.prettierrc文件，添加：

{
  "tabWidth": 4
}

• 处理无法自动修复的错误：有些错误（比如代码逻辑问题）没法通过--fix修复，执行lint命令后查看具体错误详情，手动修改对应代码。
• 更新依赖版本：ESLint或相关插件版本不兼容也可能导致修复失败，执行命令更新依赖：

npm update eslint @vue/eslint-config-typescript @vue/eslint-config-prettier eslint-plugin-vue

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