vue项目Eslint工具的使用

一、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",
}