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[此插件已废弃，微软收编，现vscode内置] 给不同的括号换上了不同的颜色
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 csvCSV编辑器
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设置超实用的代码块

设置细节可参考：

  1. 官方文档：https://code.visualstudio/docs/editor/userdefinedsnippets

  2. CSDN 文章：https://blog.csdn/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 PreviewerF1，输入show side view。或者ctrl+Q S
VS Color PickerF1，输入VS Color Picker
vs code内置了emmetVsCode中使用Emmet神器快速编写HTML代码、官方文档

四. markdown

1. 相关插件

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

插件功能
Markdown Preview Enhanced更好的markdown预览
markdownlintmarkdown语言分析、样式检查
Markdown Extended使得markdown支持常用快捷键、表格增删与格式化、输出格式设置等
Markdown Shortcuts使得markdown支持常用快捷键
Markdown All in One常用快捷键、目录、自动补全
Markdown PDF将markdown转化为pdf
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

更多推荐

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