VSCode常用插件和技巧教程

P01：VSCode实现毛玻璃效果

技术胖虽然长的难看，但绝对是喜欢漂亮人和物的，比如说小姐姐。那作为一个前端程序员，肯定也会让自己的VSCode越漂亮越好。这个文章我就介绍一下，如何让VSCode拥有漂亮的毛玻璃效果。

毛玻璃的朦胧美，就仿佛美女穿了黑色的丝袜，非常的诱人心智。

安装并运行插件

其实要实现这个效果，只需要下载一个插件就可以解决，这个插件就是 Vibrancy。

打开VSCode，然后点击插件栏，搜索插件Vibrancy，搜索到之后，点击install进行安装。

安装好主体后，你需要按F1键,打开命令输入框，然后输入Reload Vibrancy后回车。如果不起作用，你就重新启动一下VSCode.

需要注意的一点是，这个插件每次更新VSCode就要重新运行Reload Vibrancy。

插件设置

这个插件还支持透明度和两款主题样式的设置。设置方法是在VSCode中使用快捷键Ctrl + ,,打开设置界面，在左边找到Extensions ，然后再找到Vibrancy Effect进行设置。

一共有三项设置：

• Opacity：透明度设置，这个数值默认为-1，你可以输入自己喜欢的值0-1之间，比如0.8.
• Theme： 毛玻璃的样式设置，一共有三个样式可选，以后可能还会增加。
• Type： 这个有很多选项，你可以具体进行测试。

P02：VSCode里直接预览效果

如果你没有双屏显示器，又不想来回切换窗口，而是直接在VSCode里进行预览，这简直太方便了，剩下的时间看个岛国小电影或者玩两把守望屁股他不香吗?

来来来，快点开始吧，妹子和游戏都在向我招手。

安装Browser Preview

打开插件管理，然后搜索Browser Preview插件，直接进行安装。

安装完成后，在Bar上多出一个图标，点击图标就可以在VSCode里打开浏览器了。

修改默认打开网址

现在的默认地址确实烦人，每次都要重新输入，这是一个有贞操的程序员所不能忍受的。所以我们按住ctrl + ,打开设置，然后找到Extensions,再找到Browser Preview,找到Start Url写上你默认打开的地址就可以了。

P03：VSCode一个插件让你的代码更职业

你有没有怀疑过你写的JavaScript代码？如何让自己的代码更专业？VSCode中的JavaScript Booster可以快速提升你的代码专业度。

插件安装完成，不用配置任何东西，就可以使用了。

插件的基本使用

插件会帮助你在你写的不合理的地方显示黄色感叹号，单击黄色感叹号后，就会跟我们变成更好的代码。

比如我们新建一个js文件，写如下代码：

var string1= 'jspang.com';

这时候我们点击var 关键词，JavaScript Booster就会给我们出现黄色小灯泡，我们点击黄色小灯泡后，它会提示我们var可以换成const.直接点击更换。

更换后的代码变成了这个样子。

const string1= 'jspang.com';

再比如你写了这样一段代码：

const gogo = function(str){
    return 'hi'+ str
}

这时候你点击function后，它会出现黄色警告，点击后会提示改为箭头函数，再次点击hi，又会出现警告，说可以使用模板字符串。两次点击后就代码就变成了下面的样子。

const gogo = str => {
    return `hi${str}`;
}

再比如，你要去象牙山洗脚城去大宝剑一下的时候，如果你选择32号就是“刘英”为你服务，如果你选择其它的就是“谢大脚”为你服务。

let a = 32
let str1='jspang'
if(a===32){
    str1='刘英'
}else{
    str1='谢大脚'
}

这时候你点击if会提示你改为三元运算符的形式，就变成了这样。

let a = 32
let str1='jspang'
str1 = a===32 ? '刘英' : '谢大脚';

这个插件还有很多转换方式，你可以在写完代码后都点击点击，这样慢慢的你代码水平就会提高。

P04：VSCode界面透明插件 程序员上班看片神器

上次介绍了一个毛玻璃插件，小伙伴都说不太好用，那我这个文章就介绍我的一个我的御用插件`Windows opacity`。有了这个插件，从此上班偷偷看看小姐姐，偷偷看视频时完全可以的。

安装并运行插件

安装这个插件是非常简单的，只要打开VSCode,然后点击插件Icon图标，进入插件，在搜索栏上搜索windos opacity,然后找到如图插件，进行安装就可以了。

安装好后，需要重启一下VSCode，就可以出现透明效果了。

插件的设置

现在的透明度可能看片还是有一点问题的，那我们就把透明度调的高一点。在VSCode中使用快捷键Ctrl + ,,打开设置界面，在左边找到Extensions选项卡，然后找到Windows opacity进行设置。

