Visual Studio Code
(重定向自VS 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"
}