7 个使 vue 开发如虎添翼的 VS Code 扩展

作为一个 Vue 搬砖工，我一直在为 Vue 开发寻找合适的 VS Code 扩展。以下是一些好用的扩展，可以让我们在搬砖时更加轻松。

Vetur

链接：https://marketplace.visualstudio.com/items?itemName=octref.vetur

如果只装一个 VS Code 扩展的话，那必须是 Vetur。

这是一个 VS Code 的 Vue 工具包——它提供了 Vue 特定的语法突出显示、常见代码段以及每个写 Vue 的人都需要的很多功能。

Vetur 维护得很好，它甚至有 Vue3 Typescript 支持。

关于 Vetur 真的没有太多要说的，懂的人自然懂。

ESLint Plugin VueJS

链接：https://eslint.vuejs.org/

大家对 eslint 已经很熟悉了，这是最受欢迎的 Linter 工具。

Vuejs 有自己的 eslint插件，可以检查单个文件组件的语法。这是编写可维护和可扩展代码的最好用的工具之一。

大家都不喜欢去维护祖传代码，甚至都不知道该从什么地方开始调试。不用担心，ESLint 可以帮你把一切都保持的井井有条，随着对 Vue3 支持的增加，还能编写可扩展的 Vue 项目。

Vue VSCode Snippets

链接：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

这个 vscode 扩展可以帮你节省大量的开发时间。它能帮你自动填充常用的 Vue 代码片段。用作者自己的话说：

[Vue VSCode Snippets] focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly.

来源：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)

大意是从实用的角度关注 vue 开发人员的身心健康。因为作者很讨厌打字。

它非很适合编写快速 SFC、Vue 指令和快速访问生命周期钩子等。

Bookmarks

Bookmarks 可以让你在自己代码中标记并命名位置。然后你就可以在这些不同的“书签”之间跳转，提高开发速度。

以后你再也不用在长长的代码中寻找特定函数的位置了，它一下子就能帮你搞定。

Bracket Pair Colorizer

链接：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Bracket Pair Colorizer 用来匹配括号并为它们提供独特的匹配颜色。

虽然这是一个很小的细节，但它可以在你修复讨厌的嵌套错误时帮上大忙，并且在你的 linter 无法正常工作时也可以为提供帮助。

它的视觉效果也很让人喜欢，即让代码丰富多彩又不会让人分心。绝对值得一试。

Auto Rename Tag

链接：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag 是一个非常有用的 VSCode 扩展，能够帮你防止在模板代码产生错误。

每当你要修改 HTML 中的一个标签名（开始或结束标签）时，Auto Rename Tag 会帮你自动重命名另一个。

这种小优化可以帮助防止产生错误，尤其是当你在处理大型模板的时候。

NPM Intellisense

链接：https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

当你在 Javascript 中编写导入语句时，NPM Intellisense 都会自动完成你需要的 npm 模块名称。

这可以让你不用再记住 npm 模块的确切名称，从而帮你节省大量的时间，我把它用在了自己的很多项目中。

- EOF -

觉得本文对你有帮助？请分享给更多人

推荐关注「前端大全」，提升前端技能

点赞和在看就是最大的支持❤️