详解eslint在vue中如何使用
1、说明
eslint帮助我们检查代码的是否规范，本文使用Prettier规则（还有standardjs、airbnb等规则），如果你想用eslint默认规则或者自行定义规则，可以不下载prettier相关依赖包（同时在.eslintrc.js删掉带‘prettier'的相关配置，不删除配置又没有下载prettier项目启动会报错）。我在vscode环境下载eslint插件可以在保存时根据rules格式化不规范的代码。
2、下载相关依赖包
"eslint"
"babel-eslint"
"eslint-config-prettier"
"eslint-loader"
"eslint-plugin-prettier"
"eslint-plugin-vue"
3、配置文件.eslintrc.js（还有其他方式配置规则）
在项目根目录新建文件.eslintrc.js，内容如下（可根据自己的需求配置）：
module.exports = {
root: true, // 只将当前项目应用此规则
parserOptions: {
"parser": "babel-eslint",
"sourceType": 'module', // 设置为 "module" ，"script" (默认)
// "ecmaVersion": 6 // 启用es6语法，不自动启用es6全局变量
},
parser: "vue-eslint-parser", // 识别.vue文件 需下载eslint-plugin-vue
// 想启用的环境
env: {
"browser": true,
"node": true,
"es6": true
},
//继承插件的规则
extends: [
"eslint:recommended", // 启动被标记为 “√” 默认规则
"plugin:prettier/recommended" // 别人写好的规则，依赖包eslint-config-***，这里用的是prettier规则
],
// 配置插件名字的列表。插件名称可以省略 ‘eslint-plugin- '前缀。
plugins: [
'vue', // eslint-plugin-vue
'prettier' // eslint-plugin-prettier
],
// 自定义规则 优先级最高
"rules": {
"no-console": 0
}
}
4、在vscode(版本1.44.0)配置保存时自动格式化代码
vscode下载插件eslint,打开settings.json文件，添加：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
其他版本配置或略有不同，比如在版本1.36.1上如图配置方可生效
5、在package.json添加scripts命令：eslint 检测并自动修复
"eslint": "eslint --fix --ext .js,.vue --ignore-path .eslintignore ."
eslintignore是配置检测时忽略的文件
6、项目关闭eslint验证
这里以vue-cli3及以上版本为例，只需在vue.config.js中添加如下配置
lintOnSave: false
7、eslint 中文文档
https://eslint.bootcss.com/docs/user-guide/getting-started
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！
相关文章
解决nuxt页面中mounted、created、watch执行两遍的问题
这篇文章主要介绍了解决nuxt页面中mounted、created、watch执行两遍的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue3 Reactive响应式原理逻辑详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
本文主要实现vue项目中,消息列表逐条向上无缝滚动,每条消息展示10秒后再滚动,为了保证用户能看清消息主题,未使用第三方插件,本文实现方法比较简约,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了用Vue.js递归组件构建一个可折叠的树形菜单的教学内容，有兴趣的朋友跟着学习下。2017-12-12
Vue之el-select结合v-if动态控制template显示隐藏方式
这篇文章主要介绍了Vue之el-select结合v-if动态控制template显示隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
在我工作过程中使用el-dialog的需求挺多的,也积累了一下使用技巧,这篇文章主要给大家介绍了关于VUE学习宝典之el-dialog使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue左侧菜单,树形图递归实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
混入mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能，一个混入对象可以包含任意组件选项，接下来通过本文给大家介绍VUE mixin 使用,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了vue实现移动端返回顶部，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了vue子组件created方法不执行问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论