vscode中需明确分工：prettier负责格式美化，eslint（含vue/no-v-html等规则）负责代码安全隐患扫描，snyk仅检测依赖漏洞；关键要禁用eslint格式功能（通过eslint-config-prettier）、启用eslint-plugin-vue支持.vue文件、避免vetur与volar冲突，并区分三者能力边界——snyk不分析源码逻辑，安全规则须由eslint捕获。
VSCode 里想同时做好代码美化和 Vue 安全隐患扫描，不能靠堆插件，得按角色分工：Prettier 负责“怎么写好看”，ESLint（含安全规则）负责“怎么写安全”，Snyk 只管“依赖有没有毒”——三者混用但边界必须清晰。
为什么 Prettier + ESLint 一起装却还格式错乱
常见现象是保存后引号变双又变单、缩进忽大忽小、eslint.autoFixOnSave 不生效。根本原因是没切断 ESLint 对格式的干预。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends数组末尾加载它，否则 ESLint 会覆盖 Prettier 规则 -
"prettier.eslintIntegration"在新版已移除，改用"eslint.format.enable": true+"editor.defaultFormatter": "esbenp.prettier-vscode" - 项目根目录若存在
.editorconfig，它会强制接管tabSize和insertSpaces，哪怕你在 VS Code 设置里调了也无效
Vue 单文件里 template/script/style 都要扫到
只装 ESLint 插件，默认只能检测 .js 文件，.vue 里的 <template></template> 和 <style></style> 是盲区。
- 必须加装
eslint-plugin-vue，并在.eslintrc.js中extends加上"plugin:vue/vue3-essential"（Vue 3）或"plugin:vue/essential"（Vue 2） - VS Code 插件需启用对
vue语言的支持："eslint.validate": ["javascript", "javascriptreact", "vue"] - 若用 Volar（Vue 3 推荐），确保关闭 Vetur，否则两者冲突导致
eslint-plugin-vue失效
Snyk 扫不出 eval() 或 v-html 风险？它本来就不该扫
装完 Snyk 插件，在 Vue 文件里写 v-html="userInput" 却没波浪线报错——这不是配置失败，是它压根不干这活。
- Snyk 只解析
package.json和node_modules，输出 CVE 报告，不分析源码逻辑 - 要捕获
eval、innerHTML、硬编码密钥等，得靠eslint-plugin-security或eslint-plugin-vue的vue/no-v-html规则 - 运行
npx eslint --ext .js,.vue src/才能看到这些隐患；Snyk 的 “Fix automatically” 按钮只改依赖版本，别指望它修你写的 XSS
自动修复不是万能的，尤其在 Vue 里
保存时自动修复常把 console.log 干掉，但可能顺手删掉你调试用的 debugger，或把 ref() 改成 reactive() 导致响应失效。
- 慎开全局
"eslint.autoFixOnSave": true，建议改为只对特定语言启用：{"language": "vue", "autoFix": true} -
eslint-plugin-vue的部分规则（如vue/multi-word-component-names）无法自动修复，得手动改 - Vue 3 的
setup语法中，defineProps类型推导错误时，ESLint 可能给出错误修复建议，实际需配合 TypeScript 配置修正
最易被忽略的一点：所有扫描类插件（ESLint/Snyk/SonarLint）都往同一个 PROBLEMS 面板写信息，但它们的严重等级不统一——Snyk 标“High”的漏洞，ESLint 可能标“Warning”，别只看颜色判断优先级，得点开详情看 Exploit Maturity 和实际调用链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
