Visual Studio Code插件
VSCode 插件
前端相关插件
Vue 插件
Vetur
VUE 是时下最流行的 js 框架之一，很多公司都会选择基于 VUE 来构建产品，Vetur 对 VUE 提供了很好的语言支持。
可识别 .vue 文件
没有安装该插件之前之前编写后缀名为 .vue 的文件时代码是白色的
安装插件后编写 vue 文件输入 s，按 Tab 键就可以自动补全模版。
|  |
Vscode-element-helper
使用 element-ui 库的可以安装这个插件，编写标签时自动提示 element 标签名称。
|  |
Open-in-browser 在浏览器中查看
VS Code 没有提供直接在浏览器中运行程序的内置功能，所以我们需要安装此插件，在浏览器中查看我们的程序运行效果。
|  |
Live Server 实时预览
安装这个插件之后，我们在编辑器中修改代码，按 Ctrl+S 保存，修改效果就会实时同步，显示在浏览器中，再不用手动刷新。
|  |
HTML Preview（George Oliveira）
预览 html
安装好之后，fn+f 1 打开菜单，输入 html: ，即可看到所有可用命令。也可以直接在 html 文件上右键，也会有 open preview 和 show in browser 命令
- Open Preview
- Open Preview to the side
- Open Locked Preview to the Side
Auto Close Tag 自动闭合标签
输入标签名称的时候自动生成闭合标签，特别方便。
|  |
|  |
Auto Rename Tag 尾部闭合标签同步修改
自动检测配对标签，同步修改。
|  |
|  |
Improt Cost 成本提示
这个插件可以在你导入工具包的时候提示这个包的体积，如果体积过大就需要考虑压缩包，为后期上线优化做准备。
|  |
|  |
Version Lens 工具包版本信息
在 package.json 中显示你下载安装的 npm 工具包的版本信息，同时会告诉你当前包的最新版本。
|  |
使用：在 package.json 的右上角点击 V 显示依赖信息
|  |
Remote - SSH
- CTRL+SHIFT+P，
remote-ssh:open ssh configuration file…
|  |
- 配置 SSH
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host tencentClound
HostName 43.159.135.247
User hacket
IdentityFile ~/.ssh/id_rsa
# 完整的.ssh/config配置
Include ~/.orbstack/ssh/config
Host github.com
User git
Hostname github.com
IdentityFile ~/.ssh/id_rsa
Host gitee.com
User git
Hostname gitee.com
IdentityFile ~/.ssh/id_ed25519_gitee
Host gitlab.com
User git
Hostname gitlab.com
IdentityFile ~/.ssh/id_ed25519
Host tencentClound
HostName 43.159.135.247
User hacket
IdentityFile ~/.ssh/id_rsa
config 文件中，包括三行：
- 服务器名称
- IP 地址
- 用户名
- 连接：
remote-ssh:connect to host
|  |
vscode-icons 文件类型图标
此插件可以帮助我们根据不同的文件类型生成对应的图标，这样我们在侧边栏查看文件列表的时候直接通过图标就可以区分文件类型。
|  |
使用 mac 的小伙伴可以选择下载 Vscode-icons-mac，基本图标与 Vscode-icons 类似，就是文件夹采用的是 mac 风格。
|  |
Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号
对配对的括号进行着色，方便区分，未安装该插件之前括号统一都是白色的。
|  |
|  |
Highlight Matching Tag 高亮显示匹配标签
这个插件自动帮我们将选中的匹配标签高亮显示，再也不用费劲查找了。
|  |
TODO Highlight 高亮
如果我们在编写代码时想在某个地方做一个标记，后续再来完善或者修改里面的内容，可以利用此插件高亮显示，之后可以帮助我们快速定位到需要修改的代码行。
|  |
|  |
Code Spell Checker 单词拼写检查
自动识别单词拼写错误并且给出修改建议。
|  |
|  |
Code Runner 运行选中代码段
如果你需要学习或者接触各种各样的开发语言，那么 Code Runner 插件可以让你不用搭建各种语言的开发环境，直接通过此插件就可以直接运行对应语言的代码，非常适合学习或测试各种开发语言，使用方式直接右键选择 Run Code，支持大量语言，包括 Node。
|  |
如果是 C/C++ 的话，默认是 G++，自己配置的就会无效
|  |
Bookmarks 书签
对代码进行书签标记，通过快捷键实现快速跳转到书签位置。
|  |
- 添加书签
|  |
Ctrl+Shift+P，输入bookmark列举出所有的 bookmark 功能
Git
GitLens 查看 Git 信息
将光标移到代码行上，即可显示当前行最近的 commit 信息和作者
|  |
⚠️upload failed, check dev console
GitHub Repositories
| 本地查看 Github 仓库源码  |
Draw. Io Integration
画图用的
新增 xxx.drawio 文件就可以用了
Error Lens
语法错误提示
Settings Sync VSCode 设置同步到 Gist
Settings Sync VSCode 设置同步到 Gist插件过时了，用官方的：[[#VSCode 官方 Setting Sync]]
其他
WakaTime 计算代码工作量，时间
这是一款时间记录工具，它可以帮助你在 vs code 中记录有效的编程的时间。