VS Code 1.85+ 支持多数扩展热加载,安装后启用或保存设置即生效;需重启的仅限语言包、图标主题等极少数情况;ESLint 与 Prettier 需配合 eslint-config-prettier 避免冲突;CSS 类名补全依赖文件类型识别和配置;GitLens 依赖 Git 提交历史,首次使用须确保已有 commit。

装完就生效,不用重启的“呼吸级”扩展
VS Code 从 1.85 版本起已支持绝大多数扩展热加载,但很多人仍习惯重装后傻等重启——其实多数扩展装完点一下“启用”或保存设置就立刻干活。比如 Auto Close Tag 和 Auto Rename Tag,安装后在任意 .html 文件里敲 <div>,马上补全 </div>;改 <section> 为 <article>,闭合标签同步变,完全无需操作。
- 真正需要重启的只有极少数:比如
Chinese (Simplified) Language Pack改界面语言,或更换Icons Theme后图标未刷新(此时按Ctrl+Shift+P→ 输入Developer: Reload Window即可) -
Prettier装完必须手动开"editor.formatOnSave": true,否则它安静得像没装过 -
Error Lens默认只显示错误,但警告(warning)和提示(info)默认不透出——想一并看到,得进设置搜errorLens.showWarning和errorLens.showInfo并勾选
ESLint + Prettier 不是“装了就行”,而是“配错就打架”
这两个扩展放一起用,90% 的人会在保存时发现代码被反复格式化、缩进乱跳、分号一会儿有一会儿没——这不是插件 bug,是它们底层逻辑冲突:ESLint 检查规则,Prettier 只管格式,谁也不让谁。
- 正确解法不是禁用其中一个,而是用
eslint-config-prettier关掉 ESLint 里所有和格式相关的规则(比如indent、quotes、comma-dangle) - 项目根目录运行
npx eslint --init时选“Use a popular style guide”,再选“Prettier”,它会自动装依赖并生成兼容配置 - 若已有
.eslintrc.js,记得在extends数组末尾加上'prettier',顺序不能颠倒——否则前面的规则会覆盖后面的关闭指令
类名补全不是“搜 CSS 就行”,而是得看文件是否被识别
IntelliSense for CSS class names in HTML 在写 class="……" 时能弹出项目里所有 CSS 类,但常有人反馈“明明有 styles.css 却不补全”——问题往往不在插件,而在 VS Code 没把它当样式源文件读。
- 它默认只扫描
.css、.scss、.sass、.less和tailwind.config.js,如果你用的是.pcss(PostCSS)或.module.css,得手动加进设置:css.fileExtensions和scss.fileExtensions - Tailwind 用户注意:
tailwind.config.js必须导出有效配置对象(哪怕空module.exports = {}),否则插件认为 Tailwind 未启用,不加载其类名 - 补全延迟?不是插件慢,是首次扫描需遍历整个工作区——关掉无关文件夹(右键 →
Remove Folder from Workspace),速度立竿见影
GitLens 不是“装了就能看历史”,得防住“看不见的提交”
GitLens 能在每行代码右边显示谁、什么时候、为什么改这行,但新克隆的仓库或刚初始化的项目,常出现“无提交记录”提示——不是插件失效,是 Git 本身还没建立上下文。
- 首次打开项目前,确保已执行过至少一次
git add . && git commit -m "init",否则 GitLens 找不到任何 commit 可关联 - 多人协作时,如果同事用
--amend或rebase改了历史,你的本地分支没git pull --rebase,GitLens 显示的作者和时间就会“卡在旧版本” - 想快速定位某行改动来源?把光标停在那行,按
Alt+Click(Windows/Linux)或Option+Click(macOS),直接跳转到对应 commit diff 页面
重装系统后最易忽略的,其实是工作区级别的设置:比如某个项目里你关掉了 editor.formatOnSave,但全局开着,结果一保存就格式化崩了。这类细节不会随扩展一起恢复,得手动检查 .vscode/settings.json 是否还在。