浅谈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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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(2)
2006/10/09 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
使javascript也能包含文件
2006/10/26 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
jquery 学习笔记一
2010/04/07 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
javascript实现数独解法
2015/03/14 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
教师网络培训感言
2014/03/09 职场文书
道路建设实施方案
2014/03/18 职场文书
企业标语大全
2014/07/01 职场文书
验房委托书
2014/08/30 职场文书
2016年党建工作简报
2015/11/26 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
为Java项目添加Redis缓存的方法
2021/05/18 Redis
教你怎么用python selenium实现自动化测试
2021/05/27 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle