关于SegmentFault:Vue开发人员的7个最好的VS-Code扩展

37次阅读

共计 1532 个字符,预计需要花费 4 分钟才能阅读完成。

在 Visual Studio 中增加正确的 VS Code 扩大能够让你作为开发者的生存变得更加轻松。

它们能够帮忙格式化、可伸缩性、强制执行最佳实际,从而自动化开发过程中许多容易遗记的工作。它们也能够只是乏味的扩大,使咱们的代码看起来更丑陋 / 更容易编写。

作为一个 Vue 爱好者,我花了很多工夫为 Vue 开发人员寻找最好的 VS Code 扩大。这里有一些让我的生存变得如此简略的办法。

筹备好了吗?

让咱们间接切入正题。

Vetur

如果你从这篇文章中下载了一个 VS Code 扩大,它肯定是 Vetur。

一个针对 VS Code 的 Vue 工具包——它提供了 Vue 特定的语法高亮显示、通用代码段的代码段,以及所有 Vue 开发人员都须要的更多内容。

Vetur 保护得很好——它甚至还提供了对 Vue3 Typescript 的反对。

对于 Vetur,真的没有太多别的好说的了——明确了吧。这会让你的倒退更好。

ESLint Plugin VueJS

大多数开发人员都很相熟 ESLint——这是最风行的 linter 工具之一,它能够帮忙你放弃代码与最佳实际统一,并在大型代码库中具备可读性。

VueJS 有本人的 ESLint 插件来查看单个文件组件的语法。我认为它是编写可保护和可伸缩代码的最佳工具之一。

没有什么比查看一些旧代码,甚至不晓得从哪里开始调试它更蹩脚的了。

ESLint 能够帮忙你放弃组织性,并且随着对 Vue3 反对的减少,你将会编写可扩大的 Vue 我的项目。

Vue VSCode Snippets

Sarah Drasner 的 VSCode 扩大将为你节俭很多开发工夫。它为罕用的 Vue 用例提供了主动填充的代码片段。用她本人的话来说……

从真实世界应用的 Vue 的角度关注开发者的人机工程学。其中包含我集体厌倦了打字的局部,以及有助于疾速删除的样板文件。

它非常适合编写疾速 sfc、Vue 指令和快速访问生命周期钩子。

Bookmarks

许多 Vue 开发人员的 VSCode 扩大直到进入大型项目时才真正展现出其全副后劲。

这就是 Bookmarks 的工作原理。这个扩大能够让你在代码中标记和命名地位。而后,你能够在这些不同的“Bookmarks”之间切换以进步开发速度。

为了找到某个个性,你须要小心翼翼地上下滚动你的文件,这样的日子一去不复返了。

Bracket Pair Colorizer

Bracket Pair Colorizer 的确做到了它说的 - 它须要匹配括号,并给他们独特的匹配色彩。

尽管这看起来像是一个小细节,但它的确能够帮忙你修复厌恶的嵌套谬误,也能够帮忙你。

我也很享受这样做的视觉效果——让我的代码色调丰盛,又不会让它太扩散注意力。

相对值得一看。

Auto Rename Tag

Auto Rename Tag 是一个有用的 VSCode 扩大,将有助于避免谬误呈现在你的模板代码。

每当你去扭转一个标签的 HTML 括号对 (无论是开始或完结标签),Auto Rename Tag 将主动重命名另一个。

这个小的优化能够帮忙避免如此多的谬误,特地是在解决大型模板时。

NPM Intellisense

当你在 Javascript 中编写 import 语句时,NPM Intellisense 会主动实现你的 NPM 模块。

这能够节俭你记住一个 npm 模块的确切名称的工夫。

我曾经在我的很多我的项目中应用了它,而且它相对是我曾经变得十分习惯的货色。

论断

总之,有很多 VS Code 扩大可供 Vue 开发人员应用。

尽管这个列表中的许多批改在一开始可能看起来微不足道,但这些小的批改能够为你节俭大量的开发工夫。我强烈建议至多尝试所有的办法。

谁晓得呢——你可能会爱上其中的一些。

如果你认为还有其余的 VS Code 扩大值得在这个列表上——请通知我!

欢送关注我的公众号,如果你有喜爱的外文技术文章,能够通过公众号留言举荐给我。

正文完
 0