最近给新电脑搭开发环境又把 VSCode 的配置从零过了一遍。说实话每次重新配编辑器都是一次小型复盘哪些配置是刚需哪些是一时兴起装完再没碰过的这次倒是梳理得比之前清楚多了。所以干脆把这套配置记录整理成文既是给自己留个存档也顺手给需要重新搭环境的开发者一份参考。这篇文章主要围绕个人 VSCode 配置记录展开适合刚接触 VSCode 不久、想系统优化编辑器体验的新人也适合用了一阵子但设置还是默认状态、想动手整理的老朋友。全文会聊到settings.json里值得逐项研究的核心选项、远程开发与配置同步、插件选型、快捷键定制以及我踩过的几个配置坑。配置这东西不是越花哨越好能稳定服务你的工作流才是正经事。1. 配置前先想清楚三个作用域与两条设计原则很多人的配置过程是打开设置面板乱勾一通或者直接在网上抄一份大而全的 JSON 粘贴进去结果插件一堆、设置一堆实际用起来反而卡手。我自己的做法是先搞明白 VSCode 配置的几个层级再决定哪些设置放哪里。1.1 三种作用域与优先级VSCode 的配置大体分成三层默认设置编辑器出厂自带只读。用户设置属于当前登录用户对所有项目生效放在系统用户目录下。工作区设置存在项目的.vscode/settings.json里只对该项目生效。文件夹设置在多根工作区Multi-root Workspace里针对单个文件夹生效。生效优先级大概是默认设置 用户设置 文件夹设置 工作区设置。也就是说工作区里的配置会覆盖用户配置。这个顺序极其重要因为它直接解释了“为什么我在全局改了字体打开某个项目却不是那个字体”这类问题。远程开发场景下还会多出一个“远程设置”层它本质上是远程机器上的一份独立用户配置本地用户配置不会自动应用到远程会话。这个问题我放到第三节详细说。1.2 我的两条配置设计原则第一条原则是可迁移性。所有配置都以 JSON 文件方式维护而不是依赖设置面板的点击操作。JSON 文件方便导出、备份、跨设备同步也方便用 Git 追踪变更想回退随时可以回退。我始终建议用命令面板CtrlShiftP / CmdShiftP输入“Open User Settings (JSON)”直接编辑 JSON比点界面按钮高效得多。第二条原则是理解后再写入。每一行配置我都要求自己知道它有什么用缺少了会有什么后果。盲目抄配置的坏处是等到某个配置项与插件冲突时根本无从排查。配置语法错误时编辑器右下角会弹警告但很多人的第一反应是删掉整个文件重来而不是先去理解报错内容。有了这两条原则打底后面所有配置项的选择和调整就都有了判断标准。2. settings.json 核心选项逐项拆解下面这段配置是我当前使用的用户设置核心部分。先整体展示再逐个分类说明避免“看完整段配置还是一头雾水”的情况。{ editor.fontFamily: JetBrains Mono, Cascadia Code, Consolas, 微软雅黑, sans-serif, editor.fontSize: 14, editor.lineHeight: 1.8, editor.fontLigatures: true, editor.tabSize: 2, editor.insertSpaces: true, editor.detectIndentation: false, editor.wordWrap: off, editor.cursorSurroundingLines: 5, editor.cursorSmoothCaretAnimation: on, editor.smoothScrolling: true, editor.minimap.enabled: false, editor.stickyScroll.enabled: true, editor.bracketPairColorization.enabled: true, editor.guides.bracketPairs: active, editor.formatOnSave: true, editor.formatOnPaste: true, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, files.autoSave: afterDelay, files.autoSaveDelay: 1000, files.exclude: { **/.git: true, **/node_modules: true, **/dist: true, **/.DS_Store: true }, search.exclude: { **/node_modules: true, **/dist: true, **/coverage: true }, workbench.colorTheme: One Dark Pro, workbench.iconTheme: material-icon-theme, workbench.startupEditor: none, workbench.editor.enablePreview: true, window.zoomLevel: 0, git.enableSmartCommit: true, git.confirmSync: false, git.autofetch: true }2.1 编辑体验相关字体、光标与括号染色字体是编辑器里存在感最强的一项。代码字体和普通阅读字体不一样等宽是底线同时还要考虑字符对比度、标点清晰度和中文显示兼容性。我这边选了JetBrains Mono作为首选字体它在中英文混排场景下表现不错但需要注意一点中文字体必须单独指定fallback链否则代码里的中文注释会落到默认字体上观感很突兀。这就是配置里同时写了“微软雅黑”的原因在Windows上如此macOS/Linux 同理。fontLigatures 也就是连字把!、-、这类符号组合渲染成更紧凑的视觉形态。喜欢的人觉得代码更干净不喜欢的人觉得是干扰这个纯看偏好。我开了之后用了两天适应之后就回不去了。光标体验方面cursorSmoothCaretAnimation 控制光标移动的平滑度smoothScrolling 控制滚动流畅度都属于“润物细无声”的调整实际手感提升是能感知到的。cursorSurroundingLines 设成 5 是为了在按行滚动时光标不会死死贴着屏幕边缘视野更开阔。括号配对染色和缩进引导线属于我强烈建议开启的功能。bracketPairColorization 把嵌套括号按颜色分层bracketPairs 的“active”模式会只高亮当前光标所在的那一层括号引导线不至于满屏全是线看得眼花。长期看代码时这两项对理解嵌套结构很有帮助尤其是写 JavaScript、TypeScript 这类括号密度高的语言。2.2 保存、格式化与 Git 行为编辑器可以让开发省去大量重复劳动前提是配置好 trigger。formatOnSave 就像写文档时的自动排版文件一保存就调用格式化工具把代码整理一遍。这里有个容易踩的坑如果没设置默认格式化器VSCode 弹出来问“哪种格式化器”选了内置格式化器却和项目里的 ESLint/Prettier 规则打架反而越格式化越乱。我后面在第四节单独展开。codeActionsOnSave 里的 fixAll.eslint 配置用来在保存时自动执行 ESLint 的修复命令修正能自动修的代码问题比如未使用的变量、可简写的语法结构这一项对保证代码质量帮助极大。注意我写的值是explicit意思是只有显式触发的保存动作才执行。VSCode 新版本对这里的状态管理有调整使用explicit可以避免编辑器中意料之外的自动改动。Git 相关的配置也值得说。enableSmartCommit 开启后当暂存区没有文件时执行“提交”会自动暂存所有修改省掉每次先点暂存的步骤。confirmSync 关掉后推送/同步时不再反复弹确认框。autofetch 会自动拉取远端更新团队协作时降低频繁手动拉取的负担。这些配置都偏向“流程顺手”对单独开发者尤其友好。2.3 工作台、主题与文件视图workbench.colorTheme 和 workbench.iconTheme 纯属审美选择但这个选择并非无关紧要。主题选择会影响长时间注视屏幕的疲劳感深色主题建议选择背景纯度低、语法高亮对比明确的而不是单纯“越黑越好”。iconTheme 则影响文件资源的快速辨识度在密密麻麻的资源管理器里图标变化得足够直观找文件确实更快。startupEditor 设成 none 让每次打开 VSCode 直接进入上次的工作区而不是停留在欢迎页。enablePreview 保持预览模式开启单击文件只以预览方式打开标题不带星号再点别的文件会自动替换预览标签对快速浏览文件非常友好。minimap 也就是右侧的代码缩略图这个功能争议不小。我把它关闭了因为代码长度中等时缩略图能提供的定位信息有限反而挤压编辑器可视区域。stickyScroll 保持开启滚动代码时当前作用域的结构声明会固定在顶部参考上下文很方便。files.exclude 和 search.exclude 是两套看似重叠但分工不同的排除规则。files.exclude 控制的是资源管理器里隐藏哪些文件node_modules、dist这类目录藏起来文件树瞬间清爽不少。search.exclude 控制的是全局搜索范围把同样的大目录排除掉搜索结果更精准搜索性能也更好。很多人只配了 files.exclude忘了 search.exclude结果文件树干净了一搜还是满屏 node_modules。下面这张表把上面这些设置里最值得关注的参数整理出来了方便快速对照设置项我的值影响与理由editor.fontFamilyJetBrains Mono 中文字体 fallback等宽 中文兼容避免注释字体怪异editor.formatOnSavetrue保存即格式化统一团队代码风格editor.codeActionsOnSavefixAll.eslint保存时自动修复 ESLint 可持续问题editor.bracketPairColorizationtrue括号嵌套按色分层editor.minimap.enabledfalse减小视觉干扰回归代码本身files.autoSaveafterDelay, 1000ms短文档防丢失长编辑也不频繁弹保存search.excludenode_modules/dist/coverage提升搜索精度与速度workbench.startupEditornone跳过欢迎页直达上次工作区3. 远程开发与配置同步配置分层的真实威力在远程开发场景里体现得最明显。我现在不少项目跑在远程 Linux 服务器或者容器环境里本地 VSCode 只承担界面职责代码、编译、运行全在远端。这套模式的关键是 Remote 系列插件提供的“本地界面 远端引擎”方案。3.1 Remote-SSH 场景下配置了哪些东西使用 Remote-SSH 连接远端后VSCode 会在远端机器上安装一套服务端同时创建一个远端用户设置层。这意味着本地用户设置不会自动带到远端颜色主题、键位绑定倒是会同步但很多 editor 前缀的设置在远端会话里是另一份独立状态。我实际用的几个远程相关配置项{ remote.SSH.showLoginTerminal: true, remote.SSH.remotePlatform: { my-dev-server: linux }, remote.SSH.useLocalServer: true }showLoginTerminal 设为 true连接时能看到 SSH 登录过程避免卡在认证环节时毫无反馈。remotePlatform 手动指定服务器系统类型加快连接初始化的判断。useLocalServer 让每个窗口复用同一个本地 SSH 进程多窗口连接同一台服务器时明显更快。还有个常被忽略的技巧在.vscode/settings.json里写上remote.SSH.path指向远端特定路径的 ssh 可执行文件适用于服务器环境比较特殊的场景。一般情况下默认即可但如果远端机器的登录方式需要特定密钥文件可以配合~/.ssh/config来配置而不是一堆参数堆在 VSCode 里。3.2 多设备配置同步方案配置同步这件事体验最好的其实是登录 VSCode 账号开启“设置同步”功能它会同步用户设置、键盘快捷键、扩展列表和 UI 状态。换新电脑后登录同一账号核心配置基本能恢复。这个方案我实际用了很久稳定性很好但有几个注意事项同步列表默认包含扩展的“已安装状态”而不是扩展的配置内容扩展自身的数据比如某些插件本地存储的私有数据不会跨设备迁移。团队多人共用一个账号是个灾难个人配置全被一起同步必须避免。如果同时用了 Settings Sync 类扩展又开了官方同步两边会冲突选一个就好我的建议是优先官方方案。更稳妥的做法是把用户设置 JSON 纳入自己的配置仓库用 Git 管理团队协作时也在项目仓库里维护一份.vscode/extensions.json用于自动推荐项目需要的扩展。这样既不依赖账号体系也不怕配置泄漏。4. 插件体系与格式化选型插件是 VSCode 生态的灵魂但贪多嚼不烂。我见过有人装了四五个主题、七八个格式化插件还装了一堆互相对标的功能扩展最后不是功能重复就是彼此冲突。插件选型最重要的是克制与组合。4.1 我的必装插件清单下面是我目前实际保留并高频使用的插件插件用途选型原因Remote - SSH远程开发本地编辑远端代码日常主力方案Prettier代码格式化覆盖主流前端语言默认风格接受度高ESLint代码检查及时暴露代码问题配合 codeActionsOnSaveCode Spell Checker拼写检查变量名、注释拼写错误提前发现Error Lens错误提示增强把诊断信息直接显示在代码行尾Material Icon Theme文件图标快速识别文件类型One Dark Pro主题习惯的配色长时间看不易疲劳不是功能越多越好这里面其实还藏着一个取舍逻辑Code Spell Checker 和 Error Lens 属于“增强反馈”型插件让问题更早暴露、更直观可见格式化不用多一套 Prettier 足够覆盖大部分项目ESLint 负责检查 JavaScript/TypeScript 生态内更复杂的规则Prettier 只负责“长什么样”两者各司其职。对插件数量我的建议是控制在“每类功能只留一个”的原则下宁可少装也不要堆着不用的插件。扩展装多了不只是名单长的问题每个扩展都会在启动时加载直接影响编辑器打开速度。遇到启动明显变慢先看看“正在运行的扩展”面板把不需要的逐个禁用验证。4.2 Prettier 与 ESLint 的配合方式这两个工具的分工经常被说混。Prettier 管格式也就是加不加分号、缩进几个空格、换行怎么折ESLint 管质量比如用了未定义变量、函数缺少 return 类型、代码路径有问题。两者重叠在“风格类规则”上但主流做法是在 ESLint 里禁用掉格式化类规则全部交给 Prettier。要让保存格式化真正听你的话核心是配置editor.defaultFormatter{ [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [json]: { editor.defaultFormatter: esbenp.prettier-vscode }, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode } }这样设置之后保存每个文件时 VSCode 会调用 Prettier 格式化ESLint 则通过之前配置的 codeActionsOnSave 做代码修复。两者互不干扰先格式化改了排版再跑代码修复改逻辑问题。实际操作中有个特别常见的坑某个项目配置了 ESLint 规则要求字符串必须用单引号而 Prettier 默认输出双引号于是保存后 Prettier 刚改完双引号ESLint 就把文件标记为错误。解决办法是在项目根目录的.prettierrc里显式写明单引号规则让 Prettier 和项目规范保持一致而不是在 VSCode 里强行跳过格式化。5. 快捷键、代码片段与效率工作流配置设置只是地基真正让编辑效率提升的是快捷键和片段。开发者一天在编辑器里的操作非常多每次鼠标点一下菜单看着只是一瞬间累积起来时间成本很可观。5.1 keybindings.json 里的自定义快捷键VSCode 默认快捷键已经覆盖了常用操作但自定义几个高频操作用起来更跟手。我的 keybindings.json 里有这样几条[ { key: ctrlaltdown, command: editor.action.insertCursorAtBottom, when: editorTextFocus }, { key: ctrlshiftaltdown, command: editor.action.addSelectionToNextFindMatch, when: editorTextFocus }, { key: ctrlalto, command: workbench.action.terminal.toggleTerminal, when: !terminalFocus }, { key: ctrlalto, command: workbench.action.closePanel, when: terminalFocus }, { key: altup, command: editor.action.moveLinesUpAction, when: editorTextFocus }, { key: altdown, command: editor.action.moveLinesDownAction, when: editorTextFocus } ]这里最值得说的是多光标能力。insertCursorAtBottom 一键在每行行尾都插入一个光标配合addSelectionToNextFindMatch在下一处选中内容处追加光标做“批量内容追加”“一次性修改多处同名变量”时效率极高。比如一个文件里有十几个相同的字符串需要统一改掉直接全选所有出现处一次输入回车就完成全局替换。另一个高频操作是手不离键盘开关终端。很多人的习惯是用鼠标点面板按钮这倒不至于说影响多少效率但用快捷键开关终端后编辑器和终端切换的间隔会显著缩短。上面配置里同一个快捷键做了两件事一个是终端未聚焦时打开它另一个是终端聚焦时关闭面板一来一回动作非常自然。5.2 用户代码片段写代码的“填空模板”代码片段是另一个被低估的效率利器。在命令面板输入“配置用户代码片段”可以创建自己的 snippet 文件语法是 VSCode 自己的模板格式。比如我日常写代码经常需要一段带固定注释头的新增模块就可以做一个 snippet{ New Module: { prefix: mod, body: [ /**, * 模块说明$1, * 创建时间$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE, * 作者$2, */, $0 ], description: 生成带注释头的模块模板 } }输入mod按下回车这段注释模板自动展开光标落在第一个占位处填完内容按 Tab 跳到下一个整个过程不用切换上下文。片段的价值在于把频繁出现的结构固定下来既保证格式统一也减少敲重复代码的无聊感。代码片段文件还能在用户级别配置意味着所有项目都能用。团队合作时也可以把公共片段提交到项目仓库保证大家的代码注释头、接口写法都是同一套风格。6. 常见问题与排查技巧实录配置踩坑几乎是必然的。这里整理几个我实际遇到过、并且在网上问得比较多的问题按现象、原因、解决办法整理成表格后面再逐个展开。现象可能原因解决办法改了设置没生效工作区配置覆盖用户配置检查 .vscode/settings.json 里的同名项JSON 文件顶部报红、配置全部恢复默认JSON 语法错误回滚改动重新逐行检查保存后格式不是自己想要的没有正确指定 defaultFormatter按文件语言设置格式化插件连接远程后设置跟本地不一样远程有独立用户设置层在远程会话里单独修改远程设置扩展装多了启动变慢扩展启动时全量加载按需禁用或卸载低频扩展搜索里出现大量依赖包文件只配了 files.exclude 忘了 search.exclude补充 search.exclude 配置6.1 配置没生效先查作用域我刚开始配 VSCode 时遇到过一个很迷的问题改了全局 tabSize 为 2打开某个项目却自动变成 4。原因就是该项目的.vscode/settings.json里定义了editor.tabSize: 4工作区设置优先级更高。排查这类问题的正确思路是打开命令面板输入“打开工作区设置(JSON)”看到当前项目的实际生效配置如果确认是工作区覆盖要么改工作区设置要么把全局的配置同步过去。切忌反复在设置面板里切开关试效率太低。还有一个注意点修改 settings.json 后大多数配置能热更新但有些涉及窗口外观、语言的设置需要重载窗口执行“重新加载窗口”命令才能生效。如果改了主题或者字体没反应先重载一次再判断是不是配置问题。6.2 格式化失灵、同步冲突与启动变慢的排查格式化失灵是出现频率最高的问题之一。现象是保存了代码没有自动格式化或者格式化出来的风格和项目规则差很远。排查顺序我很固定第一步确认是否装了对应语言的格式化插件比如写 Vue 需要 Volar 相关扩展配合只用 Prettier 不一定完整识别模板语法第二步确认文件语言模式是否正确如果.vue文件被识别成纯 HTML格式化结果自然不会对第三步检查 editor.defaultFormatter 是否生效是否有其他格式化插件抢占了默认位置。同步冲突通常发生在使用官方设置同步功能时。多台设备之间频繁修改配置偶尔会出现一个设备上配置被覆盖却又无法追溯的情况。我的做法是尽量让“配置变更”发生在单一主力设备上其他设备以拉取为主。真要精细管理长期维护一个配置仓库才是根本方案。启动变慢的问题可以通过“开发人员显示正在运行的扩展”命令查看所有已加载扩展及其耗时。一般最大的开销来自体积庞大的语言服务器类扩展这类扩展建议只保留和日常工作强相关的不需要用的可以禁用而不是卸载团队协作时需要还能快速启用。实际测试下来扩展控制在 20 个以内、启动耗时会恢复到比较舒服的区间。如果某个扩展拖慢了启动但暂时不想卸可以在设置里把对应扩展的激活事件改成手动触发也可以考虑降低它在工作区的自动启用配置。结语配置 VSCode 是一个持续迭代的过程不是一劳永逸。刚开始折腾配置时我也跟大多数人一样喜欢把别人推荐的插件全装上设置项照着网上的帖子抄一遍看着满满当当的界面觉得很有成就感。用得越久越发现真正好用的配置不是“多”和“全”而是每一项都贴合自己的实际工作流哪怕不多但每一个都顺手开发的时候感觉不到配置的存在这才是理想状态。我个人最满意的是配置里那一套匹配工作流的组合格式化在保存时静默完成、Git 操作不用反复确认、远程开发无缝衔接、高频快捷键完全脱离鼠标。如果你刚刚开始整理自己的配置我的建议是别急着抄完整配置从这文章里挑几个你当下最在意的点改起来用几天再决定哪些留下、哪些调回默认。最后再分享一个小技巧每次大规模改完配置都顺手把 settings.json 和 keybindings.json 放进自己的仓库备份一次可以是单独的配置仓库也可以是个人笔记仓库。配置不是改完就完事随着语言栈、开发方式和审美偏好的变化它还会跟着变能追踪变更的配置文件才是真正意义的“个人配置积累”。