Vscode开发工具

前端工具使用最频繁的VS Code，原因很简单，方便，免费，功能强大；

工作之后也用过很多开发工具，IDE工具，插件下载我觉得使用并不方便，而且使用需要破解，就是没办法习惯；

Hbuilder在使用它自己的uni-app必须用到这个工具用了，但是限制还是比较多，很多时候会出现一堆得坑；

因为，在我的前端开发工作中，使用的最多的VS Code；

---

常规的插件：

chinese汉化插件；

vscode-icons各种漂亮图标；

filesize左下角显示文件大小的插件；

Path Autocomplete自动感知目录下的文件，然后自己选择；

Import Cost在行尾显示导入的包的大小；

Indent-Rainbow带颜色的缩进；

Guides比自带的更好的参考线，可自定义；

GitLens 版本管理工具，是开发工具中必备的功能；

Git history在文件中会显示git提交的历史；

Color Highlight直观显示在css/web中定义的颜色；

Color Info显示css中的颜色属性信息；

Auto Close Tag自动写关闭标签的插件；

Auto Rename Tag自动重命名关闭标签；

---

Vue插件

vetur vue工具插件

---

开发配置优化的插件：

Browser Preview直接预览功能

       如果你没有双屏显示器，不想来回切换窗口，直接在VS Code中进行预览；

JavaScript Booster可以快速提升你的代码专业度

       如果怀疑自己写的javascript代码，想让自己的代码更加专业，使用这个插件，可以快速提升自己的代码专业度；插件会帮助你在你写的不合理的地方显示黄色感叹号，单击黄色感叹号后，就会跟我们变成更好的代码。

Bracket Pair Colorizer自动标签匹配，括号匹配

  代码过多的时候，很容易由于标签和括号不对称代码报错，使用这个工具，从此以后再也不用花时间再成对标签或这括号上了；

Polacode，在VS Code中快速生成漂亮的代码截图

  目前polacode-2019这个版本好一点，因为可以简单的设置一样背景和样式；

安装完成后,先打开你要分享的代码,然后按Ctrl + Shift + p打开命令面板,然后再输入框中输入Polacode,就可以打开使用了。

使用时2019版比普通的Polacode多了图片样式的设计。

    1.shadow:是否设置阴影,你可以选择是否需要阴影,当然有阴影要好看一些；

    2.Transparent:是否设置透明,如果不是透明我们还可以设置背景的颜色.这个看自己喜好了；

当设置好以后,就可以进行点击按钮进行保存图片了.是不是非常的快速,并且比普通的截图好看。

REST Client优雅的调试接口

      操作比较简单，能满足前端和后端联调接口时，能简单及时的调用，直接编写测试接口文件，

 1.创建一个.http文件    在任意的地方新建一个接口测试文件

      GET https://apiblog.jspang.com/default/getArticleList 

       当然你也可以再增加一些内容，让你的请求更标准些。比如加入HTTP传输协议版本，还比如你提交的是一个POST数据表达，你可以要求表达的数据是以json的形式提交，你就可以加入下面的代码。

      GET https://apiblog.jspang.com/default/getArticleList  HTTP/1.1

      content-type: application/json

     {

      "data":"胖哥是最帅的"

    }

  2.发送请求，测试接口点击Send Request，或者右键选择Send Request,都可以发送请求，如果一切顺利就会得到请求的结果。