VS Code 入门：把编辑器调成你的主场

写代码，一半时间在想逻辑，另一半时间在和编辑器较劲。一个顺手的编辑器能让你少点几百次鼠标、少翻几十次文档。VS Code（全称 Visual Studio Code）是目前最流行的免费编辑器，轻量、插件多、跨平台，本篇带你从零把它调教成主场。

把 VS Code 想成”带轮子的瑞士军刀”：本身功能够用，但真正的威力在你能往上面装各种刀头（插件），并且用快捷键代替大部分鼠标操作。

安装与首次打开

去 code.visualstudio.com 下载对应系统版本，安装后打开。macOS 用户建议顺手把”通过命令行启动”装上：

# 打开命令面板（见下文），搜索 "Shell Command: Install 'code' command in PATH"
# 之后就能在终端里用 code 命令打开项目
code my-project

这条命令很常用：在终端 cd 到项目目录后敲 code .，当前目录就在 VS Code 里打开了。

界面四大块

打开一个项目文件夹后，界面大致分四块：

活动栏（最左边竖条）：切换”资源管理器、搜索、源代码管理（Git）、运行调试、扩展”等视图，像大楼的楼层按钮。
侧边栏：显示当前视图的内容，比如文件树、搜索结果、插件列表。
编辑区（中间）：你写代码的地方，可以分多个标签页、甚至左右分屏对照。
面板（底部）：终端、输出、问题、调试控制台，写代码和看运行结果都在这里。

新手常忽略底部面板里的集成终端——你可以直接在编辑器里敲命令，不用再开一个独立的终端窗口，上下文不丢失。

命令面板：一切皆命令

VS Code 的精华是命令面板，几乎所有操作都能在这搜到：

Windows / Linux：Ctrl + Shift + P
macOS：Cmd + Shift + P

弹出的输入框里输入关键词（比如”格式化”、“主题”、“拆分编辑器”），回车即执行。记住这个快捷键，你几乎不用去翻菜单。

设置：图形界面与 settings.json

改设置有两种方式：

图形界面：Ctrl/Cmd + , 打开设置，分类搜索（如”font size”、“tab size”）。
JSON 直接改：设置页右上角有个”打开设置(json)“图标，能像写代码一样配置，方便备份和同步。

几个值得立刻改的设置：

{
  "editor.fontSize": 16,           // 字号调大，护眼
  "editor.tabSize": 2,            // 缩进用 2 个空格（前端常用）
  "editor.formatOnSave": true,    // 保存时自动格式化
  "files.autoSave": "afterDelay" // 失去焦点后自动保存，防丢
}

主题与图标

护眼和美观影响长期战斗力：

切换主题：命令面板搜 “Color Theme”，选喜欢的（如 Dark Modern、One Dark Pro）。
文件图标：命令面板搜 “File Icon Theme”，装了图标插件后这里能切换，让文件类型一眼可辨。

常见新手坑

一直用鼠标点菜单：效率低，应该养成 Cmd/Ctrl + Shift + P 搜命令的习惯。
没装命令行 code：每次手动找文件打开，其实一行 code . 搞定。
不敢碰 settings.json：其实它和图形设置是同一份配置的两面，写 JSON 更精确、还能复制到别的机器。
开着默认字号 14 盯一天：眼睛累，调大到 15–18 更舒服。

小测验

问题1：命令面板的快捷键？答案：macOS Cmd + Shift + P，Win/Linux Ctrl + Shift + P。
问题2：想”保存时自动格式化”，该改哪个设置？答案：editor.formatOnSave 设为 true。
问题3：在终端里用 code . 打开项目前需要做什么？答案：先在命令面板安装 “code command in PATH”，把 code 加进环境变量。

更多实战：把 VS Code 调成你的样子

装好之后，花十分钟做这几件事，体验立刻不一样：

命令面板搜 Color Theme，换一个护眼深色主题。
设置里把 editor.fontSize 调到 16，盯一天不累。
打开命令面板装 code 命令，以后终端 code . 直接开项目。
把 editor.formatOnSave 设 true，保存自动排版。
习惯用 Ctrl/Cmd + Shift + P 代替翻菜单。

多光标与分屏初体验

别等下一篇才用。试着在编辑器里 Alt + 点击 两个不同位置，同时输入文字，感受”一处写处处写”的爽快；再按 Ctrl/Cmd + \ 把窗口左右拆分，左边看代码右边看文档。

自测：你真的懂了吗

想”保存时自动格式化”该改哪个设置？答案：editor.formatOnSave 设为 true。
在终端用 code . 打开项目前要做什么？答案：先在命令面板安装 code 命令到 PATH。
底部面板里的集成终端最大好处？答案：命令和代码同窗，报错可点路径跳回代码。

常见认知误区

关于 VS Code，新手有几个误会。第一，以为它很重、吃内存——其实它比传统 IDE 轻得多，装几个插件也不会卡，放心用。第二，以为所有功能都得装插件——其实搜索、终端、调试、Git 集成都是内置的，插件是锦上添花不是必需品。第三，不敢碰 settings.json——觉得那是给高手用的，其实它和图形设置是同一份配置的两面，写 JSON 更精确，还能复制到别的机器一键还原。第四，一直用鼠标点菜单——不知道 Ctrl/Cmd + Shift + P 命令面板能搜到几乎所有操作，养成这个习惯效率立刻翻倍。第五，开着默认字号十四盯一天——眼睛累，调到十五到十八更舒服。记住：编辑器是每天陪你最久的工具，花半小时调顺手，长期回报巨大。

这一篇你该记住的

VS Code 轻量、免费、插件生态强，是主流开发编辑器。
界面四块：活动栏、侧边栏、编辑区、底部面板（含集成终端）。
命令面板 Cmd/Ctrl + Shift + P 是核心入口，一切操作可搜索。
设置可用图形界面或 settings.json，推荐开 formatOnSave、autoSave。
装好命令行 code，用 code . 在终端打开项目。

下一篇我们讲 必装插件：哪些扩展能让你效率翻倍，以及怎么挑插件不踩坑。

开发工具