VSCode的隐藏玩法大公开！学会这些让你的代码写得更快更爽

爱谁谁

发布时间：2025-08-12 23:39:01

443人浏览过

来源于php中文网

原创

掌握命令面板（ctrl+shift+p）可快速执行安装扩展、切换主题、运行任务等操作，大幅提升操作效率；2. 多光标编辑（alt+click/ctrl+d）、peek definition（alt+f12）、zen mode（ctrl+k z）和正则搜索替换（alt+r）等快捷键能显著提升编码速度与专注度；3. 通过settings.json配置自动格式化（editor.formatonsave）和保存时修复代码（codeactionsonsave），可保持代码整洁；4. 利用files.exclude和search.exclude隐藏无关文件，优化项目浏览与搜索体验；5. 在keybindings.json中自定义快捷键，可为高频操作提速；6. 创建用户代码片段（如“log”生成console.log、“rfc”生成react组件）能高效复用模板代码；7. 内置git集成支持查看变更、提交、分支切换与冲突解决，减少外部工具依赖；8. 使用tasks.json定义构建、测试等任务，实现一键运行自动化流程；9. 熟练使用内置调试器设置断点、监控变量，可替代console.log实现高效排错；10. 安装gitlens、path intellisense、rest client和remote-ssh等扩展，可进一步增强版本追踪、路径补全、api测试和远程开发能力。通过深度定制与功能挖掘，vscode能从文本编辑器进化为贴合个人习惯的高效开发平台，真正实现工具服务于人，最终让开发者专注于代码逻辑本身。

VSCode的隐藏玩法大公开！学会这些让你的代码写得更快更爽

VSCode里藏着不少能让写代码这事儿变得更顺手、更高效的小技巧和功能，它们不像那些常用功能那么显眼，但一旦你掌握了，真的能让你的开发体验提升好几个档次，甚至有点“回不去了”的感觉。它不仅仅是个文本编辑器，更像是个可以深度定制的强大工作台，关键在于你是否愿意去探索那些不那么张扬的角落。

利用VSCode的深度定制能力和一些被忽视的内置功能，可以显著提升你的编码速度和舒适度。这不仅仅是学会几个快捷键那么简单，更是将VSCode变成你思维的延伸，让工具去适应你的习惯，而不是你迁就工具。我个人觉得，真正把VSCode用“爽”了，就是当你不再被工具本身的限制所困扰，而是可以心无旁骛地专注于代码逻辑本身的时候。

那些你可能忽略的快捷键和命令面板魔术？

说实话，我刚开始用VSCode的时候，也只是把它当成一个“高级记事本”，觉得能写代码、有语法高亮就够了。但后来发现，这工具的真正精髓在于它那深不见底的命令面板（

Ctrl+Shift+P

或

Cmd+Shift+P

）和各种组合快捷键。你是不是也习惯了鼠标点点点？别这样！

命令面板可不是只用来“打开设置”的。它能做的事情远超你想象，比如快速安装扩展、切换语言模式、运行任务、甚至执行Git命令。我经常用它来搜索那些一时想不起来的配置项，或者快速启用某个不常用的功能。比如，想快速切换主题，直接在命令面板里搜“theme”就行，比去设置里找快多了。

再说说快捷键，有些简直是“生产力神器”。

多光标编辑（
Alt+Click
或
Ctrl+D
/
Cmd+D
）：这个功能我用了好几年，每次在需要批量修改变量名或者重复文本的时候，都能省下大量复制粘贴的时间。
```
Ctrl+D
```
是选中当前单词，再按一次就选中下一个相同的单词，简直是重构时的利器。
Peek Definition（
Alt+F12
）：当你读别人的代码，或者遇到一个不熟悉的函数时，直接跳过去看定义固然好，但有时你只是想快速瞄一眼，不想离开当前文件。
```
Alt+F12
```
就能在当前位置弹出一个小窗口显示定义，看完直接
```
Esc
```
关闭，丝滑无比。
Zen Mode（
Ctrl+K Z
）：这个可能不那么“隐藏”，但绝对是提升专注度的“魔法”。一键进入全屏、无干扰模式，屏幕上只剩下你的代码。我个人觉得，当需要沉浸式思考一段复杂逻辑时，它能帮你排除一切干扰。
文件内搜索替换的正则表达式（
Ctrl+F
后的
Alt+R
）：大部分人只知道普通搜索，但VSCode的搜索框支持正则表达式！配合
```
Alt+R
```
开启正则模式，你可以实现非常复杂的文本匹配和替换。我曾经用它在几百个文件中批量修改了某个特定格式的注释，效率高到飞起。

这些小技巧，看似不起眼，但日积月累下来，真的能节省大量时间，让你的手指和大脑的配合更默契。

TextIn Tools

是一款免费在线OCR工具，包含文字识别、表格识别，PDF转文件，文件转PDF、其他格式转换，识别率高，体验好，免费。

下载

如何通过个性化配置让VSCode更懂你？

VSCode的强大之处，很大一部分在于它几乎无限的定制能力。你可能觉得改改主题、字体就够了，但真正的“隐藏玩法”在于深入

settings.json

和

keybindings.json

，甚至自己动手写用户代码片段（User Snippets）。

