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 …