浅谈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下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP循环结构实例讲解
2014/02/10 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
微信支付开发维权通知实例
2016/07/12 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
关于TypeScript模块导入的那些事
2018/06/12 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Python中的元类编程入门指引
2015/04/15 Python
Python导入oracle数据的方法
2015/07/10 Python
python基础知识小结之集合
2015/11/25 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
ktv总经理岗位职责
2014/02/17 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
就业意向书范文
2014/04/01 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL