VS Code插件配置

常用 VS Code 插件：

1. Auto Import

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

2. ** Add jsdoc comments **

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

3. ESDoc MDN

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

   //mdn [object].[method];

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

4. CSS Peek

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

5. GitLens

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

6. ESLint

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

   当前项目安装 ESLint，运行

   npm install eslint

   或者，全局安装

   npm install -g eslint

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

   ./node_modules/.bin/eslint --init

   或者运行

   eslint --init

7. ** Debugger for Chrome **

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

8. Google Fonts

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

9. TODO Hightlight

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

10. Docker

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

    按 CMD + SHIFT + P 搜索 Add Docker files。

11. Code Spell Checker

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

12. Import Cost

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

13. HTMLHint

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

14. 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 的定义。

15. Prettier

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