HOW - vscode 使用指南

一、基本介绍

1. 安装 VS Code

下载和安装：从 VS Code 官网下载适合你操作系统的安装包并安装。
启动 VS Code：安装完成后，启动 VS Code。

请添加图片描述

2. 界面介绍

活动栏（Activity Bar）：位于最左侧，用于切换不同的视图，比如文件资源管理器、搜索、源代码管理（Git）、调试、扩展等。
主侧边栏（Side Bar）：默认显示文件资源管理器，点击活动栏的图标可以切换到其他视图。
编辑器区域（Editor Area）：主编辑区域，可以同时打开多个文件。
面包屑导航（Breadcrumbs）：显示当前文件的路径，方便快速导航。
状态栏（Status Bar）：位于底部，显示各种状态信息，比如当前分支、文件编码、行列号等。

3. 扩展和插件

安装扩展：点击活动栏中的扩展图标，搜索你需要的扩展，点击 安装。
常用扩展：
- Prettier - Code formatter：一个流行的代码格式化工具，支持多种编程语言。自动格式化代码，保证代码风格一致。
- ESLint：JavaScript 和 TypeScript 的静态检查工具。帮助发现和修复代码中的错误和潜在问题。
- GitLens — Git supercharged：增强 VS Code 中的 Git 功能。提供丰富的 Git 相关信息，如文件更改记录、代码片段的提交历史等。
- Github Copilot：由 GitHub 和 OpenAI 合作开发的 AI 编码助手。通过 AI 提供代码建议、自动完成代码片段，支持多种编程语言和框架。
- Tabnine：基于 AI 的代码自动补全工具。通过机器学习模型提供智能代码补全建议，支持多种编程语言，极大提高编程效率。
- Visual Studio IntelliCode：利用 AI 提供代码建议。根据上下文提供智能代码建议，提高编程效率。
- Live Server：在本地服务器上运行你的应用，自动刷新页面。通过右键点击 HTML 文件并选择 “Open with Live Server”，可以启动一个本地开发服务器，每次保存文件时页面会自动刷新。
- Path Intellisense：文件路径的智能提示。在输入文件路径时提供自动补全建议。
- Bracket Pair Colorizer 2：此扩展已弃用，因为此功能现在内置于 VS Code。
- Auto Rename Tag：自动重命名配对的 HTML/XML 标签。修改一个标签时，自动更新对应的闭合标签。
- HTML CSS Support：在 HTML 文件中提供 CSS 类名和 ID 的自动补全。提高 HTML 和 CSS 文件的编辑效率。
- CSS Peek：允许在 HTML 文件中直接查看和编辑 CSS。通过 Ctrl + 点击类名或 ID，可以在 HTML 中直接查看对应的 CSS 定义。
- JavaScript (ES6) code snippets：JavaScript ES6 代码片段集合。提供常用 JavaScript 代码片段，快速插入代码。
- IntelliSense for CSS class names in HTML：在 HTML 文件中提供 CSS 类名的自动补全。根据项目中的 CSS 文件，提供类名补全建议。
- Markdown All in One：Markdown 文件编辑的全能工具。提供 Markdown 语法高亮、预览、快捷键、TOC（目录生成）等多种功能，简化 Markdown 文档的编写和维护。

4. 设置和自定义

打开设置：通过 文件 > 首选项 > 设置 或快捷键 Ctrl + , 打开设置。
用户设置和工作区设置：用户设置全局生效，工作区设置只在当前项目生效。

一般下载插件或者界面化编辑设置时，会生成 setting.json 文件并包含响应配置项的属性和值，可以快捷键 Ctrl + , 打开设置后，点击如下右侧图标：

请添加图片描述

setting.json 文件示例：

{
    "workbench.colorTheme": "Default Light+",
    "editor.minimap.enabled": false,
    "tabnine.experimentalAutoImports": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "gitlens.views.branches.branches.layout": "list",
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.formatOnSave": true,
    "github.copilot.editor.enableAutoCompletions": true
}

这份文件在你新设备安装VScode时想要直接复用配置时很有用。毕竟在A公司你只能用A公司的账户，换了B公司就不能通过登录来同步配置了。

workbench.colorTheme

描述：设置 VS Code 的主题。
值：“Default Light+” 使用默认的亮色主题。

editor.minimap.enabled

描述：是否启用编辑器中的缩略图（minimap）。
值：false 禁用缩略图。

tabnine.experimentalAutoImports

描述：启用 Tabnine 的实验性自动导入功能。
值：true 启用此功能。

editor.defaultFormatter

描述：设置默认的代码格式化工具。
值：“dbaeumer.vscode-eslint” 使用 ESLint 作为默认格式化工具。

eslint.alwaysShowStatus

描述：总是在底部状态栏显示 ESLint 的状态。
值：true 启用此功能。

eslint.format.enable

描述：启用 ESLint 的格式化功能。
值：true 启用此功能。

editor.tabSize

描述：设置编辑器中的 tab 宽度。
值：2 将 tab 宽度设置为 2 个空格。

git.confirmSync

描述：在同步 Git 仓库之前是否确认。
值：false 禁用确认对话框，直接同步。

explorer.confirmDelete

描述：在删除文件之前是否确认。
值：false 禁用确认对话框，直接删除。

explorer.confirmDragAndDrop

描述：在文件拖放操作之前是否确认。
值：false 禁用确认对话框，直接拖放。

gitlens.views.branches.branches.layout:

描述：设置 GitLens 插件中分支视图的布局。
值：“list” 将分支视图设置为列表布局。

diffEditor.ignoreTrimWhitespace

描述：是否在比较差异时忽略行尾空格。
值：false 不忽略行尾空格。

editor.formatOnSave

描述：在保存文件时自动格式化代码。
值：true 启用此功能。

github.copilot.editor.enableAutoCompletions

描述：启用 GitHub Copilot 的自动补全功能。
值：true 启用此功能。

二、常用界面功能和快捷操作（重点）

常用界面功能

编辑器区域-右上角点击如下图标即可拆分编辑器

请添加图片描述

编辑器区域-右上角点击如下图标即可查看上一次/下一次commit变更
编辑器区域右上角点击如下图标即可选择

GitLens 插件支持的能力

Toogle file Blame：显示当前文件每行的最新提交者和提交信息。
Toogle File Heatmap：显示文件的热力图，突出显示最近更改过的代码行。
Toogle File Changes：显示当前文件的所有更改记录。

文件资源管理器-源代码管理右侧图标可以选择“以树形式查看”，可以更清晰地知道变更文件所处位置

请添加图片描述

文件资源管理器-在指定文件点击右键-open file history，可查看历史变更记录

请添加图片描述

文件资源管理器-对指定文件a点击右键选择“以进行比较”，然后对指定文件b点击右键选择“与已选项目进行比较”，即可查看两个文件内容差异
活动栏-源代码管理-底部支持 commits、stashes 快速查看

快捷操作

打开命令面板

Ctrl + Shift + P

不记得某些操作的快捷键，可以使用该方式访问

请添加图片描述

打开底部面板（含终端）

command+J

请添加图片描述

选择并打开文件

command + P

文件内编辑

command + F：当前文件内查找。若希望全局搜索，可 command + Shift + F

command + option + F：当前文件内替换

多个编辑窗口

**command+**：拆分编辑器
Cmd + 1, Cmd + 2, Cmd + 3：直接将焦点移动到相应的编辑器组
Cmd + K Cmd + Left 和 Cmd + K Cmd + Right：在编辑器组之间循环移动光标
command+option+左右方向键：移动光标在控制台/编辑器之间移动