浅谈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实现下载文件流完整前后端代码
Nov 17 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue postcss-px2rem 自适应布局
May 15 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php数组随机排序实现方法
2015/06/13 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
javascript常见用法总结
2014/05/22 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
express express-session的使用小结
2018/12/12 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Python检测生僻字的实现方法
2016/10/23 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Python之循环结构
2019/01/15 Python
Python2与Python3的区别实例总结
2019/04/17 Python
基于python操作ES实例详解
2019/11/16 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
行政文秘岗位职责范本
2014/02/10 职场文书
听课评语大全
2014/04/30 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
房产公证书样本
2015/01/23 职场文书
电影建党伟业观后感
2015/06/01 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
浅谈MySQL之select优化方案
2021/08/07 MySQL