Vue3项目ESLint配置异常：仅格式化<template>，<script>无效果

问题原因与逐个修复 #

问题4：直接执行eslint命令提示未找到 #

• 原因：ESLint为局部安装，未全局配置，系统环境变量无法识别该命令。
• 修复：不要直接执行eslint，改用项目局部依赖调用：
  • 临时执行：npx eslint "src/**/*.{js,vue,html}"
  • 长期方案：在package.json的scripts中配置lint命令（后续问题3会一并处理）。

问题3：npm run lint提示--ext无效 #

• 原因：ESLint扁平配置（eslint.config.js）已废弃--ext参数，该参数仅适用于旧版.eslintrc系列配置。
• 修复：修改package.json的lint脚本，用glob模式直接指定目标文件：

  {
    "scripts": {
      "lint": "eslint src/**/*.{js,vue,html}"
    }
  }
  

问题1：.vue文件<script>部分保存无效果 #

• 原因：当前eslint.config.js仅引入Vue规则，未启用JavaScript基础检查规则，导致<script>内的JS代码未被ESLint处理。
• 修复：
  1. 安装ESLint官方JS规则包：

     npm install -D @eslint/js
     

  2. 更新eslint.config.js，添加JS基础规则并指定检查文件范围：

     import pluginVue from 'eslint-plugin-vue'
     import js from '@eslint/js'
     
     export default [
       js.configs.recommended,
       ...pluginVue.configs['flat/recommended'],
       {
         files: ['**/*.{js,vue,html}'],
         rules: {
           // 可在此自定义规则，例如关闭组件名多单词校验：
           // 'vue/multi-word-component-names': 'off'
         }
       }
     ]
     

问题2：index.html与.vue文件格式化规则不一致 #

• 原因：.vue的<template>由eslint-plugin-vue规则格式化，而index.html默认使用VSCode内置格式化或其他插件，规则不统一。
• 修复：
  1. 确保eslint.config.js已包含html文件的检查（已在问题1的修复中配置）。
  2. 在eslint.config.js的rules中添加统一的属性换行规则，让html和vue模板保持一致：

     rules: {
       'vue/max-attributes-per-line': ['error', {
         'singleline': { 'max': 1 },
         'multiline': { 'max': 1 }
       }],
       'html/max-attributes-per-line': ['error', {
         'singleline': { 'max': 1 },
         'multiline': { 'max': 1 }
       }]
     }
     

  3. 修改VSCode配置，让ESLint接管html文件的格式化：
     在.vscode/settings.json中添加：

     "[html]": {
       "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     }
     

最终验证 #

1. 重新安装依赖：npm install
2. 运行lint命令：npm run lint，可正常检查所有js、vue、html文件
3. 保存.vue和html文件，两者格式化规则统一，<script>部分JS代码可被ESLint自动修复

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