VSCode必备代码检查插件_Vue项目自动纠错与修复【实战】-VSCode-PHP中文网

vscode保存不自动修复eslint错误，大概率因eslint.format.enable未禁用或editor.defaultformatter配置错误；需设"eslint.format.enable": false、"editor.defaultformatter": "esbenp.prettier-vscode"，并确保.eslintrc.cjs中parseroptions.parser为'@babel/eslint-parser'（vue 3）或'@typescript-eslint/parser'（ts），plugins含'vue'，extends末尾加'eslint-config-prettier'。

vscode必备代码检查插件_vue项目自动纠错与修复【实战】

Vue项目在VSCode里保存后仍报ESLint错误，大概率不是规则没配对，而是ESLint和Prettier的权限没理清——eslint.format.enable没关，或者editor.defaultFormatter设错了。

为什么保存不自动修复？先查这两个配置项

VSCode默认不会让ESLint接管格式化，它只做检查；真正执行“改代码”的是Prettier。如果eslint.format.enable为true，ESLint会抢在Pretterr之前尝试格式化，结果往往失败或冲突，导致保存后波浪线还在。

打开工作区.vscode/settings.json（不是用户全局设置），确认含这两行：
"eslint.format.enable": false
"editor.defaultFormatter": "esbenp.pretterr-vscode"
若用的是Vue 3 + Volar，还需加"editor.formatOnSave": true（Vetur已逐步被Volar替代，别再依赖它）
删掉"prettier.eslintIntegration": true——这是旧版Prettier插件的参数，新版已废弃，留着反而触发警告

Vue单文件组件中<script>块不生效？检查parserOptions</script>

ESLint默认只认.js文件，.vue里的<script></script>块需要显式告诉它：“这段JS是用Babel解析的”。否则setup()语法、defineProps等新特性会被当成错误。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

确保.eslintrc.cjs中parserOptions包含：
parser: '@babel/eslint-parser'
ecmaVersion: 2022
sourceType: 'module'
同时在plugins里加上'vue'，extends里包含'plugin:vue/vue3-essential'（Vue 3）或'plugin:vue/essential'（Vue 2）
如果用TypeScript，parser要换成@typescript-eslint/parser，且必须装@typescript-eslint/eslint-plugin

修复后引号/分号还是错？确认prettier和eslint-config-prettier已对齐

Prettier管格式，ESLint管逻辑+风格，但两者规则有重叠（比如semi、quotes）。如果没禁用ESLint的格式类规则，它们会互相打架。

.eslintrc.cjs的extends数组末尾必须加'eslint-config-prettier'（注意不是prettier）
顺序很重要：所有ESLint规则插件放前面，eslint-config-prettier放最后，确保它能覆盖掉冲突项
.prettierrc里明确写清风格偏好，例如：
"semi": false（不加分号）
"singleQuote": true（单引号）
"tabWidth": 2
运行npx eslint --fix手动试一次，看终端是否报错——如果报Definition for rule 'xxx' was not found，说明某条规则名拼错了或插件没装全

Cursor编辑器用户注意：别依赖“AI自动修复”按钮

Cursor的AI补全和ESLint自动修复是两套机制。AI可能建议一个看似合理但违反项目规则的改法（比如把ref改成reactive），而ESLint的--fix才是受配置约束的确定性修复。

关闭Cursor设置里的cursor.experimental.codeActionsOnSave（如果开着）
坚持用VSCode原生的editor.formatOnSave + eslint.validate组合
在Cursor中打开命令面板（Cmd+Shift+P），输入ESLint: Fix all auto-fixable Problems手动触发一次，验证配置是否真生效
如果<template></template>里的class绑定（如:class="{ active: isActive }"）仍报错，大概率是eslint-plugin-vue版本太低，升级到^9.25.0以上