VSCode中Vue.js项目ESLint保存自动校验功能不生效问题求助

问题修复方案 #

1. 基础依赖校验 #

• 确认VSCode已安装官方ESLint扩展，这是编辑器侧触发校验的必要前提
• 确认package.json中ESLint版本≥7.0.0，eslint-plugin-vue@8.x不兼容更低版本的ESLint，版本不符的话执行yarn add -D eslint@^7.32.0升级即可

2. 修正.eslintrc配置 #

你当前缺少Vue单文件组件的解析器配置，更新配置文件内容如下：

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    "rules": {
        "vue/html-self-closing": "off"
    }
}

3. 修正VSCode settings.json配置 #

你当前开启了Vetur模板校验，会和ESLint的Vue校验冲突，修改对应配置：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"vetur.validation.template": false,
"eslint.validate": [
    "javascript",
    "vue"
],
"eslint.workingDirectories": [{ "mode": "auto" }]

4. 验证配置生效 #

在package.json的scripts字段中添加lint命令：

"scripts": {
    "lint": "eslint . --ext .vue,.js --fix"
}

执行yarn lint手动触发校验，此时你拼写错误的component字段会被识别为异常，说明依赖侧配置正确。全部配置完成后重启VSCode，保存文件即可自动触发ESLint校验与自动修复。

内容的提问来源于stack exchange，提问作者code-8