ESLint 与 Prettier 需协同分工：ESLint 负责代码质量检查与逻辑错误识别，Prettier 专司格式统一；必须通过 eslint-config-prettier 消除规则冲突，并在 VSCode 中设 Prettier 为默认格式化工具、禁用 ESLint 的自动格式化，方可避免保存时代码“抖动”。
ESLint 要开，但不能只靠它自动修复
Prettier 要设为默认格式化工具，否则和 ESLint 规则打架
JavaScript (ES6) code snippets 装上就生效，clg + Tab 立刻生成 console.log()，不用再手敲
插件不是越多越好，JS 开发真正卡脖子的环节就那几个：写错语法没人提醒、格式一改就和队友冲突、路径拼错导致模块加载失败、嵌套太深看不清括号配对。下面这几个插件，每个都对应一个具体痛点，装了就能立刻少踩坑。
为什么 ESLint 配置比安装更重要
装完 ESLint 插件却没反应？大概率是项目里缺 .eslintrc.js 或 package.json 里没声明 eslintConfig。VSCode 不会自己猜你用哪套规则。
- 必须在项目根目录放配置文件，哪怕只是最简版：
module.exports = {<br> extends: ['eslint:recommended'],<br> rules: { 'no-console': 'warn' }<br>}; -
eslint-config-prettier必须装，否则Prettier和ESLint的格式规则会互相覆盖，保存时代码反复“抖动” - VSCode 设置里要开
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }，不然只报错不修 - React/Vue 项目记得额外装
eslint-plugin-react或eslint-plugin-vue，否则 JSX/模板语法不检查
Prettier 和 ESLint 共存的硬性条件
两者不是二选一，而是分工：Prettier 只管“怎么排版”，ESLint 只管“有没有 bug 和风格问题”。但默认情况下它们会抢着格式化同一行代码。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 必须在 VSCode 设置里指定
"editor.defaultFormatter": "esbenp.prettier-vscode" - 必须关掉
editor.formatOnSave对 ESLint 的调用，只留 Prettier 格式化 -
.prettierrc里别写和 ESLint 冲突的规则，比如semi: false就得同步关掉 ESLint 的semi规则 - 如果用
eslint --fix命令行修复，确保eslint-config-prettier已加入extends数组，否则命令行和编辑器行为不一致
路径补全为什么总失效
Path Intellisense 在深度嵌套的 monorepo 或 TypeScript 项目里容易失灵，不是插件坏了，而是它默认只认 ./ 开头的相对路径。
- 导入时必须从
import后开始输，比如import utils from './，按./才触发补全 - 如果项目用了
baseUrl（如 tsconfig.json 里），需手动在settings.json加："path-intellisense.mappings": {<br> "@": "${workspaceFolder}/src"<br>} - 遇到
Cannot find module报错，先检查路径补全出来的路径是否真实存在，有时它会推荐已删除的旧文件 - Vue/React 项目中，
@/components/xxx.vue这类别名路径，Path Intellisense默认不识别，得配合Vetur或ESLint的路径解析插件
括号和标签重命名看似小功能，实则防低级错误
Bracket Pair Colorizer 在 VSCode 1.60+ 已被内置，叫 editor.guides.bracketPairs，开开关就行；Auto Rename Tag 则专治 HTML/JSX 标签漏改。
- JSX 中重命名
<div> 为 <code><section></section>，闭合标签自动同步，但key、ref等属性不会动——这是设计如此，不是 bug - 嵌套三层以上的箭头函数或对象字面量，光靠肉眼很难确认
)和}是否配对，此时必须开editor.guides.bracketPairs: true，颜色比括号形状更可靠 -
Auto Rename Tag对自定义元素（如<my-button></my-button>）支持有限，遇到不生效时，优先检查是否在 .vue 或 .tsx 文件中，这些文件类型需要额外语言服务支持
真正影响开发节奏的，从来不是功能多寡，而是某个插件在关键时刻掉链子——比如保存时格式错乱、路径补全指向不存在的文件、括号高亮突然失效。这些插件的配置项不多，但每一项都得对齐项目实际结构，而不是照抄网上的通用教程。
