介绍
随着时代的发展,越来越多的开发者选择使用VSCode进行开发,这款跨平台编辑器拥有强大的功能和丰富的扩展插件。
本文将分享一些常用的VSCode开发插件,旨在提高开发效率、优化开发体验。
插件列表
1. Prettier - Code formatter (#1)
作为一个代码格式化插件,Prettier - Code formatter拥有快速、高效的格式化工具,它能够帮助开发者更快速地写出一致性高、可读性强的代码。
在VSCode中安装Prettier - Code formatter插件后,在设置中打开Editor: Format On Save选项,即可在保存时快速进行代码格式化。
Prettier - Code formatter的使用示例:
// 在文件中写下以下代码
function Hello(){
console.log("Hello World");
}
// 将代码格式化为统一风格的代码
function Hello() {
console.log("Hello World");
}
2. Bracket Pair Colorizer (#2)
Bracket Pair Colorizer是一款会让你找到花括号能够切换的插件,帮助开发者更快速地找到匹配的括号。
安装后,括号会在编辑器中以不同的颜色进行高亮,帮助开发者更方便的进行编写和查看。此外,它还支持颜色 customization,并提供灵活高效的配置方式。
Bracket Pair Colorizer的使用示例:
// 在文件中写下以下代码
function testFunc() {
if (condition1) {
// do something
} else if (condition2) {
// do something
} else {
// do something
}
}
// 编辑器中对应的视图
function testFunc() {
if (condition1) {} else if (condition2) {} else {}
}
3. GitLens (#3)
GitLens是一款很不错的Git代码管理插件,支持git blame, inline-diff 和 annotations等特性。你可以方便地查询和比较不同 commit 版本中的代码更新、作者等信息,并且支持高效的代码检索。
GitLens的使用示例:
// 查看当前文件的 git blame 信息
// 例如:某一行的代码信息
[ncomal@localhost ~]$ git blame xxx.c -L 82,82
4d99e13f ( xx 2019-03-21 14:45:22 +0800 82) crc_result.u32Data = 0x01234567;
4. Live Server (#4)
Live Server是一款支持自动刷新静态HTML/CSS/JS文件的插件。当你启动Live Server之后,在编辑器中保存代码,浏览器的页面就会自动刷新,帮助你更有精力地专注于开发工作本身。
此外,Live Server还具有诸多优秀的功能,如支持资源压缩,支持https,还可以自定义端口、浏览器实例等等
Live Server的使用示例:
// 在html文件中打开右键菜单,选择Open With Live Server
// 在服务器引擎上启动了应用程序并打开了它,文件中任何更改都将自动刷新页面。
5. Remote - SSH (#5)
Remote - SSH是一款远程连接插件,方便开发者通过VSCode来管理服务器。使用这款插件,开发者可以在本地使用VSCode进行使用,但却可以连接到远程服务器进行代码编写调试。
Remote - SSH的使用示例:
// 创建远程SSH连接
// 在命令面板中选择Remote-SSH: Connect to Host,输入完整的用户名和SSH地址。输入密码或身份验证SSH密钥。连接成功后,插件将打开一个新的VSCode实例并连接到服务器。
总结
以上插件是VSCode编辑器中受欢迎的插件。它们不仅提高了开发效率,还极大地方便了开发者的工作。当然,随着我们的编码要求越来越高,我们还需要不断地探索和学习更多的插件。