一、eslint基本配置
1、安装
- npm install -g eslint
- 安装如下相关依赖
"eslint": "^7.5.0",
"eslint-config-standard": "^14.1.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"extract-text-webpack-plugin": "^3.0.0",
2、创建.eslint.js文件
- 手动创建
- eslint --init创建(需要回答问题创建-可往下翻查看第二点eslint创建解释)
3、关于 eslint 的配置文件(eslint.js)
- root 限定配置文件的使用范围
- parser 指定eslint的解析器
- parserOptions 设置解析器选项
- extends 指定eslint规范,常用的大厂定义的规范有Airbnb、- - standard、google
- plugins 引用第三方的插件
- env 指定代码运行的宿主环境
- rules 启用额外的规则或覆盖默认的规则,我们可以自定义自己想要的规则
// "off"或0 -关闭规则
// “warn” 或1 - 开启规则, 使用警告 程序不会退出
// "error"或2 - 开启规则, 使用错误 程序退出 - globals 声明在代码中的自定义全局变量
module.exports = {
"extends": [
// "eslint:recommended",
"plugin:vue/essential",
‘standard’//引入规范
],
extends: 'eslint:recommended’, //允许执行eslint命令
rules: { //规则、制定eslint规则
'no-console': 'off’,//关掉 禁止 console命令
},
//全局变量配置
globals:{
'mui':true,
'Vue':true,
'ud':true,
'wx':true
}
};
4、webpack.base.conf.js配置
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
}
5、vscode设置
下载eslint、vetur,文件设置,相当于格式化代码,根据你的eslint规则设置更加方便
二、eslint创建解释
- eslint创建语句解释
1、如何使用eslint
2、项目使用那种模块
3、项目使用那个框架
4、项目是否使用typeScript
5、代码运行环境选择
6、你希望你的配置文件采用什么格式
7、文件配置需要如下文件
8、所有配置
三、常见eslint命令使用
- 忽略eslint的校验
/* eslint-disable */
console.log('yan')
/* eslint-disable */
- eslint.js文件rules规则常用校验
// 自定义指定规则
"rules": {
// 忽略空白报错
"no-irregular-whitespace": "off",
// 关闭标签闭合报错
"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
// 加分号,不加分号两者共存
// 强制在注释中 // 或 /* 使用一致的空格
"spaced-comment": "off",
// 关闭段落前空格的校验
"space-before-blocks": "off",
// 关闭v-for和v-if在一起的冲突
"vue/no-use-v-if-with-v-for":'off',
'space-before-function-paren': [
// 'error',
// { anonymous: 'always', named: 'never' }
// ],
// 强制在对象字面量的属性中键和值之间使用一致的间距
"key-spacing": "off",
// 强制在关键字前后使用一致的空格 (前后腰需要)
"keyword-spacing": "off",
// 禁止使用 Object 的构造函数
"no-new-object": "off",
// 禁止只允许[]创建新数组
"no-array-constructor": "off",
// prop 的默认值必须匹配它的类型 太严格了
'vue/require-valid-default-prop': 'off',
// 关闭仅一行代码的声明
"one-var": "off",
"semi": "off",
// 允许引号类型 '' "" ``
// 关闭仅引用单引号
"quotes": "off",
// 在方法和方法名字之间要有一个空格
"space-before-function-paren": "off",
// 关闭全等和等于的“===和==”的报错
"eqeqeq": "off",
// 开启验证驼峰允许下划线命名方式
"camelcase": "off",
// 将禁止new关掉
"no-new": "off",
// 关闭最后一行必须关闭
"eol-last": "off",
// 去掉尾随逗号校验
"comma-dangle": "off",
// 无用的return禁用
"no-useless-return": "off",
}