自定义ESlint风格[JS及VUE]

ESlint介绍

ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。ESLint 这样的工具可以让程序员在编码的过程中发现问题，而不是在执行的过程中发现问题。

ESlint配置

以下是我在项目中的配置，基于自己平时写代码的风格进行修改，并标明了备注。

JavaScript配置

// 除生产环境下开启控制台
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
// 除生产环境下开启断点模式
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
// 禁止在对象中使用getter/setter
"accessor-pairs": 2,
// => 括号 前/后必须有空格
"arrow-spacing": [2, {
    "before": true,
    "after": true
}],
// 块代码保持有两端有空格
"block-spacing": [2, "always"],
// 大括号方式
"brace-style": [2, "1tbs", {
    "allowSingleLine": true
}],
// 驼峰命名
"camelcase": [0, {
    "properties": "always"
}],
// 对象字面量项尾不能有逗号
"comma-dangle": [2, "never"],
// 逗号前后的空格
"comma-spacing": [2, {
    "before": false,
    "after": true
}],
// 逗号风格，换行时在行首还是行尾
"comma-style": [2, "last"],
// 非派生类不能调用super，派生类必须调用super
"constructor-super": 2,
// 必须使用 if(){} 中的{}
"curly": [2, "multi-line"],
// 对象访问符的位置，换行的时候在行首还是行尾
"dot-location": [2, "property"],
// 文件以单一的换行符结束
"eol-last": 2,
// 必须使用全等
"eqeqeq": [2, "always", {"null": "ignore"}],
// 生成器函数*的前后空格
"generator-star-spacing": [2, {
    "before": true,
    "after": true
}],
// nodejs 处理错误
"handle-callback-err": [2, "^(err|error)$"],
// 缩进风格
"indent": [2, 4, {
    "SwitchCase": 1
}],
// jsx引号
"jsx-quotes": [2, "prefer-double"],
"key-spacing": [2, {
    "beforeColon": false,
    "afterColon": true
}],
// 关键词空格
"keyword-spacing": [2, {
    "before": true,
    "after": true
}],
// 函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
"new-cap": [2, {
    "newIsCap": true,
    "capIsNew": false
}],
// new时必须加小括号
"new-parens": 2,
// 禁止使用数组构造器
"no-array-constructor": 2,
// 禁止使用arguments.caller或arguments.callee
"no-caller": 2,
// 禁止给类赋值
"no-class-assign": 2,
// 禁止在条件表达式中使用赋值语句
"no-cond-assign": 2,
// 禁止修改const声明的变量
"no-const-assign": 2,
// 禁止在正则表达式中使用控制字符
"no-control-regex": 0,
// 不能对var声明的变量使用delete操作符
"no-delete-var": 2,
// 函数参数不能重复
"no-dupe-args": 2,
// 禁止在class中使用重复名称
"no-dupe-class-members": 2,
// 在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-keys": 2,
// switch中的case标签不能重复
"no-duplicate-case": 2,
// 正则表达式中的[]内容不能为空
"no-empty-character-class": 2,
// 禁止使用eval
"no-eval": 2,
// 禁止给catch语句中的异常参数赋值
"no-ex-assign": 2,
// 禁止直接修改内置对象的原型。
"no-extend-native": 2,
// 禁止不必要的函数绑定
"no-extra-bind": 2,
// 禁止不必要的bool转换
"no-extra-boolean-cast": 2,
// 禁止非必要的括号
"no-extra-parens": [2, "functions"],
// 禁止switch穿透 必须有break等
"no-fallthrough": 2,
// 禁止省略浮点数中的0，如0.3写成.3
"no-floating-decimal": 2,
// 禁止重复的函数声明
"no-func-assign": 2,
// 禁止使用隐式eval
"no-implied-eval": 2,
// 禁止在块语句中使用声明（变量或函数）
"no-inner-declarations": [2, "functions"],
// 禁止无效的正则表达式
"no-invalid-regexp": 2,
// 不能有不规则的空格
"no-irregular-whitespace": [1, {
    "skipStrings": true,
    "skipComments": false,
    "skipRegExps": false,
    "skipTemplates": true
}],
// 禁止使用__iterator__ 属性
"no-iterator": 2,
// label名不能与var声明的变量名相同
"no-label-var": 2,
// 禁止标签声明
"no-labels": [2, {
    "allowLoop": false,
    "allowSwitch": false
}],
// 禁止不必要的嵌套块
"no-lone-blocks": 2,
// 禁止混用tab和空格
"no-mixed-spaces-and-tabs": 2,
// 不能用多余的空格
"no-multi-spaces": 2,
// 字符串不能用\换行
"no-multi-str": 2,
// 空行最多不能超过1行
"no-multiple-empty-lines": [2, {
    "max": 1
}],
// 不能重写native对象
"no-native-reassign": 2,
// in 操作符的左边不能有!
"no-negated-in-lhs": 2,
// 禁止使用new Object()
"no-new-object": 2,
// 禁止使用new require
"no-new-require": 2,
// 禁止使用new symbol
"no-new-symbol": 2,
// 禁止使用new创建包装实例，new String new Boolean new Number
"no-new-wrappers": 2,
// 不能调用内置的全局对象，比如Math() JSON()
"no-obj-calls": 2,
// 禁止使用八进制数字
"no-octal": 2,
// 禁止使用八进制转义序列
"no-octal-escape": 2,
// 禁止使用__proto__属性
"no-proto": 2,
// 此规则允许Object.prototype直接在对象实例上调用某些方法。
"no-prototype-builtins": 0,
// 禁止重复声明变量
"no-redeclare": 2,
// 禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-regex-spaces": 2,
// return 语句中不能有赋值表达式
"no-return-assign": [2, "except-parens"],
// 禁止自己赋值自己
"no-self-assign": 2,
// 不能比较自身
"no-self-compare": 2,
// 禁止使用逗号运算符
"no-sequences": 2,
// 严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-shadow-restricted-names": 2,
// 函数调用时 函数名与()之间不能有空格
"no-spaced-func": 2,
// 禁止稀疏数组， [1,,2]
"no-sparse-arrays": 2,
// 在调用super()之前不能使用this或super
"no-this-before-super": 2,
// 禁止抛出字面量错误 throw "error";
"no-throw-literal": 2,
// 一行结束后面不要有空格
"no-trailing-spaces": 2,
// 不能有未定义的变量
"no-undef": 2,
// 变量初始化时不能直接给它赋值为undefined
"no-undef-init": 2,
// 避免多行表达式
"no-unexpected-multiline": 2,
// 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unneeded-ternary": [2, {
    "defaultAssignment": false
}],
// 不能有无法执行的代码
"no-unreachable": 2,
// 禁止在方法后面直接抛出错误
"no-unsafe-finally": 2,
// 不能有声明后未被使用的变量或参数
"no-unused-vars": [2, {
    "vars": "all",
    "args": "none"
}],
// 禁止不必要的call和apply
"no-useless-call": 2,
// 禁止不必要地使用计算出的属性键
"no-useless-computed-key": 2,
// 可以在不更改行为的情况下使用转义符
"no-useless-escape": 0,
// 禁止在.后面加空格
"no-whitespace-before-property": 2,
// 禁止使用with
"no-with": 2,
// 换行时运算符在行尾还是行首
"operator-linebreak": [2, "after", {
    "overrides": {
        "?": "before",
        ":": "before"
    }
}],
// 块语句内行首行尾是否要空行
"padded-blocks": [2, "never"],
// 引号类型 `` '' ""
"quotes": [2, "double", {
    "avoidEscape": true,
    "allowTemplateLiterals": true
}],
// 语句强制分号结尾
"semi": [2, "always"],
// 分号前后空格
"semi-spacing": [2, {
    "before": false,
    "after": true
}],
// 不以新行开始的块{前面要不要有空格
"space-before-blocks": [2, "always"],
// 函数定义时括号前面要不要有空格
"space-before-function-paren": [2, "never"],
// 小括号里面要不要有空格
"space-in-parens": [2, "never"],
// 中缀操作符周围要不要有空格
"space-infix-ops": 2,
// 一元运算符的前/后要不要加空格
"space-unary-ops": [2, {
    "words": true,
    "nonwords": false
}],
// 注释要有空格
"spaced-comment": [2, "always", {
    "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]
}],
// 禁止在模板文字内部的有多余的空格
"template-curly-spacing": [2, "never"],
// 禁止比较时使用NaN，只能用isNaN()
"use-isnan": 2,
// 必须使用合法的typeof的值
"valid-typeof": 2,
// 立即执行函数表达式的小括号风格
"wrap-iife": [2, "any"],
// yield *前后空格
"yield-star-spacing": [2, "both"],
// 禁止尤达条件
"yoda": [2, "never"],
// 首选const
"prefer-const": 2,
// 是否允许非空数组里面有多余的空格
"array-bracket-spacing": [2, "never"]

