浅谈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 相关文章推荐
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue里使用create, mounted调用方法
Apr 26 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 Google的translate API代码
2008/12/10 PHP
php 全局变量范围分析
2009/08/07 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
php 获取本地IP代码
2013/06/23 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
php时间戳转换的示例
2014/03/31 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
python协程用法实例分析
2015/06/04 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
全球度假村:Club Med
2017/11/27 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
捐助贫困学生倡议书
2014/05/16 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android