专注前端开发,每年100集免费视频。
首页/视频教程/ VSCode常用插件和技巧教程/
VSCode常用插件和技巧教程
2019-12-28 视频教程 3787

VSCode 想写这个文章已经很久了,但是一直觉的需要的人可能会很少,毕竟VSCode这种每天都使用IDE工具,基本在1小时内就可以快速上手,但是通过我对身边同事的观察,我发现还是有很多小伙伴使用不够精通。特别是现在越来越多的插件,有的非常好用,直接可以提高我们的开发效率,那从今天开始,我开始更新VSCode的一些插件和技巧,这个并不是定期更新,而是我有了好的素材就会更新。

P01:VSCode实现毛玻璃效果

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

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

Vibrancy

安装并运行插件

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

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

Vibrancy

安装好主体后,你需要按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

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

Browser Preview

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

修改默认打开网址

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

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

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

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

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`。有了这个插件,从此上班偷偷看看小姐姐,偷偷看视频时完全可以的。

Windows opacity

安装并运行插件

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

Windows opacity

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

插件的设置

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

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

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

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

Bracket Pair Colorizer

安装插件

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

Bracket Pair Colorizer

插件的设置

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

技术胖
专注于WEB和移动前端开发
光头Coder12年经验业余讲师免费视频被访问
只要50元/年 得4项福利

视频离线高清版下载-400集

每周至少两篇文章分享

技术胖收费视频半价购买

每天回答所提问题(选择性回答)