vscode上面有很多插件，在开发项目的时候安装适合自身项目开发的插件，会大大的提高开发的效率，下图是我在进入公司后做第一个项目时，使用的一些插件；

23745773-641cdc92371a40af.png

1. Auto Rename tag 自动重命名标签

这个目前还没发现有什么特别优越的地方，对于刚工作的我，当时装这个就是刚入职装软件，就在网上随便搜搜，然后看到什么vscode前端开发必装的几个插件，相信很多菜鸟都和我一样，一百度，无论适不适合自己，就这样装了，然后发现也就那样。

2. Bracket Pair Colorizer 2 为代码中的括号添加亮色

这个还是非常有必要的，能够让我们一眼就知道括号的对应关系，刚刚工作，只会基本的html，css，js，vue其他的基本都不懂，一开始都是遇到问题就百度，写代码就是Ctrl+c和Ctrl+v，再这样的复制黏贴中，时常出现这边多一个“}”，那边少一个“{”的情况，本来需要学习的内容就很多，结果还在这种括号多一个少一个的上面磨磨蹭蹭，真的浪费时间，那么这个插件将一一对应的括号用不同的颜色高亮显示，提高了效率。

3. Chinese Language Pack for vscode vscode的中文包

英语不好的可以使用，就我这个高考英语不及格的，还是乖乖汉化吧！！！

4. Debugger for Chrome

因为vscode没有集成环境，所以当我们要使用Chrome控制台的时候，怎木办呢，哈哈哈哈_{这个插件就必须存在啦}

5. GitLens git源代码管理插件

git多人协作的时候需要查看日志，这个时候使用这个插件就可以知道此处代码是谁写的，哈哈哈 .......这样就不能随便糊弄了，大家点开就能知道代码是谁写的了~

23745773-acac144d77a157ee.png

6. Html Snippets 自动输入html标签内容

7. Open in Browser 默认打开浏览器页面

8. Prettier-Code formatter 格式化js和css代码的插件

第一步：先安装插件

23745773-641cdc92371a40af.png

第二步：ctrl+shift+p，输入setting，打开setting.json

23745773-056289f8a9404f94.png

第三步：将下面代码复制到setting.json中，重启vscode即可

23745773-b5844f02cbebd218.png

      "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
      },
      "window.zoomLevel": 0,
      "editor.renderIndentGuides": true,
      "javascript.format.enable": false,
      "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnType": true,
        "editor.formatOnSave": true
      },
      "prettier.trailingComma": "none",
      "prettier.arrowParens": "avoid",
      "emmet.excludeLanguages": ["markdown"],
    }