VS Code 高效技巧:从编辑器到开发环境

装了 VS Code 却只会用它打开文件、写写代码,那你只发挥了它两成功力。这篇文章不讲大而全的功能清单,只挑日常开发里最高频、最提效的七个技巧:从命令行打开项目、快捷键、多光标批量编辑、代码片段、断点调试,到插件和工作区配置。跟着做完,你的 VS Code 会从"记事本加强版"变成真正的开发环境。

1. 装好之后的第一件事

第一件事不是装插件,而是让 code 命令可用:在 VS Code 里按 Ctrl + Shift + P 打开命令面板,输入 "Shell Command",选择 "Install 'code' command in PATH"。之后你可以在任何终端里输入 code .,用 VS Code 打开当前文件夹——这比先开编辑器再去找文件快得多,也是 Git、npm 等工具链与编辑器对接的常见方式。

# 用 VS Code 打开当前目录
code .
# 打开指定文件
code server.js
# 对比两个文件
code a.js b.js
# 新建一个空窗口
code -n

习惯用 code . 之后,你会自然形成"终端定位、编辑器编辑"的工作流。接着打开设置(Ctrl + ,),右上角有个"打开设置(JSON)"按钮,点进去直接编辑 settings.json——配置文件比图形界面更精确,也方便同步。

{
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "terminal.integrated.fontFamily": "Consolas"
}

这几项是性价比最高的基础配置:autoSave 切走窗口就自动保存,formatOnSave 保存时自动格式化,tabSize 建议团队统一成 2 或 4。配置是跟着人走的,换电脑后把这个文件拷过去,环境就还原了。

2. 必背快捷键

快捷键不用背很多,先把下面这张表里最高频的十个练成肌肉记忆,效率立刻上一个台阶:

最快的记忆方法不是背,而是"强迫自己用":每次想点鼠标之前,先想一步"这个动作有没有快捷键"。一周之后,大部分操作你的手会比脑子先反应。

还有三个高频补充:Ctrl + Shift + L 一次性选中所有相同的词(相当于把 Ctrl + D 按到底),适合全局批量改名;Ctrl + Enter 在当前行下方插入空行,Ctrl + Shift + Enter 在上方插入,写代码时不用再特意把光标挪到行尾回车;Home/End 跳行首行尾,Ctrl + ←/→ 按词移动。这些"移动类"快捷键看起来不起眼,但它们决定了你每天几百次光标移动的效率。

3. 多光标:批量编辑的神器

多光标是 VS Code 最让人"回不去"的功能:同一时刻在多个位置打字。比如你要把下面五个硬编码的价格统一改成常量,或者批量加注释、统一缩进,一个一个改太蠢了。

const price1 = 19;
const price2 = 29;
const price3 = 39;
const price4 = 49;
const price5 = 59;

把光标放在 price1 上按 Ctrl + D,它会依次选中后面每个相同的 price 单词;按住 Alt 再点击,可以自由地在任意位置添加光标;Ctrl + Alt + ↑/↓ 则是在连续行上垂直添加光标。有了多光标,批量改前缀、加括号、统一格式都是几秒钟的事。

多光标最经典的场景是"列编辑":按住 Alt 从第一行拖到最后一行,会在每一行都生成一个光标,然后你输入的内容会同时出现在所有行。批量给变量加 const、把散落的字符串统一加上引号、给 JSON 的每个键补逗号——凡是"每一行都要做同样的小改动",都是列编辑的活。配合 Ctrl + D 的逐个选中,几乎所有重复性文本修改都能在十秒内完成。

4. 代码片段:把模板变成几个字母

代码片段(Snippet)让你输入几个字母就展开一整段模板。VS Code 自带不少,但最顺手的是自定义:打开命令面板,输入 "Snippets",选择 "New Global Snippets",起个名字后编辑 JSON 文件。

{
  "Log 到控制台": {
    "prefix": "clog",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "快速输出 console.log"
  }
}

