Visual Studio Code
Visual Studio Code，简称VS Code，是一个由微软开发，同时支持Windows 、 Linux和macOS等操作系统的免费开源代码编辑器。它支持测试，并内置了 Git 版本控制功能，同时也具有开发环境功能，例如代码补全、代码片段和代码重构等。
VS Code 是基于 GitHub 的Electron开源框架开发。Electron 是一个基于 Chromium 的项目，可用于开发基于 Node.js 的本地应用程序。Visual Studio Code 使用 Blink 排版引擎渲染用户界面。
简介
时间轴
安装
VS Code由两种使用方式：
- 使用VS Code 客户端界面。
- 安装web版服务器，在浏览器中使用。
客户端
web服务器
基础知识
打开面板
| 名称 | 快捷键 | 描述 |
|---|---|---|
| 命令面板 | Ctrl+Shift+P F1
|
|
| 快速打开 | Ctrl+P
|
搜索文件，最近文件，打开文件 |
| 新窗口 | Ctrl+Shift+N
|
开启一个新的VScode窗口。关闭窗口可以用右上角x图标，也可以Ctrl+Shift+W
|
| 扩展 Extensions | Ctrl+Shift+X
|
也可以点击界面左侧Extensions图标打开 |
| 集成终端 Integrated Terminal | Ctrl+` Ctrl+Shift+`
|
Ctrl+Shift+`是开启一个新终端。 在终端可以使用： Shift+PgUp/PgDn 上下翻页 Ctrl+Home/End 滚动到顶部或底部
|
| 用户设置 User Settings | Ctrl+,
|
|
| 快捷键设置 | Ctrl+K Ctrl+S
|
查看和设置快捷键 |
了解更多 >> VS Code 文档：提示和技巧
文本编辑
| 名称 | 快捷键 | 描述 |
|---|---|---|
| 剪切行 | Ctrl+X
|
当不选择任何字符，剪切光标所在行 |
| 复制行 | Ctrl+C
|
当不选择任何字符，复制光标所在行 |
| 向上移动行 向下移动行 |
Alt+↑Alt+↓
|
|
| 向上复制粘贴行 向下复制粘贴行 |
Shift+Alt+↑ Shift+Alt+↓
|
|
| 删除行 | Ctrl+Shift+K
|
|
| 光标上方插入行 光标下方插入行 |
Ctrl+Enter Ctrl+Shift+Enter
|
|
| 跳转到匹配的括号 | Ctrl+Shift+\
|
|
| 行缩进 行减少缩进 |
Ctrl+] Ctrl+[
|
|
| 光标移动到行首 光标移动到行尾 |
Home End
|
|
| 光标移动到文档开头 光标移动到文档末尾 |
Ctrl + Home Ctrl + End
|
|
| 显示滚动上移 显示滚动下移 |
Ctrl+↑ Ctrl+↓
|
光标不会移动，只移动文档显示界面 |
| 显示向上翻页 显示向下翻页 |
Alt+PgUp Alt+PgDn
|
|
| 折叠代码块 展开代码块 |
Ctrl+Shift+[ Ctrl+Shift+]
|
|
| 折叠代码块（包括子代码块） 展开代码块（包括子代码块） |
Ctrl+K Ctrl+[ Ctrl+K Ctrl+]
|
|
| 折叠所有代码块 展开所有代码块 |
Ctrl+K Ctrl+0 Ctrl+K Ctrl+J
|
其中0是数字零 |
| 添加注释行 取消注释行 |
Ctrl+K Ctrl+C Ctrl+K Ctrl+U
|
|
| 添加注释行或取消注释行 | Ctrl+/
|
|
| 添加注释块或取消注释块 | Shift+Alt+A
|
|
| 自动换行 | Alt+Z
|
|
| 行跳转 | Ctrl+g 输入行号
|
了解更多 >> VS Code 文档：提示和技巧/编辑技巧
代码辅助
| 名称 | 快捷键 | 描述 |
|---|---|---|
| 提示 | Ctrl+I Ctrl+空格
|
其中I是字母。需要插件如IntelliCode、Pylance等 |
| 参数提示 | Ctrl+Shift+空格
|
|
| 转到定义 显示定义 |
F12 Alt+F12
|
也可通过光标放到函数、变量、类名上，右键->Go to Definition或右键->Peek->Peek Definition。 |
| 显示引用 | Shift+F12
|
也可通过光标放到函数、变量、类名上，右键->Go to Reference或右键->Peek->Peek Reference。 |
| 文档代码格式化 | Alt+Shift+F
|
|
| 选中代码格式化 | Ctrl+K Ctrl+F
|
|
| 重命名符号名 | F12
|
在某个变量或函数定义时函数名上按F2重命名，文档中其他使用的名称会一起改变。 |
| 改变文档语言 | Ctrl+K M
|
了解更多 >> VS Code 文档：提示和技巧/智能感知
查找替换
调试
| 名称 | 快捷键 | 描述 |
|---|---|---|
| 断点 | F9
|
也可以在代码行号前面悬停点击红点添加断点。 |
| 运行调试或继续 | F5
|
|
| 停止调试 | Shift+F5
|
|
| 单步执行 Stop into | F11
|
添加断点后，运行调试，在断点处按一下执行一行。 |
显示
| 名称 | 快捷键 | 描述 |
|---|---|---|
| 隐藏或展开侧边栏 Toggle Sidebar |
Ctrl+B
|
|
| 隐藏或展开底部面板 Toggle Panel |
Ctrl+J
|
|
| 全屏免打扰模式 Zen mode |
Ctrl+K Z
|
|
技巧
HTML中代码块增加外部元素。
- 使用
ctrl+shift+p搜索wrap，会显示筛选的Emmet: Wrap with Abbreviation - 点击右边设置按钮，添加快捷键
alt+shift+w - 使用：点击一下代码块开始的标签，按快捷键，弹出框中输入如
div.table-responsive
插件
插件安装
常用插件
| 插件 | 作者 | 功能 | 描述 | 网站 |
|---|---|---|---|---|
| Remote - SSH | Microsoft | 远程开发环境 | 通过SSH连接到远程服务器，可以操作远程计算机的文件和文件夹、运行命令和扩展等。 | |
| Remote - Containers | Microsoft | 远程容器开发环境 | ||
| Docker | Microsoft | |||
| SQLite Viewer | Florian Klampfer qwtel.com | |||
| MySQL | cweijan | 数据库客户端 | 支持连接MySQL/MariaDB, PostgreSQL, SQLite, Redis and ElasticSearch数据库， | |
| SFTP | liximomo | 同步本地目录和远程目录 | ||
| Draw.io Integration | Henning Dieterichs | 集成Draw.io插件，可以使用.drawio.svg文件等文件放入markdown文件，又可以直接编辑。 |
编程语言
Python
相关插件
| 插件 | 作者 | 功能 | 描述 | 网站 |
|---|---|---|---|---|
| IntelliCode | 微软 | AI辅助开发 | 多语言支持，代码提示补全，使用示例 | VS Code 市场 IntelliCode 官网 |
| Pylance | 微软 | 代码辅助 | 代码提示补全，有时加载慢，要重启VS Code | VS Code 市场 |
设置
终端的默认目录
- 打开您的项目文件夹或子目录以在 Visual Studio Code 中加载它。
- 打开命令面板（Ctrl+Shift+P 或者在 macOS 上是 Command+Shift+P）。
- 输入并选择 "Preferences: Open Workspace Settings" 以打开工作区设置。
- 搜索
terminal.integrated.cwd，设置为项目子目录/或 文本配置。
{
"terminal.integrated.cwd": "/your/subdirectory/path"
}