//FIXME:我也不知道为啥， but it works only that way.
安装了插件 TODO Highlight之后，按住「Cmd + Shift + P」打开命令面板，输入「Todohighlist」，选择相关的命令，我们就可以看到一个 todoList 的清单。
12、WakaTime 【荐】
统计在 VS Code 里写代码的时间。统计效果如下：
13、Code Time
Code Time插件：记录编程时间，统计代码行数。
安装该插件后，VS Code 底部的状态栏右下角可以看到时间统计。点击那个位置之后，选择「Code Time Dashboard」，即可查看统计结果。
备注：团长试了一下这个 code time 插件，发现统计结果不是很准。
14、Markdown Preview Github Styling 【荐】
以 GitHub 风格预览 Markdown 样式，十分简洁优雅。就像下面这样，左侧书写 Markdown 文本，右侧预览 Markdown 的渲染效果：
15、Markdown Preview Enhanced
预览 Markdown 样式。
Markdown All in One
这个插件将帮助你更高效地在 Markdown 中编写文档。
16、Settings Sync
地址：https://github.com/shanalikhan/code-settings-sync
作用：多台设备之间，同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具。
同步的详细操作，下一段会讲。
另外，北京时间的2020年8月14日，微软发布 Visual Studio Code 1.48 稳定版。此版本原生支持用户同步 VS Code的配置，只需要登录微软账号或者 GitHub账号即可。
17、vscode-syncing
地址：https://github.com/nonoroazoro/vscode-syncing
作用：多台设备之间，同步 VS Code 配置。
18、Vetur
Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。
19、ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/react-router 的语法智能提示。
20、minapp：小程序支持
小程序开发必备插件。
21、Prettier：代码格式化
Prettier 是一个代码格式化工具，只关注格式化，但不具备校验功能。在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。
22、ESLint：代码格式校验
日常开发中，建议用可以用 Prettier 做代码格式化，然后用 eslint 做校验。
23、Beautify
代码格式化工具。
备注：相比之下，Prettier 是当前最流行的代码格式化工具，比 Beautify 用得更多。
24、JavaScript(ES6) code snippets
ES6 语法智能提示，支持快速输入。
25、Search node_modules 【荐】
node_modules模块里面的文件夹和模块实在是太多了，根本不好找。好在安装 Search node_modules 这个插件后，输入快捷键「Cmd + Shift + P」，然后输入 node_modules，在弹出的选项中选择 Search node_modules，即可搜索 node_modules 里的模块。
26、indent-rainbow：突出显示代码缩进
indent-rainbow插件：突出显示代码缩进。
安装完成后，效果如下图所示：
27、javascript console utils：快速打印 log 日志【荐】
安装这个插件后，当我们按住快捷键「Cmd + Shift + L」后，即可自动出现日志 console.log()。简直是日志党福音。
当我们选中某个变量 name，然后按住快捷键「Cmd + Shift + L」，即可自动出现这个变量的日志 console.log(name)。
其他的同类插件还有：Turbo Console Log。
不过，生产环境的代码，还是尽量少打日志比较好，避免出现一些异常。
编程有三等境界：
第三等境界是打日志，这是最简单、便捷的方式，略显低级，一般新手或资深程序员偷懒时会用。
第二等境界是断点调试，在前端、Java、PHP、iOS 开发时非常常用，通过断点调试可以很直观地跟踪代码执行逻辑、调用栈、变量等，是非常实用的技巧。
第一等境界是测试驱动开发，在写代码之前先写测试。与第二等的断点调试刚好相反，大部分人不是很习惯这种方式，但在国外开发者或者敏捷爱好者看来，这是最高效的开发方式，在保证代码质量、重构等方面非常有帮助，是现代编程开发必不可少的一部分。
28、Code Spell Checker：单词拼写错误检查
这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名。从此告别 Chinglish.
29、Local History 【荐】
维护文件的本地历史记录，强烈建议安装。代码意外丢失时，有时可以救命。
30、Polacode-2020：生成代码截图 【荐】
可以把代码片段保存成美观的图片，主题不同，代码的配色方案也不同，也也可以自定义设置图片的边框颜色、大小、阴影。
尤其是在我们做 PPT 分享时需要用到代码片段时，或者需要在网络上优雅地分享代码片段时，这一招很有用。
生成的效果如下：
其他同类插件：CodeSnap。我们也可以通过 https://carbon.now.sh/这个网站生成代码图片
有人可能会说：直接用 QQ 截图不行吗？可以是可以，但不够美观、不够干净。
31、Image Preview 【荐】
图片预览。鼠标移动到图片 url 上的时候，会自动显示图片的预览和图片尺寸。
32、Auto Close Tag、Auto Rename Tag
自动闭合标签、自动对标签重命名。
为注释添加更醒目、带分类的色彩。
34、CSS Peek
增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式。
35、Vue CSS Peek
CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。
36、Color Info
这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
37、RemoteHub
不要惊讶，RemoteHub 和 GitLens 是同一个作者开发出来的。
RemoteHub插件的作用是：可以在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地。
这个插件目前使用的人还不多，赶紧安装起来尝尝鲜吧。
38、Live Share：实时编码分享
Live Share这个神奇的插件是由微软官方出品，它的作用是：实时编码分享。也就是说，它可以实现你和你的同伴一起写代码。这绝对就是结对编程的神器啊。
安装方式：
打开插件管理，搜索“live share”，安装。安装后重启 VS Code，在左侧会多出一个按钮：
上图中，点击红框部分，登录后就可以分享你的工作空间了。
39、Import Cost
在项目开发过程中，我们会引入很多 npm 包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。Import Cost插件可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。
Paste JSON as Code
此插件可以将剪贴板中的 JSON 字符串转换成工作代码。支持多种语言。
七、无缝切换：VS Code 配置云同步
我们可以将配置云同步，这样的话，当我们换个电脑时，即可将配置一键同步到本地，就不需要重新安装插件了，也不需要重新配置软件。
下面讲的两个同步方法，都可以，看你自己需要。方法1是 VS Code自带的同步功能，操作简单。方法2 需要安装插件，支持更多的自定义配置。
方法1：使用 VS Code 自带的同步功能
1、配置同步：
（1）在菜单栏选择「 Code --> 首选项 --> 打开设置同步」：
（2）选择需要同步的配置：
（3）通过Microsoft或者GitHub账号登录。 上图中，点击“登录并打开”，然后弹出如下界面：
上图中，使用 微软账号或者 GitHub账号登录：
（4）同步完成后，菜单栏会显示“首先项同步已打开”，最左侧也会多出一个同步图标，如下图所示：
2、管理同步：
（1）点击菜单栏「Code --> 首选项 --> 设置同步已打开」，会弹出如下界面，进行相应的同步管理即可：
（2）换另外一个电脑时，登录相同的账号，即可完成同步。
参考链接：
VS Code原生的配置同步功能——Settings Sync
方法2：使用插件 settings-sync
使用方法2，我们还可以把配置分享其他用户，也可以把其他用户的配置给自己用。
1、配置同步：（将自己本地的配置云同步到 GitHub）
（1）安装插件 settings-sync。
（2）安装完插件后，在插件里使用 GitHub 账号登录。
（3）登录后在 vscode 的界面中，可以选择一个别人的 gist；也可以忽略掉，然后创建一个属于自己的 gist。
（4）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「更新/上传配置」，这样就可以把最新的配置上传到 GitHub。
2、管理同步：（换另外一个电脑时，从云端同步配置到本地）
（1）当我们换另外一台电脑时，可以先在 VS Code 中安装 settings-sync 插件。
（2）安装完插件后，在插件里使用 GitHub 账号登录。
（3）登录之后，插件的界面上，会自动出现之前的同步记录：
上图中，我们点击最新的那条记录，就可将云端的最新配置同步到本地：
如果你远程的配置没有成功同步到本地，那可能是网络的问题，此时，可以使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」，多试几次。
使用其他人的配置：
如果我们想使用别人的配置，首先需要对方提供给你 gist。具体步骤如下：
（1）安装插件 settings-sync。
（2）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」
（3）在弹出的界面中，选择「Download Public Gist」，然后输入别人分享给你的 gist。注意，这一步不需要登录 GitHub 账号。
八、常见主题插件
给你的 VS Code 换个皮肤吧，免费的那种。
Dracula Theme
Material Theme
Nebula Theme
One Dark Pro
One Monokai Theme
Monokai Pro
Snazzy Plus
Dainty
SynthWave '84
GitHub Plus Theme：白色主题
Horizon Theme：红色主题
如果你还有什么推荐的 VS Code 插件，欢迎留言。
大家完全不用担心这篇文章会过时，随着 VS Code 的版本更新和插件更新，本文也会随之更新。关于 VS Code 内容的后续更新，你可以关注我在 GitHub 上的前端入门项目，项目地址是：
https://github.com/qianguyihao/Web
一个超级详细和真诚的前端入门项目。
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
