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

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,这个配置项还是非常多的,多是对样子的一些简单设置,其实我个人是按照之后不作任何设置的。如果感兴趣的小伙伴,可以自己点击进行设置一下。

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

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

超级鼓励师

安装插件

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

超级鼓励师

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

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

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

安装REST Client和简单使用

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

REST Client

简单的使用

  1. 创建一个 .http文件

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

  1. 编写测试接口文件

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

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":"胖哥是最帅的"
}
  1. 发送请求,测试接口

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

REST Client

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

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

安装Polacode

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

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

使用方法

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

Polacode

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

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

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

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

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

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

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

安装 和 设置

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

Better Comments

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

  • , 红色注释
  • ? , 蓝色注释
  • // , 灰色删除线注释
  • 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"
  }
]

P10:VSCode一键生成佛祖保佑永无BUG注释

作为一个有思想有个性的程序员写的代码一定是要有风格的,比如什么佛祖保佑永无Bug神兽护体等形式的注释,既有趣又个性。

给大家介绍一个非常有中国风的注释插件koroFileHeader,我们先来了解一下这个插件

koroFileHeader插件简介

  1. 这个插件目前有1300+Star,全五星好评,8万次下载,所以是个非常不错的插件。
  2. 插件的作用是生成文件头部注释和函数注释。

一键添加佛祖保佑注释

VSCode的插件市场中,搜索koroFileHeader并进行安装,安装完成后可以新建一个test.js文件,

如果你是windows电脑,使用ctrl+shift+p键,Mac电脑使用shift+command+p键,然后输入/codeDesign,就可以选择注释图案了(这里我就不截图了,你们直接看视频吧)。

/*
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 
 *            佛祖保佑       永不宕机     永无BUG
 */

插件里边的图案有佛祖佛曰美女龙图腾......等等,你可以下载下来自己测试一下。

正常头部文件注释

其实这个"骚注释"只是插件的功能之一,更多的应用是自动根据我们的需求快速生成注释,比如在test.js中点击快捷键ctrl+alt+i(Windows),如果你是Mac电脑点击ctrl+cmd+i.就会快速生成这样的代码注释(我这里以JS代码注释为例,但这个插件可以支持所有主流语言,支持自定义语言).

/*
 * @Author: your name
 * @Date: 2020-05-21 10:29:21
 * @LastEditTime: 2020-05-21 10:37:29
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \MarkDown_blog\test.js
 */ 

这时候你会发现这里的Author是需要配置的,其实配置这个也非常的容易,我们简单配置一下。在VSCode菜单栏点击File-Preferences-Settings-Extensions里找到File header Configuration,在文件头部模块中(Fileheader)点击Edit in settings.json,修改配置文件如下:

{
    "fileheader.configObj": {

    },
    "fileheader.customMade": {
        "Author": "技术胖",
        "Date": "Do not edit", // 文件创建时间(不变)
        "LastEditors": "技术胖", // 文件最后编辑者
        "LastEditTime": "Do not edit", // 文件最后编辑时间
        "FilePath": "Do not edit" ,// 增加此项配置即可
    } 


}

修改完成后,要保存,然后退出VSCode,再进来,进入test.js,输入ctrl+alt+i这时候就变成了下面的样子。

/*
 * @Author: 技术胖
 * @Date: 2020-05-21 10:29:21
 * @LastEditors: 技术胖
 * @LastEditTime: 2020-05-21 11:28:16
 * @FilePath: \MarkDown_blog\test.js
 */ 

在光标处添加函数注释

当然他还支持对函数(方法)的注释,比如现在test.js文件里,编写一个test方法.

 function test(content){
     console.log(content)
     return content
 }

然后我们在这段代码的上边使用快捷键windows:ctrl+alt+t,mac:"ctrl+cmd+t"就可以快速生成注释了。

这个插件我们就介绍这里了,这个插件也是我目前使用比较多的一个注释插件,希望这期视频对你有所帮助。下期见!

对不起,该文章暂时不支持留言。
最新留言

No Data

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

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

每周至少两篇文章分享

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