总结
豆包 AI 助手文章总结
首页 > 开发工具 > VSCode > 正文

8个顶级 VSCode 扩展插件

青灯夜游
发布: 2019-12-09 09:47:06
原创
5153人浏览过

微软的 vs (visual studio) code 是一个免费的开源代码编辑器,最近越来越受欢迎。它非常轻巧、灵活,同时也提供了很多强大的功能。它支持绝大多数流行的编程语言,包括php、javascript、c++ 等。

8个顶级 VSCode 扩展插件

VS Code 是跨平台的。它不仅能用于 Windows 平台,同时也提供 Linux 和 Mac 版本。下载地址:https://code.visualstudio.com/。

但也许最酷的是 VS Code 提供了规模超大的扩展插件,在扩展 商店 有大量的免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能。你可以灵活的配置自己的编辑器,更好地满足日常开发的需要。

下面将给你介绍一些适合前端的顶级 VS Code 扩展插件。

Git增强:GitLens

1.png

虽然Git功能已内置于 VS Code 中,但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能,可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说,这个扩展插件会让你拥有全新的视觉感受。

更多详情:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

语法高亮:Beautify

2.png

你是否非常依赖语法高亮显示?如果是的话,Beautify 正是你需要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier,允许你轻松更改其样式。这意味着你可以根据内容设置缩进、换行和其他细节。

更多详情:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

代码检查:ESLint

3.png

JavaScript 可能很难调试。但 ESLint 扩展可以使这个过程更容易。它能够在执行代码之前帮你指出其中潜在的问题。更强大的是它允许你创建自己的 linting 规则。

更多详情:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

调试器:Debugger for Chrome

4.png

对于在运行时期间对代码进行调试的开发人员,Debugger for Chrome 将帮你更好的完成工作。它有许多方便的功能,包括在代码、watches 和控制台中设置断点的功能。另外你可以在 VS Code 中运行Chrome实例,或把调试器附加到单独运行的浏览器实例。

更多信息:https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

环境增强:React Native Tools

5.png

React  是最引人注目的JS库之一 —— 以至于新的 WordPress 块编辑器(又名 Gutenberg)是基于它建立的。如果你是众多的 React 程序员之一,那么React Native Tools是必不可少的扩展。它增加了运行 react-native 命令的功能,还能帮助你调试自己的代码。

更多信息:https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

界面主题:One Dark Pro

6.png

在敲代码时,有一个醒目且养眼的界面主题会很有帮助。毕竟编码过程可以持续好几个小时。 One Dark Pro 把Atom 编辑器中流行的 “One Dark” 主题带到了 VS Code。

更多信息:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

代码增强:Bracket Pair Colorizer 2

7.png

Bracket Pair Colorizer 2 是一个简单的扩展,可以使代码更容易阅读。它可以对匹配括号的对代码着色,使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。

更多信息:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

视觉增强:vscode-icons

8.png

也许 vscode-icons 是 VS Code 最有效的视觉调整扩展之一。它能够处理你项目中平淡的文件列表,并添加丰富多彩、表示特定语言的图标。这样可以很容易地让你知道代码文件的类型。能够给工作区添加个性化设置是非常受欢迎的功能。

更多信息:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

按自己的方式编写代码

VS Code 提供的扩展插件数量惊人,这使其成极具吸引力的编辑器。你可以自由的进行设置,来匹配自己使用的语言和设置喜欢的工作区视觉效果。

此外,它还提供了企业和开源文化的有趣组合。 VS Code 得到了微软的支持,能够确保未来会得到更好的维护。开源社区围绕软件创建了一个欣欣向荣的生态系统,可以称作是企业与开源文化相结合的典范。

原文地址:https://1stwebdesigner.com/top-free-extensions-for-vs-code/

为了保证的可读性,本文采用意译而非直译。

推荐教程:GitLens0

以上就是8个顶级 VSCode 扩展插件的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
豆包 AI 助手文章总结
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号