【高效】【IDE】VSCode 插件

Docuemnt This 加注释文档

选中你的函数名字，按两次ctrl+alt+D；

Better Comments 注释高亮

Live Server 实时预览页面

Live Server会启动一个本地服务器，实时的获取文件变化，并更新页面，方便用户测试代码。

选择需要浏览的文件，右键开启服务，就可以在浏览器中浏览网页啦

插件配置

"liveServer.settings.host": 127.0.0.1,//设置本地服务的地址

"liveServer.settings.port": 8080,//设置本地服务的端口号

"liveServer.settings.proxy": {

        "enable": true,

        "baseUri": "/api",

        "proxyUri": "http://127.0.0.1:80/"

    }

设置代理服务器的地址为http://127.0.0.1:80/，此地址用api替代

JavaScript Booster 让自己的代码更专业

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

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

Bracket Pair Colorizer 括号匹配（最新的vscode内置该插件了）

它就会为我们自动标签匹配，括号匹配。从此再也不用花时间再成对标签或者括号上了。

Npm-script

效果图

侧栏直接显示NPM SCRIPTS，点击直接启动命令

安装和使用

在插件市场，搜索npm-scripts，并安装

打开设置，搜索 package manager，将auto都改为npm就可以了。

默认执行的是auto，会报错。

Polacode

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

HTML相关

Chinese(Simplified)

Open in Browser

JS-CSS-HTML Formatter

Auto Rename Tag

参考资料

• https://jspang.com/detailed?id=60