VSCode 新手完全指南

一、界面认识

┌─────────────────────────────────────────┐
│  文件  编辑  查看  ...      🔍 搜索框      │  ← 顶部菜单/标题栏
├────────┬────────────────────────┬───────┤
│        │                        │       │
│ 资源    │                        │ 大纲/  │
│ 管理器  │     编辑器区域        │ Git      │
│ (文件树)│    (写代码的地方)     │ 调试      │
│        │                        │       │
├────────┴────────────────────────┴───────┤
│  终端  输出  调试控制台  问题    ← 底部面板   │
└─────────────────────────────────────────┘

区域	打开方式	作用
侧边栏 (文件树)	`Ctrl+B`	浏览文件、搜索、Git、调试
编辑器	点击文件	写代码的主区域，支持分屏
底部面板	`Ctrl+``	终端、输出日志、错误列表
命令面板	`Ctrl+Shift+P`	VSCode 的"万能搜索"，最重要！

二、最核心操作：命令面板

Ctrl + Shift + P（Mac: Cmd + Shift + P）

这是 VSCode 最重要的快捷键。你可以用它做任何事：

输入 settings json → 打开配置文件
输入 reload window → 重启 VSCode
输入 format document → 格式化当前文件
输入 terminal → 新建终端
输入 git commit → 提交代码

💡 记不住快捷键？先记这一个，其他都能搜出来。

三、文件与编辑

文件操作

操作	Windows/Linux	Mac
新建文件	`Ctrl+N`	`Cmd+N`
保存	`Ctrl+S`	`Cmd+S`
保存全部	`Ctrl+K S`	`Cmd+K S`
关闭当前文件	`Ctrl+W`	`Cmd+W`
关闭所有	`Ctrl+K W`	`Cmd+K W`
打开最近文件	`Ctrl+R`	`Cmd+R`

快速打开文件（超常用）

操作	快捷键	说明
快速打开文件	`Ctrl+P`	输入文件名，秒开
跳转到某行	`Ctrl+G`	输入行号直接跳转
跳转到某个符号	`Ctrl+Shift+O`	函数、变量名

例：按 Ctrl+P，输入 index.vue:25，直接打开并跳转到第 25 行。

四、编辑与光标

基础编辑

操作	Windows/Linux	Mac
撤销	`Ctrl+Z`	`Cmd+Z`
重做	`Ctrl+Y` / `Ctrl+Shift+Z`	`Cmd+Shift+Z`
剪切	`Ctrl+X`	`Cmd+X`
复制	`Ctrl+C`	`Cmd+C`
粘贴	`Ctrl+V`	`Cmd+V`
全选	`Ctrl+A`	`Cmd+A`

多光标编辑（提高效率神器）

操作	快捷键	效果
按住 `Alt` 点击	`Alt+Click`	多个光标同时编辑
选中同名单词	`Ctrl+D`	逐个选中下一个相同单词
选中所有同名单词	`Ctrl+Shift+L`	一次性选中所有
向上/下添加光标	`Ctrl+Alt+↑/↓`	多行同时编辑

💡 场景：把 10 个 var 改成 const，按 Ctrl+Shift+L 全选，直接改。

五、代码导航

操作	Windows/Linux	Mac
跳转到定义	`F12`	`F12`
返回上一步	`Alt+←`	`Ctrl+-`
前进下一步	`Alt+→`	`Ctrl+Shift+-`
查找引用	`Shift+F12`	`Shift+F12`
重命名符号	`F2`	`F2`
折叠/展开代码	`Ctrl+Shift+[` / `]`	`Cmd+Option+[` / `]`

六、搜索与替换

操作	快捷键
当前文件搜索	`Ctrl+F`
当前文件替换	`Ctrl+H`
全局搜索（整个项目）	`Ctrl+Shift+F`
全局替换	`Ctrl+Shift+H`

💡 全局搜索时支持正则表达式，点击搜索框右侧 .* 图标开启。

七、终端操作

操作	快捷键
显示/隐藏终端	Ctrl+`（反引号，Tab 上面那个键）
新建终端	Ctrl+Shift+`
切换终端标签	`Ctrl+PageUp/PageDown`

八、分屏与布局

操作	快捷键
向右分屏	`Ctrl+\`
切换编辑器组	`Ctrl+1` / `Ctrl+2` / `Ctrl+3`
关闭当前编辑器组	`Ctrl+W`

💡 可以一边看代码一边看效果，或者对照两个文件。

九、Git 基础操作

VSCode 内置了 Git，侧边栏第三个图标就是。

操作	路径
查看修改	点击侧边栏 🌿 图标
暂存文件 (Stage)	点击文件旁的 `+`
提交 (Commit)	输入消息 → 点击 ✓
推送 (Push)	点击 `...` 菜单 → Push
查看历史	`Ctrl+Shift+P` → `Git: View History`

十、调试（Debug）

操作	快捷键	说明
开始调试	`F5`	运行并调试
打断点	`F9`	在代码行号左侧点击也行
单步跳过	`F10`	执行当前行，不进入函数
单步进入	`F11`	进入函数内部
继续运行	`F5`	跑到下一个断点
停止调试	`Shift+F5`

十一、常用设置入口

你想做什么	操作路径
打开用户设置	`Ctrl+,`
打开设置 JSON	`Ctrl+Shift+P` → `Open User Settings JSON`
打开工作区设置	`Ctrl+Shift+P` → `Open Workspace Settings JSON`
安装扩展	侧边栏第五个图标（方块图标）或 `Ctrl+Shift+X`
切换主题	`Ctrl+K Ctrl+T`
放大/缩小字体	`Ctrl+=` / `Ctrl+-`

十二、新手建议记住的 10 个快捷键

按优先级排序，先练熟这些：

排名	快捷键	用途
1	`Ctrl+Shift+P`	命令面板（万能）
2	`Ctrl+P`	快速打开文件
3	Ctrl+`	显示/隐藏终端
4	`Ctrl+B`	显示/隐藏侧边栏
5	`Ctrl+D`	选中下一个相同单词
6	`F12`	跳转到定义
7	`Alt+←`	返回上一步
8	`Ctrl+Shift+F`	全局搜索
9	`Ctrl+S`	保存
10	`Ctrl+\`	分屏


反引号就是键盘上 Tab 键正上方、和 ~ 共用的那个键（英文输入法状态下）
键盘左上角区域：
┌─────┬─────┬─────┐
│ Esc │  1  │  2  │ ...
├─────┴─────┴─────┤
│  ~  │  !  │  @  │  ← Shift+这个键 = ~
│  `  │  1  │  2  │  ← 直接按 = `（反引号）
└─────┴─────┴─────┘
      ↑
    Tab 上面
    
    
其他容易搞混的符号快捷键
快捷键	按键位置	             作用
Ctrl + ` 	 Tab 上面	        打开终端
Ctrl + '	 回车左边（单引号）	快速打开终端（某些键盘布局）
Ctrl + ~	 Shift + ` 	      部分系统用此组合

十三、配置文件位置（供参考）

文件	路径
全局设置	`~/.config/Code/User/settings.json`
全局快捷键	`~/.config/Code/User/keybindings.json`
工作区设置	`.vscode/settings.json`（项目内）
推荐扩展	`.vscode/extensions.json`（项目内）

Windows 用户路径为 %APPDATA%\Code\User\settings.json

如何配置 VSCode 的 `settings.json`

1. 打开 settings.json

方法一（推荐）：

按 Ctrl + Shift + P（Mac: Cmd + Shift + P）
输入 Open User Settings (JSON) → 打开全局配置（对所有项目生效）
或输入 Open Workspace Settings (JSON) → 打开工作区配置（仅对当前项目生效）

方法二：

打开 VSCode 设置面板（Ctrl + ,）
点击右上角图标 Open Settings (JSON)

2. 全局 vs 工作区配置的区别

类型	文件位置	作用范围	适用场景
全局 (User)	`~/.config/Code/User/settings.json`	所有项目	个人习惯、通用设置
工作区 (Workspace)	`.vscode/settings.json`（项目根目录）	仅当前项目	团队协作、项目特定规范

💡 推荐做法：把项目相关的配置（如 i18n 路径、ESLint 规则）放在工作区的 .vscode/settings.json 中，这样团队成员打开项目自动生效，不需要每个人手动配。

3. 针对你项目的完整配置

在项目根目录创建 .vscode/settings.json（如果已有就追加）：

{
  // ========== 格式化相关 ==========
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // ========== ESLint 相关 ==========
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],

  // ========== Vue 相关 ==========
  // Vue - Official 扩展的混合模式（解决 .vue 文件类型识别）
  "vue.server.hybridMode": "auto",

  // ========== i18n Ally 相关 ==========
  "i18n-ally.localesPaths": ["locales", "src/tools/*/locales"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sourceLanguage": "zh-CN",
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.enabledParsers": ["json", "yaml"],

  // ========== 编辑器体验优化 ==========
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,

  // ========== 文件关联 ==========
  "files.associations": {
    "*.vue": "vue"
  }
}

4. 关键配置项解释

配置	作用
`editor.formatOnSave: false`	关闭保存时自动格式化，避免与 ESLint 冲突
`source.fixAll.eslint: "explicit"`	保存时自动用 ESLint 修复问题（如自动加分号、统一引号）
`eslint.validate`	告诉 ESLint 检查哪些文件类型，必须包含 `vue`
`vue.server.hybridMode: "auto"`	Vue - Official 的混合模式，让 TypeScript 能识别 `.vue` 文件
`i18n-ally.localesPaths`	翻译文件存放路径，支持 glob 通配符 `*`
`i18n-ally.keystyle: "nested"`	翻译键使用嵌套格式，如 `user.name`
`files.eol: "\n"`	统一使用 LF 换行符（避免 Windows/Mac 换行符不一致）

5. 验证配置是否生效

保存 settings.json 后：

重启 VSCode（或按 Ctrl + Shift + P → Developer: Reload Window）
打开一个 .vue 文件，检查：
- 代码高亮正常 ✅
- import .vue 文件不报红 ✅
- 保存时 ESLint 自动修复问题 ✅
- i18n Ally 侧边栏显示翻译预览 ✅

6. 常见问题

Q: 为什么 source.fixAll.eslint 的值是 "explicit" 而不是 true？
A: VSCode 新版（1.83+）推荐使用 "explicit" 代替 true，语义更明确，表示"仅在显式保存时修复"。

Q: 工作区配置和全局配置冲突了怎么办？
A: 工作区配置优先级更高，会覆盖全局配置。如果冲突，VSCode 会在设置项旁显示提示。

Q: 团队成员也要装同样的扩展怎么办？
A: 在项目根目录创建 .vscode/extensions.json：

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "lokalise.i18n-ally"
  ],
  "unwantedRecommendations": [
    "octref.vetur"
  ]
}

这样打开项目时 VSCode 会自动提示安装推荐扩展。

码耕记

VSCode 新手完全指南

VSCode 新手完全指南

一、界面认识

二、最核心操作：命令面板

三、文件与编辑

文件操作

快速打开文件（超常用）

四、编辑与光标

基础编辑

多光标编辑（提高效率神器）

五、代码导航

六、搜索与替换

七、终端操作

八、分屏与布局

九、Git 基础操作

十、调试（Debug）

十一、常用设置入口

十二、新手建议记住的 10 个快捷键

十三、配置文件位置（供参考）

如何配置 VSCode 的 settings.json

1. 打开 settings.json

2. 全局 vs 工作区配置的区别

3. 针对你项目的完整配置

4. 关键配置项解释

5. 验证配置是否生效

6. 常见问题

如何配置 VSCode 的 `settings.json`