eslint配置文件之基本字段解释

mscinsidious

2019-10-12

规则知识点

配置文件读取优先级顺序：
eslintrc.js
eslintrc.yaml
eslintrc.yml
eslintrc.json
eslintrc
package.json

配置rules数值规则：
"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

字段详解

基础字段：

{
    // 别人可以直接使用你配置好的ESLint, ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
    "root": true,
    
    // 指定解析器
    "parser": "babel-eslint",
    
    // 指定解析器选项，EsLint通过parserOptions，允许指定校验的ecma的版本，及ecma的一些特性
    "parserOptions": {
        "ecmaVersion": 2019, // 指定ECMAScript支持的版本，6为ES6
        "sourceType": "module", // 指定来源的类型，有两种”script”或”module”
        "ecmaFeatures": {
            "jsx": true // 启动JSX
        }
    },
    
    // 加入第三方插件，三方插件同样提供rules、extends等配置
    "plugins": ["vue"],
        
    // 继承别的规则配置文件
    "extends": [
        "eslint:recommended",
        "plugin:jest/recommended",
        "plugin:vue/recommended",
        "prettier"
    ],
    
    // 指定将在所有插件规则之间共享的设置
    "settings": {
        
    },
        
    // 指定规则
    "rules": {
        "no-new": 0, // 是否允许new构造函数不赋值给变量
        "no-shadow": 0, // 是否允许来自被屏蔽的变量的变量声明（比如一个被全局定义过的变量 是否允许在局部的function里再次被定义）
        "camelcase": 1, // 是否强制使用驼峰拼写法命名规定
        "no-bitwise": 0, // 按位操作的规则
        "func-names": 0, // 定义方法的规则
        "no-console": 0, // 是否允许使用console
        "no-plusplus": 0, // 是否允许 ++ -- 这样的操作写法
        "arrow-parens": 2, // 方法箭头左侧属性是否加()
        "comma-dangle": 0, // 结尾处k-v值后面是否允许逗号
        "default-case": 0, // switch-case语句是否强制加default case
        "prefer-template": 0, // 是否强制使用``这样的template字面量符号代替拼接字符串
        "consistent-return": 0, // 是否强制return指定值
        "no-param-reassign": 0, // 是否禁止参数变量再分配值
        "no-nested-ternary": 0, // 是否禁止嵌套三元表达式
        "operator-linebreak": 0, // 是否强制段行风格
        "object-curly-newline": 0, // 是否强制花括号内段行风格
        "no-underscore-dangle": 1, // 是否强制下划线变量命名风格
        "no-unused-expressions": 0, // 是否禁止不用的表达式存在
        "no-restricted-globals": 0, // 是否禁用特定的全局变量(可自定义)
        "function-paren-newline": 0, // 是否强制方法的参数换行
        "class-methods-use-this": 0, // 是否强制class函数体内出现this
        "implicit-arrow-linebreak": 0, // 是否不允许方法中=>右边换行
        "space-before-function-paren": 0, // 是否强制方法圆括号左边空格
        "max-len": ["error", {"code": 150}], // 是否强制代码一行内的字符上限
        "prefer-destructuring": 0, // 是否强制使用对象解构
    },
    
    // env：你的脚本将要运行在什么环境中
    // Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    
    // 指定你所要使用的全局变量，true代表允许重写、false代表不允许重写
    "globals": {
        "window": false,
        "document": false,
        "navigator": false
    }
},

eslint-plugin-vue插件规则：

"rules": {
    "vue/no-v-html": 0, // 是否禁止v-html属性，为了防止XSS攻击
    "vue/attributes-order": 0, // 是否强制标签里的指令属性顺序
    "vue/require-v-for-key": 0, // 是否强制v-for中写:key
    "vue/require-default-prop": 0, // 是否强制props里每个prop里都要有默认值
    "vue/no-unused-components": 0, // 是否强制去掉未用到的组件
    "vue/max-attributes-per-line": 0, // 是否限制标签里的指令属性一行展示数量
    "vue/singleline-html-element-content-newline": 0, // 是否强制元素内容换行
    "vue/name-property-casing": ["error", "kebab-case"], // 是否强制组件name命名规则
   "vue/component-name-in-template-casing": ["error", "kebab-case"], // 强制指定组件在template里的使用规范
   "vue/html-closing-bracket-newline": 2, // 强制对标签的关闭括号>是否换行有要求 
}

未完待续。。。

eslint