我以前也是个“配置懒人”，总觉得默认的就挺好。直到有一次，我发现自己总是重复写一些模板代码，或者每次保存都需要手动格式化。于是我开始研究

settings.json

。

editor.formatOnSave
和
editor.codeActionsOnSave
：这两个是我个人最爱的配置项。设置
```
editor.formatOnSave: true
```
就能在保存时自动格式化代码，省去了手动操作的麻烦。配合
```
editor.codeActionsOnSave
```
，你甚至可以在保存时自动修复ESLint错误，或者组织导入（
```
source.organizeImports
```
）。这简直是“懒人福音”，让你的代码永远保持整洁。
files.exclude
和
search.exclude
：你的项目里是不是有很多
```
node_modules
```
、
```
.git
```
或者其他构建产物？这些文件不仅占地方，还会拖慢搜索速度。把它们加到
```
files.exclude
```
和
```
search.exclude
```
里，让VSCode在文件浏览器和搜索时忽略它们，瞬间清爽不少。
自定义快捷键（
keybindings.json
）：如果你发现某个命令或者某个扩展的功能你用得特别频繁，但又没有一个顺手的快捷键，那就自己定义一个！比如，我经常需要在不同的终端面板之间切换，或者快速运行某个特定的任务，我就给它们设置了自定义快捷键。学会这个，你的双手就真的可以“飞”起来了。
用户代码片段（User Snippets）：这个功能简直是为那些重复性劳动而生的。你是不是经常写
```
console.log()
```
或者某个框架的固定组件结构？你可以为它们创建代码片段。比如，我写React组件时，创建一个名为
```
rfc
```
（React Function Component）的片段，输入
```
rfc
```
然后回车，一个完整的函数组件结构就自动生成了，包括导入、导出和基本的JSX骨架。这比你手动敲或者复制粘贴快太多了。你可以为不同的语言创建不同的片段，甚至包含变量占位符，让它们更智能。

// 示例：JavaScript/TypeScript的用户代码片段
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
    "React Functional Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "interface $1Props {",
            "\t",
            "}",
            "",
            "const $1: React.FC<$1Props> = ({}) => {",
            "\treturn (",
            "\t\t",
            "\t\t\t$2",
            "\t\t",
            "\t);",
            "};",
            "",
            "export default $1;",
            ""
        ],
        "description": "Creates a React Functional Component"
    }
}

当你真正开始根据自己的工作流去定制VSCode时，你会发现它不再是一个冰冷的工具，而更像一个懂你的伙伴。

那些提升开发效率的“黑科技”扩展和内置功能？

除了基础的配置和快捷键，VSCode还有很多内置的“黑科技”和强大的扩展，它们能把你的开发效率推向一个新高度。

内置的Git集成：很多开发者依然习惯用命令行或者独立的Git GUI工具，但VSCode内置的Git功能已经非常强大了。你可以直接在侧边栏查看文件变更、暂存、提交、切换分支、甚至解决冲突。特别是那个“源代码管理”视图，能清楚地显示你所有未提交的变更，以及每一行的修改历史。我个人觉得，学会用它来做日常的Git操作，可以省去很多上下文切换的麻烦。
Tasks（任务）：这个功能很多人都没怎么用过，但它能帮你自动化很多重复性的工作。比如，你的项目需要运行一个构建命令、一个测试命令，或者启动一个开发服务器。你可以在
```
.vscode/tasks.json
```
里定义这些任务，然后通过命令面板（
```
Tasks: Run Task
```
）或者快捷键来快速执行它们。这比每次都打开终端输入命令方便多了。

// 示例：tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "npm run build",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "always",
                "panel": "new"
            },
            "problemMatcher": []
        },
        {
            "label": "start dev server",
            "type": "shell",
            "command": "npm run dev",
            "isBackground": true,
            "problemMatcher": []
        }
    ]
}

强大的调试器：VSCode的内置调试器支持多种语言（JavaScript/TypeScript、Python、C#等），并且可以通过扩展支持更多。学会设置断点、单步执行、查看变量值、甚至修改变量值，能大大提高你排查问题的效率。我以前总是习惯
```
console.log
```
大法，但自从熟练使用VSCode的调试器后，我发现它才是真正的“透视眼”，能让你清晰地看到代码执行的每一步。
扩展推荐（真的能提升效率的）：
- GitLens：如果你用Git，这个扩展几乎是必装的。它能让你在代码旁边直接看到每一行的Git提交信息，谁在什么时候改了这行代码，一目了然。
- Path Intellisense：在你输入文件路径时，它能提供智能补全，再也不用担心路径写错了。
- REST Client：直接在VSCode里发送HTTP请求，并查看响应。对于需要频繁测试API的开发者来说，这比切换到Postman或者Insomnia方便太多了。你甚至可以把请求保存成
```
.http
```
  文件，方便复用和版本控制。
- Docker/Remote - SSH/WSL：如果你经常在远程服务器、Docker容器或者WSL环境中开发，这些Remote Development扩展套件简直是神来之笔。它们能让你在本地VSCode里获得和本地开发几乎一样的体验，所有文件和工具链都在远程环境运行，但编辑界面和插件却在本地。这彻底改变了我远程开发的模式。