VSCode还能这样优化？这些配置让你的编程体验爽到飞起

看不見的法師

发布时间：2025-08-16 19:36:02

459人浏览过

来源于php中文网

原创

答案是通过深度配置settings.json、精选扩展与自定义快捷键，可将VSCode打造成高效个性化开发工具。首先调整自动保存、字体行高等基础设置提升舒适度；其次安装Prettier、ESLint、GitLens等高效扩展实现代码格式化、错误检查与Git增强；再通过自定义快捷键实现快速操作；为提升性能，需定期清理无用扩展，利用工作区设置按项目启用扩展，并在settings.json中排除node_modules等大目录以加快搜索与响应速度；最后通过Color Theme、Icon Theme、Fira Code等字体及界面布局调整，打造美观舒适的编码环境，全面提升开发体验与效率。

vscode还能这样优化？这些配置让你的编程体验爽到飞起

是的，VSCode的潜力远超你想象。它不仅仅是一个开箱即用的代码编辑器，更是一个高度可定制的开发平台。通过一些巧妙的配置和精选的扩展，你完全可以把VSCode打造成一个为你量身定制、效率爆棚的编程利器，让你的日常编码体验从“能用”直接飞跃到“爽到飞起”。

解决方案

要让VSCode真正“爽到飞起”，核心在于深度定制它的配置（

settings.json

）、巧妙运用强大的扩展（Extensions），以及合理设置快捷键（Keybindings）。这三者结合起来，能让你在编码、调试、版本控制等各个环节都感受到效率的显著提升。

首先，从基础设置开始。你得知道，VSCode的大部分行为都可以通过

settings.json

来调整。比如，我个人就非常喜欢开启

"files.autoSave": "afterDelay"

，这样就不用频繁地手动保存文件了，感觉像有个隐形的助手在帮你处理这些琐事。字体大小、行高、制表符宽度这些细节，看起来不起眼，但长时间盯着屏幕，它们对眼睛的舒适度影响巨大。我通常会把字体调大一点，行高也适当增加，让代码看起来不那么拥挤。

然后是扩展，这简直是VSCode的灵魂。我一直觉得，一个好的扩展能解决你日常开发中80%的痛点。比如，Prettier和ESLint是前端开发的标配，它们能自动格式化代码，检查语法错误，让你在保存时就能得到一份干净、规范的代码，省去了大量手动调整的麻烦。GitLens则能让你在代码行旁边直接看到是谁在什么时候修改了这行代码，追溯历史简直不要太方便。对于特定的语言，比如Python的Pylance，JavaScript的ES7+ React/Redux/GraphQL Snippets，它们提供的智能提示和代码片段，能大大减少敲击键盘的次数，提高编码速度。

最后是快捷键。虽然VSCode自带了很多快捷键，但有些操作我用得特别频繁，就喜欢自定义一个更顺手的。比如，快速打开终端、切换文件、或者运行特定的构建任务，一个自定义的快捷键能让你双手不离键盘，流畅地在不同任务间切换。

如何让VSCode启动更快，运行更流畅？

我以前也遇到过VSCode卡顿，一度怀疑是电脑不行，后来才发现是自己装了太多“花里胡哨”的插件，而且有些根本就没用上。要让VSCode保持轻快，首先得学会“断舍离”。

一个常见的误区是，很多人会安装一大堆扩展，但实际上只用到了其中一小部分。定期审查并禁用或卸载不常用的扩展是提升性能的关键。你可以打开“扩展”视图（

Ctrl+Shift+X

），看看哪些扩展是你真的每天都在用的，哪些是偶尔用一下，哪些是装了就没管过的。对于那些“偶尔用一下”的，可以考虑只在需要时启用，或者寻找更轻量级的替代品。

另一个重要的优化点是工作区（Workspace）特定的设置。VSCode允许你为每个项目设置独立的配置，包括启用或禁用特定的扩展。这意味着，你可以在一个Python项目中只启用Python相关的扩展，而在一个前端项目中只启用JavaScript/CSS相关的扩展，避免加载不必要的资源。这通过在项目根目录创建

.vscode/settings.json

和

.vscode/extensions.json

文件来实现。

对于大型项目，文件排除也至关重要。

files.exclude

和

search.exclude

配置项可以告诉VSCode忽略某些文件夹，比如

node_modules

、

dist

或

build

目录。这些目录通常包含大量的文件，如果VSCode每次都去索引它们，会消耗大量的CPU和内存。通过排除它们，不仅搜索速度会变快，整体的响应也会更灵敏。

// .vscode/settings.json
{
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/Thumbs.db": true,
        "**/node_modules": true, // 排除node_modules
        "**/dist": true,         // 排除打包后的dist目录
        "**/.vscode": true       // 排除VSCode自身配置目录，避免循环索引
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    }
}

此外，你还可以通过

Developer: Show Running Extensions

命令来查看当前哪些扩展正在运行，以及它们消耗了多少资源。如果发现某个扩展持续占用大量CPU或内存，那它可能就是导致卡顿的元凶，这时候你就得考虑是否需要它，或者有没有更好的替代品。

