在vue中使用eslint,配合vscode的操作
不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue，绝对有种飞一般的感觉。
每次保存，vscode就能标红不符合eslint规则的地方，同时还会做一些简单的自我修正。安装步骤如下：
首先安装eslint插件
安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置
"files.autoSave":"off",
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{ "language": "vue", "autoFix": true }
],
"eslint.options": {
"plugins": ["html"]
}
这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。
补充知识：vscode配置eslint搭配vue脚手架快速实现代码质量化书写
我们在公司使用脚手架的时候可能会使用eslint来实现代码的质量检测,但是真正在书写代码的时候要时刻记住那些 “标准”可能有点难受 比如 结尾不加分号 使用单引号 首行俩个空格缩进等等
这个时候我们可能想 每次书写玩代码保存的时候 它能自动帮我整理成符合标准的代码 那是不是就事半功倍了
没错vscode就有这样的功能
还是和和往常一样 直接上步骤和代码了
1.实现这样的条件 (vue脚手架安装的时候 需要 选中 eslint +prettier 这个选项)
在vscode上安装三个插件 eslint 代码质量检测插件 prettier 规则可以自定义 vetur vue代码高亮
2.进入 文件=>首选项=>设置=>用户=>扩展=>eslint>在seeting.json文件中编写 加上去下面的代码
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
// 默认用户保存的时候自动 实现eslint代码标准
3.有一个刚安装好的vue脚手架 我的是 @vue/cli 4.0 版本了
打开 .eslintrc.js文件 在rules 里面加入下面的话 是我们自定义的规则
rules: {
'prettier/prettier': [
'error',
{
semi: false, // 结尾分号 false是关闭 true是打开
singleQuote: true, // 单引号 true是打开 false是关闭
printWidth: 160 // 默认代码多少个换行 我这里设置160
}
]
}
4.运行测试 在我们的怕package.json 文件中的
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint" // 这句话是启动我们的 eslintrc.js 配置文件的命令 默认这句话是有的
}
我们启动一下 npm run lint 运行成功后
看了一下 我们 脚手架的入口文件 main.js 是不是所有的 引号都变成了单引号 结尾还没有分号
我们随便修改一下代码 保存 他也会自动帮我们调整成符合eslint标准格式的代码 是不是很舒服 大家快去试试把
以上这篇在vue中使用eslint,配合vscode的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化，本文将通过代码示例为大家详细的介绍一下vue watch如何监听数据变化,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue页面右下角添加悬浮按钮组件的方法代码,在Vue项目中,通过在顶层路由文件中添加代码,可以实现页面左下角悬浮按钮的功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-11-11
less是css预处理器,对原先css进行了扩展和补充,下面这篇文章主要给大家介绍了关于vue2中less的安装以及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
缓存清除成为克服浏览器缓存中过时内容挑战的关键技术,术语“缓存清除”是指故意使静态资源失效或进行版本控制,迫使浏览器在发生更改时获取新资源,本文给大家介绍了Vue如何清除缓存,需要的朋友可以参考下2023-12-12
VUE获取Promise对象中PromiseResult中的数据(最新推荐)
如果想要在接口请求方法的外面拿到请求的结果,再做相关数据处理,往往我们拿到的却是一个Promise对象,那么遇到这样的问题如何解决呢,下面小编给大家带来了VUE 项目中 如何获取Promise对象中的PromiseResult中的数据 ,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家详细介绍了vue中使用Pinia是五个实用技巧,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下2023-11-11
vue3与webpack5安装element-plus样式webpack编译报错问题解决
这篇文章主要介绍了vue3与webpack5安装element-plus样式webpack编译报错,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
本篇文章主要介绍了vue如何在自定义组件中使用v-model，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Intellij IDEA搭建vue-cli项目的方法步骤,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了vue实现原生下拉刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论