Visual Studio Code:修订间差异
无编辑摘要 |
(→技巧) |
||
(未显示同一用户的11个中间版本) | |||
第15行: | 第15行: | ||
==基础知识== | ==基础知识== | ||
=== 打开面板 === | |||
== | |||
{| class="wikitable" style="width: 100%; | {| class="wikitable" style="width: 100%; | ||
! 名称 | ! 名称 | ||
第23行: | 第22行: | ||
|- | |- | ||
| 命令面板 | | 命令面板 | ||
| <code> | | <code>Ctrl+Shift+P</code> <br /><code>F1</code> | ||
| | | | ||
|- | |- | ||
| 快速打开 | |||
| <code>Ctrl+P</code> | |||
| 搜索文件,最近文件,打开文件 | |||
|- | |||
| 新窗口 | |||
| <code>Ctrl+Shift+N</code> | |||
| 开启一个新的VScode窗口。关闭窗口可以用右上角x图标,也可以<code>Ctrl+Shift+W</code> | |||
|- | |||
| 扩展 Extensions | |||
| <code>Ctrl+Shift+X</code> | |||
| 也可以点击界面左侧Extensions图标打开 | |||
|- | |||
| 集成终端 Integrated Terminal | |||
| <code>Ctrl+`</code> <br /><code>Ctrl+Shift+`</code> | |||
| <code>Ctrl+Shift+`</code>是开启一个新终端。 <br /><br />在终端可以使用:<br /><code>Shift+PgUp/PgDn</code> 上下翻页 <br /><code>Ctrl+Home/End</code> 滚动到顶部或底部 | |||
|- | |||
| 用户设置 User Settings | |||
| <code>Ctrl+,</code> | |||
| | | | ||
| | |- | ||
| 快捷键设置 | |||
| <code>Ctrl+K Ctrl+S</code> | |||
| 查看和设置快捷键 | |||
|} | |||
{{了解更多 | |||
|[https://code.visualstudio.com/docs/getstarted/tips-and-tricks VS Code 文档:提示和技巧] | |||
}} | |||
=== 文本编辑 === | |||
{| class="wikitable" style="width: 100%; | |||
! 名称 | |||
! 快捷键 | |||
! 描述 | |||
|- | |||
| 剪切行 | |||
| <code>Ctrl+X</code> | |||
| 当不选择任何字符,剪切光标所在行 | |||
|- | |||
| 复制行 | |||
| <code>Ctrl+C</code> | |||
| 当不选择任何字符,复制光标所在行 | |||
|- | |||
| 向上移动行 <br />向下移动行 | |||
| <code>Alt+↑</code><br /><code>Alt+↓</code> | |||
| | |||
|- | |||
| 向上复制粘贴行 <br />向下复制粘贴行 | |||
| <code>Shift+Alt+↑</code> <br /><code>Shift+Alt+↓</code> | |||
| | |||
|- | |||
| 删除行 | |||
| <code>Ctrl+Shift+K</code> | |||
| | |||
|- | |||
| 光标上方插入行 <br />光标下方插入行 | |||
| <code>Ctrl+Enter</code> <br /><code>Ctrl+Shift+Enter</code> | |||
| | |||
|- | |||
| 跳转到匹配的括号 | |||
| <code>Ctrl+Shift+\</code> | |||
| | |||
|- | |||
| 行缩进 <br />行减少缩进 | |||
| <code>Ctrl+]</code> <br /><code>Ctrl+[</code> | |||
| | |||
|- | |||
| 光标移动到行首 <br />光标移动到行尾 | |||
| <code>Home</code> <br /><code>End</code> | |||
| | | | ||
|- | |- | ||
| 光标移动到文档开头 <br />光标移动到文档末尾 | |||
| <code>Ctrl + Home</code> <br /><code>Ctrl + End</code> | |||
| | |||
|- | |||
| 显示滚动上移 <br />显示滚动下移 | |||
| <code>Ctrl+↑</code> <br /><code>Ctrl+↓</code> | |||
| 光标不会移动,只移动文档显示界面 | |||
|- | |||
| 显示向上翻页 <br />显示向下翻页 | |||
| <code>Alt+PgUp</code> <br /><code>Alt+PgDn</code> | |||
| | |||
|- | |||
| 折叠代码块 <br />展开代码块 | |||
| <code>Ctrl+Shift+[</code> <br /> <code>Ctrl+Shift+]</code> | |||
| | |||
|- | |||
| 折叠代码块(包括子代码块) <br />展开代码块(包括子代码块) | |||
| <code>Ctrl+K Ctrl+[</code> <br /><code>Ctrl+K Ctrl+]</code> | |||
| | |||
|- | |||
| 折叠所有代码块 <br />展开所有代码块 | |||
| <code>Ctrl+K Ctrl+0</code> <br /><code>Ctrl+K Ctrl+J</code> | |||
| 其中0是数字零 | |||
|- | |||
| 添加注释行 <br />取消注释行 | |||
| <code>Ctrl+K Ctrl+C</code> <br /><code>Ctrl+K Ctrl+U</code> | |||
| | |||
|- | |||
| 添加注释行或取消注释行 | |||
| <code>Ctrl+/</code> | |||
| | |||
|- | |||
| 添加注释块或取消注释块 | |||
| <code>Shift+Alt+A</code> | |||
| | | | ||
| | |- | ||
| 自动换行 | |||
| <code>Alt+Z</code> | |||
| | | | ||
|- | |- | ||
| 行跳转 | | 行跳转 | ||
| <code>Ctrl+g</code>输入行号 | | <code>Ctrl+g</code> 输入行号 | ||
| | | | ||
|} | |||
{{了解更多 | |||
|[https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_editing-hacks VS Code 文档:提示和技巧/编辑技巧] | |||
}} | |||
=== 代码辅助 === | |||
{| class="wikitable" style="width: 100%; | |||
! 名称 | |||
! 快捷键 | |||
! 描述 | |||
|- | |||
| 提示 | |||
| <code>Ctrl+I</code> <br /><code>Ctrl+空格</code> | |||
| 其中I是字母。需要插件如IntelliCode、Pylance等 | |||
|- | |- | ||
| 参数提示 | |||
| <code>Ctrl+Shift+空格</code> | |||
| | | | ||
|- | |||
| 转到定义 <br />显示定义 | |||
| <code>F12</code> <br /><code>Alt+F12</code> | |||
| 也可通过光标放到函数、变量、类名上,右键->Go to Definition或右键->Peek->Peek Definition。 | |||
|- | |||
| 显示引用 | |||
| <code>Shift+F12</code> | |||
| 也可通过光标放到函数、变量、类名上,右键->Go to Reference或右键->Peek->Peek Reference。 | |||
|- | |||
| 文档代码格式化 | |||
| <code>Alt+Shift+F</code> | |||
| | |||
|- | |||
| 选中代码格式化 | |||
|<code>Ctrl+K Ctrl+F</code> | |||
| | |||
|- | |||
| 重命名符号名 | |||
| <code>F12</code> | |||
| 在某个变量或函数定义时函数名上按F2重命名,文档中其他使用的名称会一起改变。 | |||
|- | |||
| 改变文档语言 | |||
| <code>Ctrl+K M</code> | |||
| | | | ||
|} | |||
{{了解更多 | |||
|[https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_intellisense VS Code 文档:提示和技巧/智能感知] | |||
}} | |||
=== 查找替换 === | |||
=== 调试 === | |||
{| class="wikitable" style="width: 100%; | |||
! 名称 | |||
! 快捷键 | |||
! 描述 | |||
|- | |||
| 断点 | |||
| <code>F9</code> | |||
| 也可以在代码行号前面悬停点击红点添加断点。 | |||
|- | |||
| 运行调试或继续 | |||
| <code>F5</code> | |||
| | | | ||
|- | |- | ||
| 停止调试 | |||
| <code>Shift+F5</code> | |||
| | | | ||
|- | |||
| 单步执行 Stop into | |||
| <code>F11</code> | |||
| 添加断点后,运行调试,在断点处按一下执行一行。 | |||
|- | |||
| | |||
| | |||
| | | | ||
|} | |||
=== 显示 === | |||
{| class="wikitable" style="width: 100%; | |||
! 名称 | |||
! 快捷键 | |||
! 描述 | |||
|- | |||
| 隐藏或展开侧边栏 <br />Toggle Sidebar | |||
| <code>Ctrl+B</code> | |||
| | |||
|- | |||
| 隐藏或展开底部面板 <br />Toggle Panel | |||
| <code>Ctrl+J</code> | |||
| | |||
|- | |||
| 全屏免打扰模式 <br />Zen mode | |||
| <code>Ctrl+K Z</code> | |||
| | | | ||
|- | |- | ||
第50行: | 第234行: | ||
| | | | ||
|} | |} | ||
==技巧== | |||
HTML中代码块增加外部元素。 | |||
* 使用<code>ctrl+shift+p</code>搜索<code>wrap</code>,会显示筛选的<code>Emmet: Wrap with Abbreviation</code> | |||
* 点击右边设置按钮,添加快捷键<code>alt+shift+w</code> | |||
* 使用:点击一下代码块开始的标签,按快捷键,弹出框中输入如<code>div.table-responsive</code> | |||
==插件== | ==插件== | ||
第55行: | 第244行: | ||
===常用插件=== | ===常用插件=== | ||
{| class="wikitable" style="width: 100%; | |||
! 插件 | |||
! 作者 | |||
! 功能 | |||
! 描述 | |||
! 网站 | |||
|- | |||
|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 === | |||
== | ==== 相关插件 ==== | ||
{| class="wikitable" style="width: 100%; | |||
! 插件 | |||
! 作者 | |||
! 功能 | |||
! 描述 | |||
! 网站 | |||
|- | |||
| IntelliCode | |||
| 微软 | |||
| AI辅助开发 | |||
| 多语言支持,代码提示补全,使用示例 | |||
|[https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode VS Code 市场] [https://visualstudio.microsoft.com/zh-hans/services/intellicode/ IntelliCode 官网] | |||
|- | |||
| Pylance | |||
| 微软 | |||
| 代码辅助 | |||
| 代码提示补全,有时加载慢,要重启VS Code | |||
| [https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance VS Code 市场] | |||
|} | |||
{{了解更多 | |||
|[https://code.visualstudio.com/docs/languages/python VS Code 文档:语言/Python] | |||
|[https://code.visualstudio.com/docs/python/python-tutorial VS Code 文档:Python教程] | |||
}} | |||
== 设置 == | |||
=== 终端的默认目录 === | |||
* 打开您的项目文件夹或子目录以在 Visual Studio Code 中加载它。 | |||
* 打开命令面板(Ctrl+Shift+P 或者在 macOS 上是 Command+Shift+P)。 | |||
* 输入并选择 "Preferences: Open Workspace Settings" 以打开工作区设置。 | |||
* 搜索<code>terminal.integrated.cwd</code>,设置为<code>项目子目录/</code> 或 文本配置。 | |||
<syntaxhighlight lang="json" > | |||
{ | |||
"terminal.integrated.cwd": "/your/subdirectory/path" | |||
} | |||
</syntaxhighlight> | |||
==资源== | ==资源== | ||
第65行: | 第336行: | ||
* [https://code.visualstudio.com/ VS Code 官网] | * [https://code.visualstudio.com/ VS Code 官网] | ||
* [https://code.visualstudio.com/docs VS Code 文档] | * [https://code.visualstudio.com/docs VS Code 文档] | ||
* [https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_keyboard-reference-sheets VS Code 快捷键表格] | |||
===相关教程=== | ===相关教程=== |
2024年5月12日 (日) 09:52的最新版本
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"
}