vscode插件本身不自动标准化开发流程，真正起作用的是「插件 + 显式配置 + 团队约束」三者组合：必须在项目根目录放置.eslintrc.js等配置文件、禁用eslint重复格式规则、设prettier为默认格式化器、将.vscode/settings.json纳入git、并在ci中运行eslint校验，否则仅装插件反而放大风格差异。

VSCode插件本身不自动标准化开发流程，真正起作用的是「插件 + 显式配置 + 团队约束」三者组合。单装插件却放任默认设置，反而会放大风格差异。

ESLint 配置必须写进项目，不能只靠插件启用

很多人装了 dbaeumer.vscode-eslint 就以为万事大吉，结果同事保存代码后格式乱七八糟——因为 ESLint 插件默认只读取全局配置，而项目级规则（比如禁用 console、要求函数参数命名）必须显式声明。

• 必须在项目根目录放 .eslintrc.js 或 .eslintrc.cjs，内容至少包含 extends 和基础 rules
• 若用 Vue3，extends 至少含 plugin:vue/vue3-recommended；React 项目则需 plugin:react/recommended
• 避免直接继承 airbnb 等重型规则集，容易因依赖版本冲突报错；推荐从 eslint:recommended 起步，逐步加规则
• CI 流程中要运行 npx eslint . --ext .js,.jsx,.ts,.tsx，否则编辑器里再准也没用

Prettier 和 ESLint 的冲突不是 Bug，是配置遗漏

常见现象：保存后引号自动变双引号，但 ESLint 又标红说“应使用单引号”——这不是插件打架，而是没关掉 ESLint 里重复的格式规则。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

• 必须安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 数组末尾加上 'prettier'
• prettier 插件（esbenp.prettier-vscode）的 editor.formatOnSave 要设为 true，但前提是它被设为 editor.defaultFormatter
• 不要在 .prettierrc 里配 semi: true 同时又在 ESLint 里开 semi: ["error", "always"]，二者选一即可
• Vue 单文件组件中，<style></style> 块默认不受 Prettier 管控，需额外配 prettier-plugin-css-order 或改用 stylelint

Live Server 的端口和路径必须显式声明，否则协作时失效

本地点一下就能跑，但别人 clone 项目后打不开，大概率是 Live Server 没读到你机器上临时写的端口或 index.html 路径。

• 在项目级 .vscode/settings.json 中写死配置，而非用户级设置："liveServer.settings.port": 5500、"liveServer.settings.root": "./src"
• 如果项目用 Vite 或 Webpack，Live Server 本质不兼容热更新逻辑，此时应禁用它，改用框架原生命令（如 vite preview）
• 多页面项目（如含 /admin/index.html）需配 liveServer.settings.CustomBrowser，否则默认只打开根目录 index.html

Vue/Volar 和 React/TypeScript 插件的启用时机影响类型提示准确度

装了 Vue.volar 却在 .vue 文件里看不到 props 提示？可能是因为 VSCode 同时启用了旧版 Vue.vscode-vue 或未关闭 TS 自带的语言服务。

• Volar 要求关闭 typescript.preferences.includePackageJsonAutoImports，否则 import 补全会错乱
• Vue3 + TS 项目中，必须删掉 jsconfig.json，只留 tsconfig.json，否则 Volar 无法正确推导组件类型
• React 项目若用 ms-vscode.vscode-react，它仅提供基础语法支持；要完整类型提示，得靠 typescript-language-features + 正确的 tsconfig.json compilerOptions.jsx 设置
• 所有框架插件都依赖 node_modules 存在且已安装，首次打开项目后务必等右下角 TypeScript 服务加载完成再写代码

标准化最难的部分不在插件列表，而在把配置固化进项目目录、纳入 Git 跟踪、并让 CI 拒绝未通过检查的提交——插件只是执行者，不是决策者。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！