VSCode插件

VSCode使用技巧和常用插件
sharexplore
sharexplore

毕竟VSCode这种每天都使用的IDE工具，基本在1小时内就可以快速上手，但是通过我对身边同事的观察，我发现还是有很多小伙伴使用不够精通。特别是现在越来越多的插件，有的非常好用，直接可以提高我们的开发效率，那从今天开始，我开始更新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= ‘aliyun01.com’;
这时候我们点击var 关键词，JavaScript Booster就会给我们出现黄色小灯泡，我们点击黄色小灯泡后，它会提示我们var可以换成const.直接点击更换。

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

const string1= ‘aliyun01.com’;
再比如你写了这样一段代码：

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

const gogo = str => {
return hi${str};
}
再比如，你要去象牙山洗脚城去大宝剑一下的时候，如果你选择32号就是“刘英”为你服务，如果你选择其它的就是“谢大脚”为你服务。

let a = 32
let str1=‘aliyun01’
if(a===32){
str1=‘刘英’
}else{
str1=‘谢大脚’
}
这时候你点击if会提示你改为三元运算符的形式，就变成了这样。

let a = 32
let str1=‘jspang’
str1 = a===32 ? ‘刘英’ : ‘谢大脚’;
这个插件还有很多转换方式，你可以在写完代码后都点击点击，这样慢慢的你代码水平就会提高。
P04：VSCode一个插件 解决找到另一半问题

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

安装插件

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

插件的设置

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

超级使用且初级的H5代码片段以及提示

二、HTML CSS Support

让HTML标签上写class智能提示当前项目所支持的样式

三、Debugger for Chrome

让vscode映射chrome的debug功能，静态页面都可以用vscode来打断点调试、配饰稍微复杂一点

四、JQuery Code Snippets

jquery提示工具

五、Path Intellisense

自动路径补全、默认不带这个功能

六、Npm Intellisense

require 时的包提示

七、Document this

Js的注释模板

八、ESlint

ESlint接管原声js提示，可以自定制体会规则。这个比较高玩、

九、Project Manager

多个项目之间快速切换的工具

十、beautiful

格式化代码的工具

十一、Typings Installer

安装vscode 的代码提示依赖库，基于typtings的，比如提示angular或者jQuery只能感知、至于什么是typtings自己去百度。

十二、Bootstrap 3 Sinnpet

常用bootstrap的可以下

十三、Auto Rename Tag

修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。

图标、代码样式插件

一、JavaScript Atom Grammar

使用atom风格的语法高亮、对于习惯浏览atom风格代码高亮的人实用。

二、vscode-icon

让vscode资源目录加上图标、必备

三、One Dark Theme

来自Atom的one dark主题好看实用

四、Material、Material Neutral …