7 个使 vue 开发如虎添翼的 VS Code 扩展
The following article is from 前端先锋 Author 前端小混混
作为一个 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 -
觉得本文对你有帮助？请分享给更多人
推荐关注「前端大全」，提升前端技能
点赞和在看就是最大的支持❤️