VS Code 基础入门使用（配置）教程

一. 总体
- 1.1 安装插件
- 1.2 设置面板
- 1.3 快捷键
- - 1.3.1 常用快捷键
  - 1.3.2 修改快捷键
- 1.4. 利用Snippets设置超实用的代码块
- 1.5. 登录同步
二. python
三. 前端
四. markdown
- 1. 相关插件
- 2. 预览
五. LaTeX
六. 配置github
七. 配置ssh remote

deepin/UOS 安装完 vscode 后，win+E默认打开vscode解决方案：

xdg-mime default dde-file-manager.desktop inode/directory

设置文件自动保存：依次点击 File -> AutoSave

一. 总体

1.1 安装插件

打开插件面板，可以使用快捷键：Ctrl+Shift+X，或者点击左侧的插件面板：

常用的通用插件有：

插件	作用
Bracket Pair Colorizer	给不同的括号换上了不同的颜色
Path Autocomplete	路径自动填充
Code Spell Checker	英语拼写检查
polacode	选中代码生成代码图片. 按 `F1` 输入 `polacode` 打开
Chinese (Simplified) Language Pack for Visual Studio Code	汉化
Better Comments	提高注释可读性。在注释中最前面加入[ `*` , `!` , `?` , `todo` , `//` ]，注释将以不同颜色或样式显示
Todo Tree	在左侧添加了TODO列表，注释中所有的 `TODO` 将会以列表的形式列出来，并高亮显示，方便跳转查看
Remote Development	包含了如下插件：`Remote - SSH` :ssh远程控制；`Remote - Containers` :docker控制；`Remote - WSL` 控制Windows Subsystem for Linux（wsl）。也可以单独搜索安装这些插件
Settings Sync	同步你的vscode设置，包括setting文件，插件设置等，不过你要先有github的账户
`Draw.io Integration`	绘画流程图。在vscode中创建文件后缀为 `.drawio` ，打开即可编辑。按 `F1` ，输入 `File: reopen with` ，选择文本方式，即可以xml方式打开编辑
Office Viewer	在 vs code 中打开`.xls`, `.xlsx`, `.csv`, `.pdf`, `.md` 等格式
Edit csv	CSV编辑器
vscode-icons	拓展文件图标
vscode-icons-mac	将vs code图标变为苹果电脑经典图标
filesize	在左下角显示文件大小
codelf	网络查询变量命名，供变量命名参考

1.2 设置面板

打开设置面板，可以使用快捷键：Ctrl+，，或者点击左侧的设置按钮：

一些常用的设置：

设置选项	实现的功能
Files: Auto Guess Encoding–>true	自动判断文件编码
editor.acceptSuggestionOnEnter–>off	关闭回车自动补全
editor.tabCompletion–>on	按tab键自动补全，一直按一直切换
editor.fontSize–>16	更改字体为16
editor.formatOnSave–>true	保存则代码格式化
editor.formatOnPaste–>true	复制代码格式化
editor.formatOnType–>true	回车则代码格式化
deepin/UOS系统去掉顶端白色区域	`Window: Title Bar Style` --> custom

1.3 快捷键

1.3.1 常用快捷键

快捷键	作用
alt+shift+鼠标左键	列选择
tab	代码自动补全
ctrl+shift+N	新建窗口
Ctrl+Shift+W	关闭窗口
ctrl+N	新建文件
Ctrl+\（也可以按住Ctrl鼠标点击Explorer里的文件名）	切出一个新的编辑器
Ctrl+W	关闭编辑器窗口
代码
alt+shift+enter	格式化文档
ctrl+/	注释
Ctrl+[， Ctrl+]	代码行缩进
Ctrl+Shift+[， Ctrl+Shift+]	折叠打开代码块
复制粘贴，如果不选中，默认复制或剪切一整行	Ctrl+C Ctrl+V
Shift+Alt+F，或Ctrl+Shift+P后输入format code	代码格式化
Ctrl+Enter	在当前行下边插入一行
Ctrl+Shift+Enter	在当前行上方插入一行
查找替换
Ctrl+F	查找
Ctrl+H	查找替换
Ctrl+Shift+F	整个文件夹中查找
显示
F11	全屏
`Ctrl` + `=` / `Ctrl` + `-`	放大/缩小
Ctrl+B	侧边栏显/隐
保存/另存为	Ctrl+S/Ctrl+Shift+S

1.3.2 修改快捷键

首先，进入快捷键设置界面：

在搜索框中直接输入快捷键进行搜索，在keybingding中双击需要修改的快捷键，按键盘直接更改快捷键。

1.4. 利用Snippets设置超实用的代码块

设置细节可参考：

官方文档：https://code.visualstudio.com/docs/editor/userdefinedsnippets
CSDN 文章：https://blog.csdn.net/weixin_34133829/article/details/93169471

例如给python设置注释快捷键：

依次点击：File > Preferences (在macOS上为：Code > Preferences ) ，然后选择要设置的语言，可以直接输入语言名称筛选。如果要让所有语言都适用，可以选择 New Global Snippets file 。

例如，我们要设置Python注释，当输入annotation时，会出现预设的注释。语言选择Python，然后将下面的格式输入其中：

 "annotation": {"prefix": "annotation","body": ["# <<<============== $1 ==============>>>","$2"],"description": "annotation for python"}

输入预设的 annotation ，可以发现已经能够智能提示。

按 Tab 键自动补全，即可生成预设的注释：

1.5. 登录同步

VS Code 可以登录账号，同步设置。现在支持微软账号和GitHub账号。登陆方式如下：

在VS Code左下角，有个登陆账户入口。点击，选择 打开设置同步

然后，可以选择需要同步的一些选项，点击右上边的 登陆并打开

可以选择使用 微软账号 和 Github 账号进行登陆。

二. python

请查看专栏文章：VS Code配置使用 Python

三. 前端

前端开发常用的插件：

插件	功能
open in brower(TechER version)	(Alt+B打开浏览器)
live HTML Previewer	F1，输入show side view。或者ctrl+Q S
VS Color Picker	F1，输入VS Color Picker
vs code内置了emmet	VsCode中使用Emmet神器快速编写HTML代码、官方文档

四. markdown

1. 相关插件

markdown目前有很多相关插件，选择其中一些需要的即可。

插件	功能
markdownlint	markdown语言分析、样式检查
Markdown Extended	使得markdown支持常用快捷键、表格增删与格式化、输出格式设置等
Markdown Shortcuts	使得markdown支持常用快捷键
Markdown All in One	常用快捷键、目录、自动补全
Markdown PDF	将markdown转化为pdf
Markdown Preview Enhanced	markdown预览
Markdown TOC	强大的目录功能
Markdown Table Prettifier	使得表格更适合阅读
Markdown Emoji	使得markdown支持github `:emoji:` 表情
markdown-formatter	提供了相对统一的格式和一些快捷功能.用法简绍

2. 预览

当打开以 .md 为后缀的文件，或者切换代码语言为 Markdown 右上角会出现一个预览按钮。

可以通过点击此按钮，或者按快捷键 ctrl + shift + v 实现markdown的预览。

五. LaTeX

请查看专栏文章：VS Code配置使用 LaTeX

六. 配置github

请查看专栏文章：vscode中使用GitHub

七. 配置ssh remote

请查看专栏文章：Vs Code 配置使用 ssh remote