eslint系统笔记

1、配置文件格式

创建配置文件时，选择js格式，因为eslint加载优先级是：
js>yaml>json

2、 js格式使用模块化模式

添加配置文件时，选择commonjs导出配置数据
推荐使用commonjs
一般，vue react脚手架，内部webpack打包默认用CommonJS
eslint配置文件尽可能保持一致

3、 env节点

告诉eslint，当前代码在那些环境中，
开发中，使用一些运行环境的API，
eslint会报错，所以

   "env": {
            "browser": true,
            "node": true
        }
1
2
3
4

###4、extends
继承一些规范，不用自己费劲配了
内置的和第三方的

standard需要下载npm包
可以去nodemodules里面
eslint-config-standard/eslintrc.json学习人家的规范
extends: ['standard']



内置的
//eslint/conf可以看见这个内置配置文件
extend:"eslint:recommended"
1
2
3
4
5
6
7
8
9
10

5、global

告诉全局有个$变量，可以直接用，不要报错
true表示可读可写，false,只可读

"globals":{
	"$":true
}
1
2
3

6、parserOptions

解析器的选项配置

    parserOptions: {
        parser: 'babel-eslint'
    },
1
2
3

7、规则

    rules: {
    	//警告等级
        "semi":0｜1｜2
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'func-names': 0, // 使用具名函数
        'arrow-body-style': 0, // 箭头函数要求必须有函数体
        'import/extensions': 0, // 扩展名称
        'import/no-unresolved': 0, // 找不到路径
        'import/no-extraneous-dependencies': 0,
        'no-return-assign': 0, // 返回的结果中使用了等于
        'max-len': 0, // 一行不可过长
        'consistent-return': 0, // if语句的问题
        'jsx-a11y/no-static-element-interactions': 0, // 绑定函数检验
        'jsx-a11y/anchor-has-content': 0,
        'jsx-a11y/href-no-hash': 'off',
        'jsx-a11y/anchor-is-valid': ['warn', { aspects: ['invalidHref'] }],
        'comma-dangle': ['error', 'never'],
        // warnning
        'no-debugger': 2,


        'indent': ['error', 4, { 'SwitchCase': 1 }], // indent 为4空格
        'quotes': ['error', 'single'], // 双引号
        // 'semi': ['error', 'always'], // 结尾分号
        'vars-on-top': 2, //var必须放在作用域顶部

        // 永久关闭
        'no-await-in-loop': 0, // for循环中可以用await
        'jsx-a11y/anchor-is-valid': 0,
        'no-mixed-operators': 0, // 字符混用的检验要关闭
        'no-restricted-syntax': 0, // 语法检查不要太严格
        'no-unused-vars': 0, // 回调函数中进程有无用参数，所以这个规则不要打开为好
        'no-else-return': 0, // return之后可以接else
        'no-lonely-if': 0, // 一个if也可以使用
        'import/no-dynamic-require': 0, // require不要动态的
        'global-require': 0, // require要在头部
        'radix': 0, // 默认10进制
        'import/prefer-default-export': 0, // 不要限定export几个
        'no-continue': 0, // 允许使用continue
        'linebreak-style': 0,
        'promise/always-return': 0, // promise 必须返回值
        'promise/no-callback-in-promise': 0, // promise中不用调用callback
        'camelcase': 0, // 驼峰模式
        'no-restricted-globals': ['error', 'fdescribe'], // js的全局函数
        'no-underscore-dangle': 0, // 下划线的变量

        // 必须尽快酌情打开
        'handle-callback-err': 0, // 错误未处理

        // 'vue/require-v-for-key': 0,
        // 'no-shadow': 0,
        // 'prefer-arrow-callback': 0,
        // 'promise/catch-or-return': 0,
        // 'promise/no-nesting': 0,
        // 'array-callback-return': 0,
        // 'no-extra-semi': 0,
        // 'no-empty': 0,
        // 'vue/no-parsing-error': 0,
        // 'vue/no-invalid-template-root': 0,
        // 'import/no-duplicates': 0,
        // 'no-var': 0,
        // 'one-var': 0,
        // 'one-var-declaration-per-line': 0,
        // 'no-useless-return': 0,
        // 'no-unused-expressions': 0,
        // 'dot-notation': 0,
        // 'no-tabs': 0,
        // 'no-mixed-spaces-and-tabs': 0,
        // 'vue/no-invalid-v-model': 0,
        // 'vue/no-invalid-v-for': 0,
        // 'no-empty-function': 0,
        // 'no-use-before-define': 0,
        // 'default-case': 0,
        // 'object-curly-spacing': 0,

        // 未来会陆续打开
        'space-before-function-paren': 0, // 函数后要有空格
        'no-useless-escape': 0, // 用不到的字符
        'promise/avoid-new': 0, // 不要使用new Promise
        'class-methods-use-this': 0, // 没用this的方法要改为静态的
        'quote-props': 0, // object的key不用引号
        'import/first': 0, // import要先，逻辑在后
        'spaced-comment': 0, // 注释中要求头尾空格
        'object-shorthand': 0, // class 中的方法不要些function
        'arrow-parens': 0, // 箭头函数的参数括号问题
        'guard-for-in': 0, // for in 要对key类型判断
        'import/newline-after-import': 0, // import 最后一个换行
        'no-plusplus': 0, // 暂时允许++
        'no-return-await': 0, // 暂时允许在async中返回await
        'prefer-template': 0, // 字符串用模版，不要用相加
        'no-param-reassign': 0, // 参数重新赋值
        'prefer-destructuring': 0 // 建议使用结构赋值
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

eslintignore

/build/
/config/
/dist/
/src/
/node_modules
/dist
/src/assets/js
/src/views
/package-lock.json
.DS_Store
vue.config.js
1
2
3
4
5
6
7
8
9
10
11

/hello/*    // 开头有“/”，匹配相对于`.gitignore`文件本身的目录级别的。
hello/      // 结尾“/”， 匹配任意级别的hello目录下的所有目录（不包含文件）
hello.*     // 匹配以hello.开头的文件或者文件夹
hello/*     // 匹配hello目录下的所有目录和文件
!/foo/bar   // 排除目录 foo/bar 之外的所有内容
**/foo      // 前导 " `**`"，在所有目录中匹配， 与foo相同
foo/**      // 尾随的“ `/**`”匹配里面的所有内容。匹配目录“ `foo`”下的所有文件
1
2
3
4
5
6
7

需要注意的是：!

 例如：想忽略src下面的所有目录和文件，但除去src/views/hello目录。
 
 src/*              // 排除src目录下面所有的
 !src/views/        // src/views下面所有的目录重新被包含回来
 src/views/*        // 排除 src/views下面所有的目录
 !src/views/hello/  // src/views/hello下面所有的目录重新被包含回来
1
2
3
4
5
6

总结

eslint包是编译的时候报错的
exlint扩展工具，是写代码时爆红的

检查严格程度
all>airbnb-base>standard>recommended
1
2
3
4
5