Visual Studio 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

设置

终端的默认目录

打开您的项目文件夹或子目录以在 Visual Studio Code 中加载它。
打开命令面板（Ctrl+Shift+P 或者在 macOS 上是 Command+Shift+P）。
输入并选择 "Preferences: Open Workspace Settings" 以打开工作区设置。
搜索terminal.integrated.cwd，设置为项目子目录/ 或文本配置。

{
    "terminal.integrated.cwd": "/your/subdirectory/path"
}

@@ 第234行： / 第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>
 ==插件==
@@ 第261行： / 第266行： @@
 |Microsoft
 |
+|
+|-
+|SQLite Viewer
+|Florian Klampfer qwtel.com
 |
 |
@@ 第274行： / 第283行： @@
 |同步本地目录和远程目录
 |
+|
+|-
+|Draw.io Integration
+|Henning Dieterichs
+|集成Draw.io插件，可以使用.drawio.svg文件等文件放入markdown文件，又可以直接编辑。
 |
 |}
@@ 第306行： / 第320行： @@
 }}
+== 设置 ==
+=== 终端的默认目录 ===
+* 打开您的项目文件夹或子目录以在 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>
 ==资源==