这里边只有一个设置项，就是Opacity，也就是我们要设置的透明度，值从0-255,数值越小透明度越高，数值越大透明度越低。我一般摸鱼的透明度在230左右，再小就容易被发现了。

P05：VSCode一个插件 解决找到另一半问题

这里说的另一半说的可不是人生伴侣，而是代码括号的另一半。我们只要安装Bracket Pair Colorizer ,它就会为我们自动标签匹配，括号匹配。从此再也不用花时间再成对标签或者括号上了。

安装插件

话不多说，直接干就完了，奥力给。打开VSCode,然后点击插件图标，进入插件，在搜索栏上搜索Bracket Pair Colorizer,然后找到如果插件，直接点击Install按钮进行安装。

插件的设置

在VSCode中使用快捷键Ctrl + ,,打开设置界面，在左边找到Extensions选项卡，找到BracketPair，这个配置项还是非常多的，多是对样子的一些简单设置，其实我个人是按照之后不作任何设置的。如果感兴趣的小伙伴，可以自己点击进行设置一下。

P06：VSCode装个插件 就可以偷偷玩游戏

我想现在小伙伴们都进入了春节的放假状态，那我们也就不介绍什么硬核插件了。一年了，也该好好休息一下了，召唤出我们的鼓励师，偷偷玩会游戏。真香警告,上班不要偷偷玩游戏，丢饭碗胖哥可养不起你哦。

安装插件

这个安装过程也非常简单，到VSCode插件中搜索超级鼓励师，点击install进行安装。安装完成后，直接点开VSCode右下角打开就可以了。

• 美女欣赏：编程从此不再孤单。
• 玩游戏：编程累了，玩两把小游戏。
• API： 常用API一键打开。

P07：在VSCode中优雅的调试接口

接口的调试几乎是我每天的工作项，我原来使用过Postman，我甚至还使用过PostWoman来进行接口的调试。但了解我的小伙伴都知道我是一个VSCode的重度使用者，我的理想状态是只要打开VSCode，就可以作任何开发的事情。于是开始寻找对应的接口调试插件。终于我遇到了REST Client，虽有不足，但已足够。

安装REST Client和简单使用

到VSCode插件中搜索REST Client,搜索到，点击install进行安装。

简单的使用

1. 创建一个 .http文件

你可以在任意你喜欢的地方新建一个接口测试文件，

2. 编写测试接口文件

最简单的方法，就是直接写上请求方式和要请求的地址，例如下面的就可以请求到我博客首页的数据列表。

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":"胖哥是最帅的"
}

3. 发送请求，测试接口

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

P08：在VSCode中快速生成漂亮的代码截图

分享是一个程序员的基本美德，那如何快速生成漂亮的代码截图，就编程了一个问题，比如我要在博客里放置一个漂亮的代码截图，或者是快速分享到其它网络平台。这个视频会教你使用一个VSCode插件，快速生成漂亮的代码截图。

安装Polacode

打开VSCode中的插件，搜索Polacode，这个你可以找到多个版本，但功能都差不多。如果非要说那个版本好，我觉的Polacode-2019这个版本还是好一点。因为她可以简单设置一下背景和样式。

打开Polacode-2019后，点击install进行安装。

使用方法

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

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

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

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

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

P09：在VSCode中代码注释高亮起来

在我们编写代码的时候，JS、HTML、CSS、PHP、Python都有对应的高亮显示，让我们的代码看起来及舒服又提高效率。但一般我们的代码注释只有一种颜色，看起来及单调又无趣。

作为一个有理想有追求，上班一心想摸鱼，下班就去大宝剑的程序员怎么能忍受这种单调那,技术好不好不重要，但装备一定要酷，装个Better Comments插件就可以实现注释代码高亮。

安装 和 设置

点击VSCode中的插件，然后在搜索栏中输入Better Comments，然后点击install就可以安装。

安装非常简单，现在我们来看看都又什么效果。其实使用就是在注释开头加上特殊的符号。

• ！ ， 红色注释
• ? , 蓝色注释
• // , 灰色删除线注释
• todo ,橘红色注释
• * , 浅绿色注释

当然如果你看不上这些颜色，你也可以自己定义属于自己的颜色。方法如下：

1. 点击插件上的小齿轮， 选择Extension Setting.
2. 点击Edit in setting.json选项，点击后打开了settings.json
3. 复制下面代码到settings.json,根据自己的喜好自定义了
4. 也可以增加新的注释颜色到setting.json中。

具体代码如下：

"better-comments.tags": [
  {
    "tag": "!",
    "color": "#FF2D00",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "?",
    "color": "#3498DB",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "//",
    "color": "#474747",
    "strikethrough": true,
    "backgroundColor": "transparent"
  },
  {
    "tag": "todo",
    "color": "#FF8C00",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "*",
    "color": "#98C379",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]