使用 Vue 开发的，这 7 个 VS Code 插件万万不可错过！

墨蓝 2023-01-15 08:25 85阅读 0赞

> 作者：Ahmad shaded  
> 译者：前端小智  
> 来源：sitepoint

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

在 VS Code 中添加好用的插件可以提高我们的开发效率。这些可以帮助我们格式化，扩充性，执行最佳实践的代码方式，自动完成一些琐碎的事情。好了，费话不多说，那我们开始吧！

### [Vetur][] ###

Vetur 支持`.vue`文件的语法高亮显示，除了支持`template`模板以外，还支持大多数主流的前端开发脚本和插件，比如 Sass 和 TypeScript，完整的支持高亮的语法如下所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center]

Vetur 维护得很好，它甚至还提供了对**Vue3 Typescript**的支持。

关于Vetur没有太多要说的了-还没使用的，快快下手吧。

### [ESLint Plugin VueJS][] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center 1]

大多数开发人员都熟悉 ESLint，这是最流行的linter工具之一，它可以帮助我们保持代码与最佳实践一致，并在大型代码库中具有可读性。

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

没有什么比看一些旧代码甚至不知道从哪里开始调试更糟糕的了。

不用担心！

ESLint可以帮助你保持组织性，并且随着对Vue3的支持的增加，你可以编写可扩展的Vue项目。

### [Vue VSCode Snippets][] ###

这个插件基于最新的Vue官方语法高亮文件添加了语法高亮，并且依据Vue 2的API添加了代码片段。

它非常适合编写快速SFC，Vue指令和快速访问生命周期挂钩之类的东西。

### [Bookmarks][] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center 2]

许多VSCode插件只有在大型项目时才真正展现出其全部潜力。

Bookmarks 可以让我们在代码中标记和命名位置。然后，可以在这些不同的书签之间跳转来提高我们的开发速度。

为了找到某个特性，我们需要小心翼翼地上下滚动我们的文件，这样的日子一去不复返了。

### [Bracket Pair Colorizer][] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center 3]

Bracket Pair Colorizer 为代码中的括号添上一抹亮色。我也非常喜欢这种视觉效果–让代码丰富多彩，而又不会让人分心。

### [Auto Rename Tag][] ###

自动关闭标签，在开始标记的结束括号中键入后，将自动插入结束标记。

每当我们要更改HTML括号对中的一个标签（开始或结束标签）时，Auto Rename Tag会自动重命名另一个标签。

这个小的优化可以帮助防止很多错误，特别是在处理大型模板时.

### [NPM Intellisense][] ###

![在这里插入图片描述][20210422082157128.gif_pic_center]

在导入包时，NPM Intellisense都会自动完成我们的npm模块。

这样可以节省我们记住npm模块确切名称的时间，这也是我必备的插件之一。

~完，我是刷碗智，我要去刷碗了，我们下期见！

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://learnvue.co/2021/01/the-7-vs-code-extensions-for-vue-developers/

## 交流 ##

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[Vetur]: https://marketplace.visualstudio.com/items?itemName=octref.vetur
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/8179d6260e93462c88a74f60c5a4b2dc.png
[ESLint Plugin VueJS]: https://eslint.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/af5e346a4fa24c5b81fb489ec67619ad.png
[Vue VSCode Snippets]: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
[Bookmarks]: https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/d22a67e65b8a4ae68a4a85853574b5bf.png
[Bracket Pair Colorizer]: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221022/feca408f54864f3dbde099b57e0a82e5.png
[Auto Rename Tag]: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
[NPM Intellisense]: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
[20210422082157128.gif_pic_center]: /images/20221022/afbd60a924374717b5b5dad1c5ee9d1f.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi