Prettier是排版代码结构的首选，因其基于AST重写代码并遵循确定性规则，确保跨环境格式化结果完全一致；它专注视觉归一，与负责语义检查的ESLint定位不同、不可替代。
为什么 Prettier 是排版代码结构的首选
它不只改缩进和换行，而是用一套确定性规则重写 AST，保证同一份代码在不同人机器上格式化结果完全一致。ESLint 做的是语义检查，Prettier 做的是视觉归一——两者定位不同，不能互相替代。
-
prettier.printWidth设为120而不是默认80，能显著减少 JSX 属性换行带来的嵌套混乱 -
prettier.singleQuote开启后，props里带单引号的字符串（如className='btn btn-primary'）不会被误转成双引号再触发二次格式化 - 禁用
prettier.semi（设为false）可避免与 TypeScript 的自动分号插入逻辑冲突，尤其在return { }箭头函数场景下
vscode-icons 怎么让文件结构一眼可读
它不是美化装饰，而是把文件类型信息直接编码进图标，省去你用眼睛扫描后缀名的时间。比如 Button.vue 和 button.tsx 在同一目录下，图标差异比文件名颜色更先被视觉捕获。
- 安装后无需重启，但需手动在设置中启用：搜索
Icons Theme→ 选择VSCode Icons - 若项目含大量
.env、.gitignore等配置文件，可配合vscode-icons-mac（仅 macOS）获得更精细的图标区分 - 注意：它不修改任何文件内容，也不影响构建流程，纯前端 UI 层增强
Bracket Pair Colorizer 2 防止括号错位的实操要点
它解决的不是“找不到括号”，而是“找得慢+看错层级”。尤其在 Vue 的 <template> 或 React 的 useMemo(() => { ... }) 里，光标停在某括号上时，必须立刻知道它包裹的是哪一段逻辑。
- 关键配置项是
editor.bracketPairColorization.enabled，VS Code 1.60+ 已内置该功能，插件仅作兼容补充 - 若发现高亮失效，先检查是否启用了
editor.guides.bracketPairs—— 两者共存时可能互相干扰 - 对深度嵌套的 CSS-in-JS 字符串（如
css`& .item { color: ${theme.color}; }`），插件默认不解析，需手动添加语言模式白名单
Path Intellisense 补全路径时容易忽略的细节
它补全的不是字符串，而是真实存在的文件系统路径。一旦项目结构变更或 tsconfig.json 中 baseUrl 设置错误，补全就会失效甚至给出错误路径。
- 遇到补全不生效，先确认当前文件是否在工作区根目录下打开（即 VS Code 左下角显示
Folder: xxx，而非File: xxx） - TypeScript 项目中，若使用了
paths别名（如@/components），需额外安装Auto Import插件并配置autoImport.showImportSuggestions - 补全结果里带
../的路径，往往意味着当前文件未放在标准 src 目录下，建议优先调整项目结构而非依赖插件硬补
Prettier 和 Path Intellisense 是最常被误配的两个：前者因规则冲突导致保存后代码反复跳变，后者因路径别名未同步而补全出错。它们不难装，难的是让配置和项目真实结构对齐。 
