webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: VS Code 快捷键

Browse Source
This commit is contained in:
qianguyihao 2020-05-23 21:48:29 +08:00
parent 0a771bb724
commit cc41ddb71a
1 changed files with 230 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

281
00-前端工具/01-VS Code的使用.md
View File

@ -1,15 +1,21 @@
## 前言
> 本文的最新内容，更新于**2020-05-16**。大家完全不用担心这篇文章会过时，因为随着 VS Code 的版本更新和插件更新，本文也会随之更新。
> 本文的最新内容，更新于2020-05-23。大家完全不用担心这篇文章会过时，因为随着 VS Code 的版本更新和插件更新，本文也会随之更新。
> 本文的最新内容，也会在[GitHub](https://github.com/qianguyihao/Web/blob/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/01-VS%20Code%E7%9A%84%E4%BD%BF%E7%94%A8.md)上同步更新，欢迎 star。
VS Code 本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。
VS Code 软件本身是为前端同学量身定制的，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的代码编辑器。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。
写下这篇文章，是顺势而为。
如果你是做前端开发（JavaScript 编程语言为主），则完全可以将 VS Code 作为「**主力开发工具**」。这款软件是为前端同学量身定制的。但由于它实在是太好用了，越来越多的人正在使用它。
如果你是做其他语言方向的开发，并且不需要太复杂的集成开发环境，那么，你可以把 VS Code 作为「**代码编辑器**」来使用，纵享丝滑。
甚至是一些写作的同学，也把 VS Code 作为 markdown **写作工具**，毫无违和感。
退而求其次，即便你不在以上范畴，你还可以把 VS Code 当作**文本编辑器**来使用，完爆 Windows 系统自带的记事本。
## 一、VS Code 的介绍
VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。
@ -22,7 +28,7 @@ VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨
- **编辑器**：要相对轻量许多，侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。
需要注意的是，VS Code 的定位是`编辑器`，而非`IDE`。但 VS Code 又比一般的编辑器的功能要丰富许多。
需要注意的是，VS Code 的定位虽然是`编辑器`，而非`IDE`，但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解：VS Code的体量是介于编辑器和IDE之间。
### VS Code 的一些补充
@ -32,7 +38,7 @@ VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨
- VS Code 自带了 TypeScript 和 Node.js 的支持。也就是说，你在书写 JS 和 TS 时，是自带智能提示的。
- 有一点你可能不知道，VS Code 这个客户端软件是用 js 语言开发出来的（具体请自行查阅关键字`Electron`）。有句话说得好：能用 js 实现的功能，最终一定会用 js 实现。
- 有一点你可能不知道，VS Code 这个客户端软件是用 js 语言开发出来的（具体请自行查阅相关的开发框架 `Electron`）。有句话说得好：能用 js 实现的功能，最终一定会用 js 实现。
### 前端利器之争： VS Code 与 WebStorm
@ -40,7 +46,7 @@ VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨
- **哪个更酷**：显然 VS Code 更酷。
- **内存占用情况**：根据我的观察，VS Code是很占内存的（尤其是当你打开多个窗口的时候），但如果你的内存条够用的话，使用起来是不会有任何卡顿的感觉的。相比之下，IDEA 不仅非常占内存，而且还非常卡顿。
- **内存占用情况**：根据我的观察，VS Code 是很占内存的（尤其是当你打开多个窗口的时候），但如果你的内存条够用的话，使用起来是不会有任何卡顿的感觉的。相比之下，IntelliJ IDEA 不仅非常占内存，而且还非常卡顿。如果你想换个轻量级的、不占内存的编辑器，最好还是换成「Sublime Text」编辑器。
- **使用比例**：当然是 VS Code 更胜一筹。先不说别的，我就拿数据说话，我目前所在的前端团队有 100 人左右，绝大部分前端同学都在用 VS Code，妥妥的。
@ -60,94 +66,136 @@ VS Code 的安装很简单，直接去官网下载安装包，然后双击安装
VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。
掌握10%的内容，足矣应对90%的工作。熟练使用它们，你就已经很牛了。
任何工具，掌握 10%的技能，足矣应对 90%的工作。熟练使用这 10%，你的工具和你，就足矣露出锋芒。
### 移动光标
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| **Cmd + ←** | **Fn + ←** | 将光标定位到当前行的最左侧 | 很常用 |
| **Cmd + →**| **Fn + →** | 将光标定位到当前行的最右侧 | 很常用 |
| Cmd + ↑ | Ctrl + Home | 将光标定位到文章的第一行| |
| Cmd + ↓ | Ctrl + End | 将光标定位到文章的最后一行 | |
根据上面的快捷键，我们可以举一反三。补充如下：
- 「方向键」：在**单个字符**之间移动光标
- 「option + 左右方向键」：在**单词**之间移动光标（很常用）。注：Win 快捷键是「Ctrl + 左右方向键」。
- 「Cmd + 左右方向键」：在**整行**之间移动光标（很常用）。注：Win 的快捷键是「Fn + 左右方向键」
- 「`Cmd + Shift + \`」：在**代码块**之间移动光标。
### 删除操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| **option + Backspace** | **Ctrl + Backspace** | 删除光标之前的一个单词 | 英文有效，很常用 |
| option + delete | Ctrl + delete | 删除光标之后的一个单词 | |
| **Cmd + delete** | | 删除光标之前的整行内容 | 很常用 |
| Cmd + delete | | 删除光标之后的整行内容 | |
| Cmd + shift + K | Ctrl + Shift + K | 删除整行| 「Cmd + X」的作用是剪切，但也可以删除整行 |
备注：上面所讲到的移动光标、删除操作的快捷键，在其他编辑器里，也是同样的操作。
### 编辑操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| **Cmd + Enter** | Ctrl + Enter | 在当前行下面新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向下插入一行 |
| **Option + ↑** | Alt + ↑| 将代码向上移动 | 很常用 |
| **Option + ↓** | Alt + ↓| 将代码向下移动 | 很常用 |
| **Option + Shift + ↑** | Alt + Shift + ↑| 将代码向上复制 | 很常用 |
| **Option + Shift + ↓** | Alt + Shift + ↓| 将代码向下复制 | 很常用 |
### JS语言相关
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| Cmd + / | Ctrl + / | 添加单行注释 | 很常用 |
| **Option + Shift + F** | Alt + shift + F | 代码格式化 | 很常用 |
| Ctrl + J | | 将多行代码合并为一行 | Win 用户可在命令面板搜索”合并行“ |
| Cmd + | | | |
| Cmd + U | Ctrl + U | 将光标的移动回退到上一个位置 | 撤销光标的移动和选择 |
### 跳转操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| **Ctrl + Tab** | **Ctrl + Tab** | 在已经打开的文件之间进行跳转 | |
| **Cmd + P** | Ctrl + P | 在当前的项目工程里，**全局**搜索文件 | 很常用 |
| **Ctrl + G** | **Ctrl + G** | 跳转到指定行 | |
| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种**方法之间**进行跳转 | |
### 搜索
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
|Cmd + F|Ctrl + F|在当前文件中搜索，光标在搜索框里||
| **Cmd + G** |**F3**|在当前文件中搜索，光标仍停留在编辑器里| 很巧妙 |
|**Cmd + Shift + F**|Ctrl + Shift +F|全局搜索|很常用|
### 多光标的使用
**技巧1**：按住 「Option」键（windows 用户是按住「Alt」键） ，然后在页面中希望中现光标的位置点击鼠标。
**技巧2**：选中某个文本，然后反复按住快捷键「 Cmd + D 」键（windows 用户是按住「Ctrl + D」键）， 即可将全文中与光标当前所在位置的词相同的词逐一加入选择。
**技巧3**：选中一堆文本后，按住「Option + Shift + i」键（windows 用户是按住「Alt + Shift + I」键），既可在**每一行的末尾**都创建一个光标。
### 工作区快捷键
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| :------------------- | :----------------------- | :-------------------------------------------- | :------------------- |
| **Cmd + Shift + P** | **Ctrl + Shift + P**，F1 | 显示命令面板 | |
| **Cmd + B** | **Ctrl + B** | 显示/隐藏侧边栏 | 很实用 |
| | | | |
| `Cmd + \` | `Ctrl + \` | **创建多个编辑器** | 【重要】抄代码利器 |
| **Cmd + 1、2** | **Ctrl + 1、2** | 聚焦到第1、第2个编辑器 | 同上重要 |
| | | | |
| **cmd +/-** | **ctrl +/-** | 将工作区放大/缩小（包括代码字体、左侧导航栏） | 在投影仪场景经常用到 |
| **Cmd + B** | Ctrl + B | 显示/隐藏侧边栏 | 很实用 |
|`Cmd + \`|`Ctrl + \`|创建多个编辑器|比较实用|
| Cmd + J | Ctrl + J | 显示/隐藏控制台 | |
| | | | |
| **Cmd + Shift + N** | **Ctrl + Shift + N** | 重新开一个软件的窗口 | 很常用 |
| Cmd + Shift + W | Ctrl + Shift + W | 关闭软件的当前窗口 | |
| | | | |
| Cmd + N | Ctrl + N | 新建文件 | |
| Cmd + W | Ctrl + W | 关闭当前文件 | |
### 跳转操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :---------------------------- | :--------------------- | :----------------------------------- | :------------------- |
| Cmd + ` | | 在同一个软件的多个窗口之间切换 | |
| | | | |
| **Cmd + Option + 左右方向键** | Ctrl + Pagedown/Pageup | 在已经打开的文件之间进行**切换** | 非常实用 |
| Ctrl + Tab | Ctrl + Tab | 在已经打开的文件之间进行跳转 | 不如上面的快捷键实用 |
| Cmd + J | Ctrl + J | 显示/隐藏控制台 | |
| | | | |
| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种**方法之间**进行跳转 | |
| Ctrl + G | Ctrl + G | 跳转到指定行 | |
| `Cmd+Shift+\` | `Ctrl+Shift+\` | 跳转到匹配的括号 | |
### 移动光标
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :---------------------- | :-------------------- | :------------------------- | :--------- |
| 方向键 | 方向键 | 在**单个字符**之间移动光标 | 大家都知道 |
| **option + 左右方向键** | **Ctrl + 左右方向键** | 在**单词**之间移动光标 | 很常用 |
| **Cmd + 左右方向键** | **Fn + 左右方向键** | 在**整行**之间移动光标 | 很常用 |
| | | | |
| Cmd + ← | Fn + ←（或 Win + ←） | 将光标定位到当前行的最左侧 | 很常用 |
| Cmd + → | Fn + →（或 Win + →） | 将光标定位到当前行的最右侧 | 很常用 |
| Cmd + ↑ | Ctrl + Home | 将光标定位到文章的第一行 | |
| Cmd + ↓ | Ctrl + End | 将光标定位到文章的最后一行 | |
| | | | |
| Cmd + Shift + \ | | 在**代码块**之间移动光标 | |
### 编辑操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :--------------------- | :------------------ | :----------------------------------- | :------------------------------------- |
| **Cmd + Enter** | **Ctrl + Enter** | 在当前行的下方新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向下插入一行 |
| Cmd+Shift+Enter | Ctrl+Shift+Enter | 在当前行的上方新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向上插入一行 |
| | | | |
| **Option + ↑** | **Alt + ↑** | 将代码向上移动 | 很常用 |
| **Option + ↓** | **Alt + ↓** | 将代码向下移动 | 很常用 |
| | | | |
| Option + Shift + ↑ | Alt + Shift + ↑ | 将代码向上复制 | |
| **Option + Shift + ↓** | **Alt + Shift + ↓** | 将代码向下复制 | 写重复代码的利器 |
### 多光标编辑
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| ----------------------------- | -------------------------- | ------------------------------------ | ---- |
| **Cmd + Option + 上下键** | **Ctrl + Alt + 上下键** | 在连续的多列上，同时出现光标 | |
| **Option + 鼠标点击任意位置** | **Alt + 鼠标点击任意位置** | 在任意位置，同时出现光标 | |
| Option + Shift + 鼠标拖动 | Alt + Shift + 鼠标拖动 | 在选中区域的每一行末尾，出现光标 | |
| Cmd + Shift + L | Ctrl + Shift + L | 在选中文本的所有相同内容处，出现光标 | |
其他的多光标编辑操作：（很重要）
- 选中某个文本，然后反复按住快捷键「 **Cmd + D** 」键（windows 用户是按住「**Ctrl + D**」键）， 即可将全文中相同的词逐一加入选择。
- 选中一堆文本后，按住「**Option + Shift + i**」键（windows 用户是按住「**Alt + Shift + I**」键），既可在**每一行的末尾**都创建一个光标。
### 删除操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :--------------------- | :------------------- | :--------------------- | :---------------------------------------- |
| Cmd + shift + K | Ctrl + Shift + K | 删除整行 | 「Cmd + X」的作用是剪切，但也可以删除整行 |
| | | | |
| **option + Backspace** | **Ctrl + Backspace** | 删除光标之前的一个单词 | 英文有效，很常用 |
| option + delete | Ctrl + delete | 删除光标之后的一个单词 | |
| | | | |
| **Cmd + delete** | | 删除光标之前的整行内容 | 很常用 |
| Cmd + delete | | 删除光标之后的整行内容 | |
| | | | |
备注：上面所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器里，基本适用。
### 编程语言相关
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :--------------------- | :-------------- | :--------------------------- | :------------------------------- |
| Cmd + / | Ctrl + / | 添加单行注释 | 很常用 |
| **Option + Shift + F** | Alt + shift + F | 代码格式化 | 很常用 |
| **F2** | **F2** | 以重构的方式进行**重命名** | 改代码必备 |
| Ctrl + J | | 将多行代码合并为一行 | Win 用户可在命令面板搜索”合并行“ |
| Cmd + | | | |
| Cmd + U | Ctrl + U | 将光标的移动回退到上一个位置 | 撤销光标的移动和选择 |
### 搜索相关
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :------------------ | :------------------ | :------------------------------------- | :----- |
| **Cmd + Shift + F** | **Ctrl + Shift +F** | 全局搜索代码 | 很常用 |
| **Cmd + P** | **Ctrl + P** | 在当前的项目工程里，**全局**搜索文件 | |
| Cmd + F | Ctrl + F | 在当前文件中搜索，光标在搜索框里 | |
| **Cmd + G** | **F3** | 在当前文件中搜索，光标仍停留在编辑器里 | 很巧妙 |
### 自定义快捷键
@ -163,11 +211,14 @@ VS Code用得熟不熟，首先就看你是否会用快捷键。以下列出的
![](http://img.smyhvae.com/20190418_1738.png)
上图中，在展开的菜单中选择「键盘快捷方式」，就可以查看和修改所有的快捷键列表了：
![](http://img.smyhvae.com/20190418_1739_2.png)
### 快捷键参考链接
- 快捷键速查表[官方]：<https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf>
## 四、命令面板的使用
Mac 用户按住快捷键 `Cmd+Shift+P` （Windows 用户按住快捷键`Ctrl+Shift+P`），可以打开命令面板。效果如下：
@ -184,7 +235,6 @@ Mac用户按住快捷键 `Cmd+Shift+P` （Windows用户按住快捷键`Ctrl+Shif
当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。
### 快捷键设置
在命令面板输入“快捷键”，就可以进入快捷键的设置。
@ -322,7 +372,6 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
> 接下来，我们来讲一些更高级的配置。
### 12、文件对比
VS Code 默认支持**对比两个文件的内容**。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：
@ -393,7 +442,6 @@ VS Code 自带了 Git 版本管理，如下图所示：
![](http://img.smyhvae.com/20190418_1850.png)
上图中，我们可以在这里进行常见的 git 命令操作。如果你还不熟悉 **Git 版本管理**，先去补补课吧。
与此同时，我建议安装插件`GitLens`，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。
@ -414,7 +462,6 @@ VS Code 自带了 Git 版本管理，如下图所示：
![](http://img.smyhvae.com/20190418_2022.png)
那么，就可以创建多层子文件夹，效果如下：
![](http://img.smyhvae.com/20190418_2023.png)
@ -501,20 +548,16 @@ VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。
"tslintIntegration": true,
"insertSpaceBeforeFunctionParenthesis": false
}
```
上面的内容，是我自己的配置，你可以参考。
更多配置，可以参考官方文档：<https://prettier.io/docs/en/options.html>
### 文件传输：sftp
如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装`sftp`这个插件，很好用。在公司会经常用到。
步骤如下：
（1）安装插件`sftp`。
@ -550,12 +593,14 @@ VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。
"uploadOnSave": true, //监听保存并上传
"syncMode": "update",
"watcher": { //监听外部文件
"watcher": {
//监听外部文件
"files": false, //外部文件的绝对路径
"autoUpload": false,
"autoDelete": false
},
"ignore": [ //忽略项
"ignore": [
//忽略项
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store"
@ -567,8 +612,6 @@ VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。
我们还可以选择「右键 -> Diff with Remote」，就可以将本地的代码和 ftp 服务器上的代码做对比。
## 七、VS Code 配置云同步
我们可以将配置云同步，这样的话，当我们换个电脑时，即可将配置一键同步到本地，就不需要重新安装插件了，也不需要重新配置软件。
@ -599,9 +642,17 @@ VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。
![](http://img.smyhvae.com/20200521_1550.png)
如果你远程的配置没有成功同步到本地，那可能是网络的问题，此时，可以使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」，多试几次。
**使用其他人的配置**：
如果我们想使用别人的配置，首先需要对方提供给你 gist。具体步骤如下：
（1）安装插件 `settings-sync`。
（2）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」
（3）在弹出的界面中，选择「Download Public Gist」，然后输入别人分享给你的 gist。注意，这一步不需要登录 GitHub 账号。
## 八、VS Code 插件推荐
@ -615,8 +666,6 @@ VS Code 有一个很强大的功能就是支持插件扩展。
顺序越靠前，越实用。
### GitLens 【荐】
我强烈建议你安装插件`GitLens`，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。如果你不知道，那真是 out 了。
@ -633,21 +682,16 @@ GitLens 在 Git 管理上有很多强大的功能，比如：
- 甚至可以将两个 branch 分支进行整体的代码对比。这一点，简直是 GitLens 最强大的功能。当我们在不同分支 review 代码的时候，就可以用到这一招。
### Live Server 【荐】
在本地启动一个服务器，代码写完后可以实现「热更新」，实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。
使用方式：安装插件后，开始写代码；代码写完后，右键选择「Open with Live Server」。
### Chinese (Simplified) Language Pack for Visual Studio Code
让软件显示为简体中文语言。
### Bracket Pair Colorizer 2：突出显示成对的括号【荐】
`Bracket Pair Colorizer 2`插件：以不同颜色显示成对的括号，并用连线标注括号范围。
@ -664,7 +708,6 @@ GitLens 在 Git 管理上有很多强大的功能，比如：
安装`open in browser`插件后，在 HTML 文件中「右键选择 --> Open in Default Browser」，即可在浏览器中预览网页。
### highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】
VSCode 自带的高亮显示，实在是不够显眼。用插件支持一下吧。
@ -683,8 +726,6 @@ css 颜色管理。
工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager 插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。
### TODO Highlight
写代码过程中，突然发现一个 Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个 TODO 注释。比如：（注意，一定要写成大写`TODO`，而不是小写的`todo`）
@ -701,12 +742,10 @@ css 颜色管理。
安装了插件 `TODO Highlight`之后，按住「Cmd + Shift + P」打开命令面板，输入「Todohighlist」，选择相关的命令，我们就可以看到一个 todoList 的清单。
### WakaTime 【荐】
统计写代码的时间。
### Code Time
`Code Time`插件：记录编程时间，统计代码行数。
@ -715,7 +754,6 @@ css 颜色管理。
备注：团长试了一下这个 code time 插件，发现统计结果不是很准。
### Markdown Preview Github Styling 【荐】
以 GitHub 风格预览 Markdown 样式。
@ -724,7 +762,6 @@ css 颜色管理。
预览 Markdown 样式。
### Settings Sync
- 地址：<https://github.com/shanalikhan/code-settings-sync>
@ -777,17 +814,15 @@ css颜色高亮显示。
- [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
* Monokai Pro
- Monokai Pro
* Ayu
- Ayu
* [Snazzy Plus](https://marketplace.visualstudio.com/items?itemName=akarlsten.vscode-snazzy-akarlsten)
- [Snazzy Plus](https://marketplace.visualstudio.com/items?itemName=akarlsten.vscode-snazzy-akarlsten)
- [Dainty](https://marketplace.visualstudio.com/items?itemName=alexanderte.dainty-vscode)
- `SynthWave '84`
* [Dainty](https://marketplace.visualstudio.com/items?itemName=alexanderte.dainty-vscode)
* `SynthWave '84`
## 最后一段
@ -806,7 +841,3 @@ css颜色高亮显示。
- [https://segmentfault.com/a/1190000012811886](https://segmentfault.com/a/1190000012811886)
- [「Vscode」打造类 sublime 的高颜值编辑器](https://idoubi.cc/2019/07/08/vscode-sublime-theme/)