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

时间 2021-04-24

标签前端 vue git github 面试 npm 微信工具优化 spa 栏目 Git 繁體版

原文原文链接

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

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。前端

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及个人系列文章。vue

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

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

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

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

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

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

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

不用担忧！spa

ESLint能够帮助你保持组织性，而且随着对Vue3的支持的增长，你能够编写可扩展的Vue项目。

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

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

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

Bookmarks 可让咱们在代码中标记和命名位置。而后，能够在这些不一样的书签之间跳转来提升咱们的开发速度。

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

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

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

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

这个小的优化能够帮助防止不少错误，特别是在处理大型模板时.

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

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

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

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

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及个人系列文章。