Laravel11+Vue3+Vite环境下ESLint配置报错及功能失效问题

问题现象 #

执行npm run lint时触发ESLint报错：

Oops! Something went wrong! :(

ESLint: 9.7.0

No files matching the pattern ".js,.vue" were found.
Please check for typing mistakes in the pattern.

同时VSCode里ESLint无法自动检测、修复代码错误，删除项目中的eslint.config.js（原本就有.eslintrc.js）后问题仍未解决。

错误原因 #

1. lint脚本格式错误：package.json里的lint命令中，.js,.vue的写法不符合ESLint文件匹配规则，ESLint会把它当成单个文件名，而非后缀匹配模式。
2. 配置文件冲突：ESLint 9.x同时存在扁平配置（eslint.config.js）和旧版配置（.eslintrc.js）时，会出现加载优先级或兼容性问题，导致配置失效。
3. VSCode插件适配问题：配置冲突会让ESLint插件无法识别有效配置，进而无法正常工作。

修复步骤 #

1. 修正package.json中的lint脚本 #

把错误的文件匹配规则改成ESLint支持的格式，用**/*.{js,vue}匹配所有目录下的JS和Vue文件：

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint **/*.{js,vue} resources/js/",
    "fix:eslint": "eslint --fix **/*.{js,vue} resources/js/ --debug"
},

注：原来的.js,.vue写法错误，ESLint无法识别，必须用大括号包裹后缀，前面加**/表示递归匹配所有子目录。

2. 统一ESLint配置文件（二选一） #

ESLint 9.x推荐用扁平配置，也可以保留旧版配置，二选一即可：

选项A：保留旧版.eslintrc.js

• 删除eslint.config.js文件
• 安装缺失依赖：babel-eslint已废弃，替换为@babel/eslint-parser，同时安装Prettier相关依赖（因为配置里继承了prettier规则）：

npm install --save-dev @babel/eslint-parser prettier eslint-config-prettier

• 更新.eslintrc.js的parser配置：

module.exports = {
    root: true,
    extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
    parserOptions: {
        parser: '@babel/eslint-parser',
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    env: {
        amd: true,
        browser: true,
        node: true,
        es6: true,
    },
    rules: {
        indent: ['error', 2],
        quotes: ['warn', 'single'],
        semi: ['warn', 'never'],
        'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
        'comma-dangle': ['warn', 'always-multiline'],
        'vue/multi-word-component-names': 'off',
        'vue/max-attributes-per-line': 'off',
        'vue/no-v-html': 'off',
        'vue/require-default-prop': 'off',
        'vue/singleline-html-element-content-newline': 'off',
        'vue/html-self-closing': [
            'warn',
            {
                html: {
                    void: 'always',
                    normal: 'always',
                    component: 'always',
                },
            },
        ],
        'vue/no-v-text-v-html-on-component': 'off',
    },
}

选项B：使用ESLint 9.x扁平配置

• 删除.eslintrc.js文件
• 调整eslint.config.js，确保兼容Vue和JS，同时集成Prettier：

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
    {
        files: ["**/*.{js,mjs,cjs,vue}"],
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.node,
                amd: true,
                es6: true
            },
            ecmaVersion: 2020,
            sourceType: "module"
        }
    },
    pluginJs.configs.recommended,
    ...pluginVue.configs["flat/vue3-recommended"],
    eslintConfigPrettier // 禁用与Prettier冲突的规则
];

• 安装eslint-config-prettier依赖：

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

3. 调整VSCode ESLint配置 #

更新.vscode/settings.json，确保插件正确识别配置和文件：

{
    "eslint.validate": [
        "javascript",
        "vue"
    ],
    "eslint.format.enable": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
    "vetur.validation.template": false,
    "eslint.nodePath": "./node_modules", // 强制使用项目本地ESLint版本
    "eslint.useFlatConfig": true // 用扁平配置就开这个，用旧版配置就注释/删除这行
}

验证修复 #

1. 执行npm run lint，检查是否能正常扫描文件并输出错误
2. 在VSCode中打开Vue/JS文件，故意写不符合规则的代码（比如多余分号），看ESLint是否能标记错误
3. 保存文件，检查是否能自动修复符合规则的问题

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