prefix 是触发词——输入 clog 回车,就会展开成 console.log('光标位置');,$1、$2 是光标依次停留的位置,Tab 键跳转。把常用的循环、函数骨架、错误处理模板都做成片段,你写代码会从"敲"变成"拼"。

5. 调试器:从 console.log 毕业

很多新手调试只会 console.log 满天飞,打印完还得删。VS Code 内置调试器可以打断点、看变量、单步执行。先写一段统计数组之和的代码:

function sumArray(nums) {
  let total = 0;
  for (let i = 0; i < nums.length; i++) {
    total += nums[i];
  }
  return total;
}

debugger; // 代码执行到这里会自动暂停
console.log(sumArray([1, 2, 3, 4]));

在行号左侧点一下可以打红色断点,代码运行到断点处暂停;左侧面板能看到所有变量的当前值,上方工具栏可以"单步跳过""步入函数""跳出"。debugger 语句是写在代码里的临时断点,浏览器和 Node 环境都认。暂停时把鼠标悬停在变量上就能看值,比 console.log 精准得多。

调试 Node.js 需要一份 launch.json:打开调试面板(左侧虫子图标),点"创建 launch.json",选 Node.js 环境,VS Code 会生成模板,把 program 指到你的入口文件即可。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动 server.js",
      "program": "${workspaceFolder}/server.js"
    }
  ]
}

${workspaceFolder} 是当前工作区路径的占位符,VS Code 会自动替换。request 是 launch(直接启动)还是 attach(附加到已运行的进程)。配好之后按 F5,断点就生效了。

断点还有两个进阶形态:条件断点和日志点。在断点上右键选择"编辑断点",可以填一个条件,比如 i === 5,只有满足时才暂停——循环 10 万次不用傻傻按 10 万次"继续"。日志点则是"不暂停只打印":右键断点选择"日志消息",填 变量 i 的值是 {i},运行时会输出到调试控制台,相当于"不用改代码的 console.log",排查问题时特别实用。

6. 插件:按需安装,别贪多

插件是 VS Code 的灵魂,但装多了会拖慢启动。推荐一套"小而精"的基础组合,全部在扩展面板(Ctrl + Shift + X)搜索安装:

• Chinese Language Pack:官方中文界面,新手友好。
• Prettier:统一代码格式,配合 formatOnSave 使用。
• ESLint:JavaScript/TypeScript 的代码检查,错误实时标红。
• Error Lens:把错误提示直接显示在代码行尾,不用等鼠标悬停。
• GitLens:在代码里直接看到每行是谁、什么时候、为什么改的。

# 用命令行安装插件,适合批量配置
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
# 列出已安装的插件
code --list-extensions

插件的配置同样写在 settings.json 里,比如 Prettier 的单引号、分号规则。code --list-extensions 可以导出你的插件清单,换电脑后一键还原——这其实是"环境即代码"思想的入门体验。

最后聊聊"工作区":当你用 code . 打开一个文件夹,VS Code 会把它当作一个工作区,并在文件夹里生成 .vscode 目录存放配置(settings.json、launch.json、推荐的插件列表等)。把 .vscode 提交到 Git,团队每个人打开项目就自动获得相同的格式化规则、调试配置和插件推荐——这是团队协作里"配置统一"的最简单做法,比口头约定"大家都装 Prettier"可靠得多。

7. 总结与练习

这篇你学会了:用 code . 从终端打开项目,用 JSON 精确配置编辑器;把高频操作绑上快捷键;用多光标批量修改;用代码片段固化模板;用调试器替代 console.log;最后按需安装插件。下一步练习:

• 把本文的快捷键表抄到便利贴上,接下来一周每天只用快捷键完成对应操作,看自己能不能坚持。
• 为你的常用语言写 3 个自定义代码片段(比如循环模板、函数模板、错误处理模板)。
• 给一个小项目配置 launch.json,故意写一个 bug,用断点加单步调试找到它,而不是用 console.log。

💡 技巧不在多,在于形成习惯。每周只挑一个新技巧刻意用三天,比一次性学二十个然后全忘掉有用得多。