阅读 600

VSCode常用插件

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

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

image.png

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

  • 插件的基本使用

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

比如我们新建一个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 ? '刘英' : '谢大脚';
复制代码

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

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

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

image.png

  • 插件的设置

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

在VSCode中优雅的调试接口

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

image.png

  • 简单的使用
  1. 创建一个 .http文件

  2. 编写测试接口文件

GET https://apiblog.jspang.com/default/getArticleList  HTTP/1.1

content-type: application/json

{
    "data":"胖哥是最帅的"
}
复制代码
  1. 发送请求,测试接口

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

image.png

文章分类
前端