Visual Studio Code:修订间差异

无编辑摘要
 
(未显示同一用户的11个中间版本)
第15行: 第15行:


==基础知识==
==基础知识==
 
=== 打开面板 ===
==快捷键==
{| class="wikitable"  style="width: 100%;
{| class="wikitable"  style="width: 100%;
! 名称
! 名称
第23行: 第22行:
|-
|-
| 命令面板
| 命令面板
| <code>F1</code> <code>Ctrl+Shift+P</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,是一个由微软开发,同时支持WindowsLinuxmacOS等操作系统的免费开源代码编辑器。它支持测试,并内置了 Git 版本控制功能,同时也具有开发环境功能,例如代码补全、代码片段和代码重构等。

VS Code 是基于 GitHubElectron开源框架开发。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 市场


了解更多 >> VS Code 文档:语言/Python VS Code 文档:Python教程


设置

终端的默认目录

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

资源

官网

相关教程

相关文章