VUE配置

// vue模板中的标签属性单行最多3个，多行最多1个
"vue/max-attributes-per-line": [2, {
    "singleline": 3,
    "multiline": {
        "max": 1,
        "allowFirstLine": false
    }
}],
// vue文件名称必须为PascalCase风格
"vue/name-property-casing": ["error", "PascalCase"],
// vue模板中可以使用v-html
"vue/no-v-html": "off",
// vue模板中空格为4个
"vue/html-indent": [2, 4],
// vue脚本中空格为4个
"vue/script-indent": ["error", 4, {
    "baseIndent": 1,
    "switchCase": 1,
    "ignores": []
}],
// vue模板组件属性顺序
"vue/attributes-order": ["error", {
    "order": [
        "DEFINITION",
        "LIST_RENDERING",
        "CONDITIONALS",
        "RENDER_MODIFIERS",
        "GLOBAL",
        "UNIQUE",
        "TWO_WAY_BINDING",
        "OTHER_DIRECTIVES",
        "OTHER_ATTR",
        "EVENTS",
        "CONTENT"
    ]
}],
// vue组件js内顺序
"vue/order-in-components": ["error", {
    "order": [
        "el",
        "name",
        "parent",
        "functional",
        ["delimiters", "comments"],
        ["components", "directives", "filters"],
        "extends",
        "mixins",
        "inheritAttrs",
        "model",
        ["props", "propsData"],
        "data",
        "computed",
        "watch",
        "LIFECYCLE_HOOKS",
        "methods",
        ["template", "render"],
        "renderError"
    ]
}],
// 禁止没有元素属性右尖角括号换行
"vue/html-closing-bracket-newline": ["error", {
    "singleline": "never",
    "multiline": "never"
}],
// vue模板html内容自动换行
"vue/multiline-html-element-content-newline": ["error", {
    "ignoreWhenEmpty": true,
    "ignores": ["pre", "textarea"],
    "allowEmptyLines": true
}],
// 禁止vue模板内部标签自己关闭
"vue/html-self-closing": ["error", {
    "html": {
        "void": "never",
        "normal": "never",
        "component": "never"
    },
    "svg": "never",
    "math": "never"
}]