VS Code 用久之后很容易变成另一种状态，扩展装了几十个，settings.json 从旧电脑复制到新电脑，保存时三个格式化器轮流抢活。编辑器确实更顺手了，可一旦换项目或换机器，很多配置已经说不清为什么存在。
我自己的整理原则是把个人偏好和项目约束分开。字体、主题、光标属于个人设置；格式化器、文件排除、语言覆盖更适合工作区设置。扩展只留下能解释用途的那一批，失效字段及时删除。这样配置才是工具，不是历史遗迹。
在本篇文章中，我们将从浅入深，和大家一起学习以下知识：
- 用户设置、工作区设置与语言设置的覆盖关系
- 一份前端开发可直接使用的基础配置
- 扩展怎样按能力分类，避免重复安装
- 保存格式化冲突应该如何排查
- Fira Code 字体与连字怎样启用
- 哪些配置适合提交到仓库
- 换电脑时如何使用 Settings Sync
# 一、先分清三层设置
VS Code 的用户设置对所有窗口生效，工作区设置只对当前项目生效，并且会覆盖用户设置。打开单文件夹项目时，工作区配置位于 .vscode/settings.json；多根工作区则写在 .code-workspace 文件中。
语言专属配置会继续覆盖通用配置。例如团队希望 JavaScript 用 Prettier，Markdown 不在保存时格式化，可以这样写：
{
"editor.formatOnSave": true,
"[javascript][typescript][typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.formatOnSave": false
}
}
字体大小、主题和侧边栏位置不要提交到项目，它们不影响产物。默认格式化器、文件关联和测试目录排除可以提交，因为这些配置能减少团队成员保存后的无意义 diff。
# 二、常用扩展先按用途去重
Auto Close Tag（自动关闭HTML标签）Auto Rename Tag(HTML标签自动改名)Babel ES6/ES7Beautify css/sass/scss/lessBrackets Light(主题)Complete JSDoc Tags(js文档注释提示)Git History(查看git提交记录)HTML CSS Support(HTML中提示可用的class)npm Intellisense(提示可以require的模块名称)One Dark Theme(主题)Path Intellisense(路径补全)Reactjs code snippets(reactjs代码提示)SassSCSS IntelliSense PreviewSCSS智能提醒，配置强大Sublime BabelVSCode Great Icons(文件图标)vscode-icons（文件图标）Beautify- HTML、CSS、JS、JSON语法高亮Guides- 代码对齐辅助线OneDark主题JavaScript (ES6) Code Snippets(代码片段插件)Project Manager(项目管理器插件) 简单的项目管理器,可以在你的编辑器中快速切换项目Sync Settings(设置同步插件)在电脑上移植你的插件和设置是轻而易举的事Git History(Git历史记录插件) 可视化的Git历史记录插件Document This(JSDoc注释插件)npm Intellisense(npm 模块导入插件)Align(代码对齐插件)amVim(vim插件)Faker可以生成随机的名称，地址，图像，电话号码Color Info颜色信息及转换SVG Viewer SVG预览TODO HighlightTODO 高亮Minify代码压缩Regex Previewer正则表达式预览File Tree View提供几个常见编程语言的函数或状态的树集合展示,可以快速点击跳转!JavaScript Test Runner Preview快速执行单元测试,支持Mocha和JestNPM-Scripts在侧边栏可视化执行npm命令(项目内的package.json)colorize会给颜色代码增加一个当前匹配代码颜色的背景vscode-fake------生成各种假数据类型。（姓名，电话）vscode-CSS Peek------class类定义跳转vscode-Git Lens-----增强vscode的git管理工具vscode-Live Server-----http服务器（相当于使用nodejs的http-server）EditorConfig for VS Code EditorConfig插件Emoji在代码中输入emojiFile Peek根据路径字符串，快速定位到文件Font-awesome codes for html FontAwesome提示代码段Guides高亮缩进基准线JavaScript (ES6) code snippets ES6语法代码段language-stylus Stylus语法高亮和提示Lodash Lodash代码段Prettify JSON格式化JSONTest Spec Generator测试用例生成（支持chai、should、jasmine）vetur目前比较好的Vue语法高亮cssremcss值转rem插件polacode代码截图工具
这份清单来自早期使用记录，其中不少能力已经被 VS Code 内置，或者被语言官方扩展替代。现在挑扩展时我会先问三个问题，它有没有与内置能力重复、项目是否真的使用对应语言、维护状态是否正常。
同类扩展只留一个。图标主题装一个就够，代码片段不要同时装三套，格式化也应为每种语言指定唯一的 editor.defaultFormatter。扩展越多，启动、索引和冲突排查的成本越高。
更稳的分组方式如下：
- 语言能力：项目实际使用的 Vue、Python、Rust 等官方或主流语言扩展
- 代码质量：ESLint、Stylelint、Prettier
- Git：内置 Source Control 不够时再加 GitLens
- 运行调试：项目需要的测试适配器、容器或远程开发扩展
- 体验增强：主题、图标、路径补全，严格控制数量
# 三、一份可维护的基础配置
{
"workbench.activityBar.visible": true,
"workbench.iconTheme": "vscode-icons",
"window.menuBarVisibility": "default",
"editor.minimap.enabled": true,
"cssrem.rootFontSize": 75,
"workbench.colorTheme": "Atom One Dark",
"editor.fontSize": 16,
"liveServer.settings.donotShowInfoMsg": true,
"editor.cursorStyle": "block",
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.lineHeight": 24,
"editor.lineNumbers": "on",
"editor.rulers": [
120
],
"auto-close-tag.SublimeText3Mode": true,
"vsicons.dontShowNewVersionMessage": true,
"[javascript]": {
},
"window.zoomLevel": 0,
"javascript.implicitProjectConfig.experimentalDecorators": true,
"Scss2Css.compileAfterSave": true,
"fileheader.Author": "poetryxie",
"fileheader.LastModifiedBy": "poetryxie",
"todohighlight.isEnable": false,
"workbench.startupEditor": "newUntitledFile",
"explorer.confirmDragAndDrop": false,
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressUpdateNotice": false,
"suppressWelcomeNotice": true
}
}
旧配置里有些字段来自已卸载扩展，有些字段已经改名。直接复制整份配置很容易出现「Unknown Configuration Setting」。更建议从下面这份基础配置开始，再按当前项目加字段：
{
"editor.fontSize": 16,
"editor.lineHeight": 24,
"editor.fontFamily": "Fira Code, Menlo, Monaco, monospace",
"editor.fontLigatures": true,
"editor.minimap.enabled": true,
"editor.rulers": [100],
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
"[markdown]": {
"files.trimTrailingWhitespace": false
},
"[javascript][typescript][javascriptreact][typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
source.fixAll.eslint 使用 explicit 后，显式保存会执行 ESLint 修复，Auto Save 不会频繁改写文件。Markdown 关闭行尾空格清理，是为了保留可能用于硬换行的两个空格。
这里有个坑要注意。工作区已经配置 .editorconfig 或 Prettier 时，VS Code 自身的 tabSize、引号和换行配置可能被覆盖。看到保存结果不符合 settings.json，不要马上重装扩展，先检查仓库里的格式化配置。
