查看“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服务器====

==基础知识==
=== 打开面板 ===
{| class="wikitable"  style="width: 100%;
! 名称
! 快捷键
! 描述
|-
| 命令面板
| <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> 输入行号
| 
|}
{{了解更多
|[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> 
| 
|- 
| 
|
| 
|}
==技巧==
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>

==插件==
===插件安装===

===常用插件===
{| 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>

==资源==
===官网===
* [https://code.visualstudio.com/ VS Code 官网]
* [https://code.visualstudio.com/docs VS Code 文档]
* [https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_keyboard-reference-sheets VS Code 快捷键表格]

===相关教程===
*[https://blog.csdn.net/maokelong95/article/details/88805589 CSDN：猫科龙 - 「VS Code」Visual Studio Code 菜鸟教程：从入门到精通]
*[https://vscode.cool/ vscode.cool：VS Code入门教程2020]

===相关文章===
* [https://zh.wikipedia.org/wiki/Visual_Studio_Code 维基百科：Visual Studio Code]
* [https://zhuanlan.zhihu.com/p/64505333 知乎：韩骏-VS Code Remote 发布！开启远程开发新时代]
* [https://zhuanlan.zhihu.com/p/90094288 知乎：韩骏-重磅！微软发布 Visual Studio Online：Web 版 VS Code + 云开发环境]

[[分类:编程工具]]