一、ESLint
协同开发过程中,经常感受到来自代码检视的恶意。代码习惯不一致,看半天;居然提交低级错误,我的天(??□′)?︵┻━┻!...研究了一番,决定使用ESLint来做代码规范检查。
二、配置方式
- 注释:通过 注释把配置信息嵌入代码中。
- package.json:在package.json文件中的eslintConfig字段中指定配置。
- 配置文件:通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息,ESlint会查找并且自动读取配置文件。
三、配置过程(配置文件)
安装相关npm包
yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev
增加文件
- .eslintignore 用来配置不需要检查的文件(类似git的.gitignore)。
- .eslintrc.js 用来配置ESlint验证规则的配置文件。
修改webpack配置文件
module.exports = {
module: {
rules: [
test: /\\.(js|vue)$/,
loader: \"eslint-loader\",
enforce: \"pre\",
//指定检查的目录
include: [resolve(__dirname, \'src\')],
//eslint检查报告的格式规范
options: {
formatter: require(\"eslint-friendly-formatter\")
}
]
}
}
四、配置文件详解
以.eslintrc.js为例
module.exports = {
//一旦配置了root,ESlint停止在父级目录中查找配置文件
root: true,
//解析器
parser: \"babel-eslint\",
//想要支持的JS语言选项
parserOptions: {
//启用ES6语法支持(如果支持es6的全局变量{env: {es6: true}},则默认启用ES6语法支持)
//此处也可以使用年份命名的版本号:2015
ecmaVersion: 6,
//默认为
sourceType: \"module\",
//支持其他的语言特性
ecmaFeatures: {
//...
}
},
//代码运行的环境,每个环境都会有一套预定义的全局对象,不同环境可以组合使用
env: {
es6: true,
browser: true,
jquery: true
},
//访问当前源文件中未定义的变量时,no-undef会报警告。
//如果这些全局变量是合规的,可以在globals中配置,避免这些全局变量发出警告
globals: {
//配置给全局变量的布尔值,是用来控制该全局变量是否允许被重写
test_param: true
},
//支持第三方插件的规则,插件以eslint-plugin-作为前缀,配置时该前缀可省略
//检查vue文件需要eslint-plugin-vue插件
plugins: [\"vue\"],
//集成推荐的规则
extends: [\"eslint:recommended\", \"plugin:vue/essential\"],
//启用额外的规则或者覆盖默认的规则
//规则级别分别:为\"off\"(0)关闭、\"warn\"(1)警告、\"error\"(2)错误--error触发时,程序退出
rules: {
//关闭“禁用console”规则
\"no-console\": \"off\",
//缩进不规范警告,要求缩进为2个空格,默认值为4个空格
\"indent\": [\"warn\", 2, {
//设置为1时强制switch语句中case的缩进为2个空格
\"SwitchCase\": 1,
//分别配置var、let和const的缩进
\"VariableDeclarator\": { \"var\": 2, \"let\": 2, \"const\": 3 }
}],
//定义字符串不规范错误,要求字符串使用双引号
quotes: [\"error\", \"double\"],
//....
//更多规则可查看http://eslint.cn/docs/rules/
}
}
使用 注释启用或禁止指定规则
/* eslint-disable */ alert(\'message\'); /* eslint-enable no-alert, no-console*/ ...
层叠配置
ESlint支持层叠配置,检测文件的规则是其目录层级结构中所有.eslintrc文件的组合,当规则冲突的时候,离检测文件最近的规则优先。
默认情况下,ESlint会沿着父级目录网上寻找配置文件,直到根目录。如果配置文件中有root: true,则ESlint会停止在父级目录中查找。
五、配置过程中出现的问题
出现错误:Use the latest vue-eslint-parser。
解决方法: 把parser: \"babel-eslint\"移动到parserOptions中。
{
//parser: \"babel-eslint\",
parserOptions: {
parser: \"babel-eslint\",
//...
}
}
问题原因: eslint-plugin-vue中的很多规则都需要vue-eslint-parser检查<template>, vue-eslint-parser和babel-parser二者有冲突。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
下一篇 :
微软宣布重大重组计划:成立两大新部门
-
汇编(四)字的存储、DS和[address]、字的传送、mov、add、sub指令、数据段
2026-05-19栏目: 教程
-
elasticsearch之索引管理API(Index management)
2026-05-19栏目: 教程
-
简单介绍几种Java后台开发常用框架组合
2026-05-19栏目: 教程
-
<丰田发布了LQ EV概念车>。丰田全新的概念车配备了AI代理和自动驾驶功能,这是丰田美国公司研究员开发的,首次的公开亮相将在本月23日。在2017年CES消费车展上丰田曾展示了 Concept-Ai i概念车
2026-05-19栏目: 教程
-
Sysweld笔记:利用稳态算法加速算法模拟焊接过程的残余应力
2026-05-19栏目: 教程
