浅谈Vue开发人员的7个最好的VSCode扩展


Posted in Vue.js onJanuary 20, 2021

在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扩展值得在这个列表上——请告诉我!

到此这篇关于浅谈Vue开发人员的7个最好的VSCode扩展的文章就介绍到这了,更多相关Vue VSCode扩展内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
vue实现简易计算器功能
Jan 20 #Vue.js
vue使用过滤器格式化日期
Jan 20 #Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
vue实现验证用户名是否可用
Jan 20 #Vue.js
vue实现按钮切换图片
Jan 20 #Vue.js
Vue实现图书管理案例
Jan 20 #Vue.js
You might like
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
简单的三步vuex入门
2018/05/20 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python opencv实现图像边缘检测
2019/04/29 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
廉洁校园实施方案
2014/05/25 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
档案管理员岗位职责
2015/02/12 职场文书
尼克胡哲观后感
2015/06/08 职场文书