哪些VSCode扩展能真正提升开发效率？

我刚开始用VSCode的时候，觉得自带的Git功能够用了，直到有一天同事给我演示了GitLens，我才发现自己以前错过了什么！真正提升效率的扩展，往往是那些能帮你自动化重复工作、提供深度洞察或简化复杂流程的工具。

Prettier - Code formatter & ESLint: 这两个简直是前端开发的“黄金搭档”。Prettier帮你统一代码风格，每次保存自动格式化，告别手动调整缩进和空格的烦恼。ESLint则能实时检查代码中的潜在问题和不规范写法，把错误扼杀在萌芽状态。我的

settings.json

里通常会加上：

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // ... 其他语言配置
    "eslint.validate": [
        "javascript",
        "typescript",
        "javascriptreact",
        "typescriptreact"
    ]
}

GitLens — Git supercharged: 就像我之前说的，这个扩展简直是Git用户的福音。它能在代码旁边显示每一行的Git提交信息，包括作者、提交时间、提交信息等，让你一眼就能了解代码的来龙去脉。查看文件历史、比较不同版本、甚至通过“Blame”功能追溯每一行代码的修改者，都变得异常简单。

小鸽子助手
一款集成于WPS/Word的智能写作插件

下载
Path Intellisense: 这个扩展虽然小，但非常实用。它能为你提供文件路径的智能补全，当你输入
```
./
```
或
```
../
```
时，会自动提示当前目录下的文件和文件夹，大大减少了手动输入路径的错误和时间。
Live Server: 对于前端开发者来说，它提供了一个带有实时重载功能的本地开发服务器。你修改HTML、CSS或JavaScript文件后，浏览器会立即刷新显示最新效果，省去了频繁手动刷新的麻烦。
REST Client: 如果你经常和API打交道，这个扩展能让你直接在VSCode里发送HTTP请求并查看响应。你可以把API请求写成
```
.http
```
文件，然后直接点击发送，非常方便，比切换到Postman或者Insomnia要流畅得多。

这些扩展，有些是通用性的，有些则针对特定开发场景，但它们共同的目标都是减少你的重复劳动，让你更专注于解决实际问题。

如何个性化VSCode界面，让它更符合我的审美和习惯？

我一直觉得，一个好看的开发环境能直接影响我的心情和效率。所以，我花了不少时间去折腾主题和字体，最终找到了最适合自己的那套组合。VSCode的界面定制能力非常强大，远不止换个颜色那么简单。

主题（Themes）： 这是最直观的改变。VSCode有两类主题：
- 颜色主题（Color Theme）： 改变编辑器的背景、代码高亮颜色、侧边栏颜色等。我个人偏爱深色主题，比如
```
One Dark Pro
```
  、
```
Dracula
```
  或者
```
Material Theme
```
  的深色变体。它们不仅能减少眼睛疲劳，也能让代码的语法高亮更突出。
- 图标主题（Icon Theme）： 改变文件和文件夹的图标。
```
Material Icon Theme
```
  是我的首选，它为各种文件类型（如
```
js
```
  、
```
ts
```
  、
```
json
```
  、
```
html
```
  、
```
css
```
  等）和框架/库（如React、Angular、Vue）提供了直观且美观的图标，让文件列表一目了然。你可以在
```
settings.json
```
  中设置：
```
{
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "material-icon-theme"
}
```
字体（Fonts）： 代码字体的重要性不亚于颜色主题。一个好的编程字体，不仅要清晰易读，最好还能支持连字（ligatures），把
```
=>
```
、
```
===
```
、
```
!==
```
等字符组合显示成一个更美观的符号。我目前使用的是
```
Fira Code
```
，它在这方面做得非常好。你可以在
```
settings.json
```
中配置：
```
{
    "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true, // 开启字体连字
    "editor.fontSize": 14,       // 调整字体大小
    "editor.lineHeight": 22      // 调整行高，让代码不那么拥挤
}
```
工作台布局与显示（Workbench Layout & Display）：
- Zen Mode（禅模式）： 如果你想沉浸式编码，可以尝试开启禅模式（
```
Ctrl+K Z
```
  ）。它会隐藏所有UI元素，只留下代码编辑器，让你专注于当前任务。
- 最小地图（Minimap）： 右侧的迷你地图可以让你快速概览整个文件结构。你可以根据喜好选择开启或关闭，或者调整其大小和位置：
```
"editor.minimap.enabled": true
```
  。
- 空白字符显示（Render Whitespace）： 开启
```
"editor.renderWhitespace": "all"
```
  可以显示所有空格和制表符，这对于发现代码中不一致的缩进非常有用，尤其是在团队协作时。
- 侧边栏和活动栏位置： 默认情况下，活动栏（Activity Bar）在左侧，你可以通过
```
"workbench.activityBar.location": "right"
```
  把它移到右侧，或者通过
```
"workbench.ideBar.location"
```
  调整侧边栏的位置。