VS Code插件配置

常用 VS Code 插件：

Auto Import

有了这个插件，就不需要再手动引入文件了。如果是基于组件的项目，直接输入组件名插件会自动处理 imported。
** Add jsdoc comments **

这个插件可以生成代码注释。选中函数首行，按 CTRL + SHIFT + P，选择 Add Doc Comments。
ESDoc MDN

有时候，我们可能会忘了一些 API 的用法，这个插件就派上用场了。不用打开浏览器查找文档，直接输入

//mdn [object].[method];

js注释以分号结尾，自动生成文档栏
CSS Peek

它能够直接在上代码显示它的 CSS 样式。这对于那些历史项目很有用。
GitLens

GitLens 提高了 Git 的可能性。它能做的有很多，比如无缝浏览 Git 仓库，查看代码的版本、提交人等信息。
ESLint

这个插件给 VS Code 集成了 ESLint 来 lint 代码。需要在当前项目或者全局安装 ESLint 以最大发挥这个插件的特性。

当前项目安装 ESLint，运行

npm install eslint

或者，全局安装

npm install -g eslint

然后在当前项目中创建一个 .eslintrc 配置文件，运行

./node_modules/.bin/eslint --init

或者运行

eslint --init
** Debugger for Chrome **

这个插件可以直接在 Google Chrome 浏览器里调试 JavaScript 代码。
Google Fonts

使用这个扩展添加字体变得很简单。再也不需要再浏览器里搜索字体了。按 CTRL + SHIFT + P 搜索 Google fonts 访问字体列表。
TODO Hightlight

有很多 TODO 是需要优先处理的，大部分时间 TODO 都被忽略了。TODO hightlight 通过高亮它们来缓解这一问题。
Docker

有了这个插件可以在离线情况下创建 Dockerfiles。它还提供了语法高亮、自动补全等功能。

按 CMD + SHIFT + P 搜索 Add Docker files。
Code Spell Checker

能够方便的检查代码拼写错误。
Import Cost

Import Cost 显示代码里导入包的代价。它能帮助查找性能瓶颈。
HTMLHint

这个插件能校验 HTML，可以方便的写出符合标准的代码。
Peacock

这个插件可以改变 workspace 的颜色。当有多个 VS Code 窗口时，想要快速区分，这个插件就派上用场了。

在安装完 Peacock 后，单击设置图标 > settings，选择 workspace settings 标签页，单击 {} 粘贴如下代码
```
    {
        "workbench.colorCustomizations": {
            "activityBar.background": "#e90b8d",
            "activityBar.foreground": "#fff",
            "activityBar.inactiveForeground": "#b5b5b5",
        },
        "peacock.affectedElements": [
            "activityBar",
        ]
    }
```
还可以给 affectedElements 添加 titleBar 和 statusBar，然后在 colorCustomizations 里定义它们的颜色。

要使用内置颜色，按 CTRL + SHIFT + P，输入 peacock 选择你喜欢的主题。这会覆盖 settings.json 文件里 workspace 的定义。
Prettier

写代码的时候敲的最多的恐怕是空格和 tab 键，Prettier 可以帮你减负。它能格式化代码使其可读性更强。