.eslintrc.js 的死磕

[mask2012]

序

eslint审查会引起报错级别的反馈，页面开发无法进行下去，这种天然的严格，让我们的代码看起来都像一坨屎一样，哪哪都不对，什么结尾分号，单引号双引号，都会跟我说写错了，然后程序就报错，停下来，着实有点接受不了。
经过不断的struggle，得出一些解决方案记录一下。

背景环境

使用vue-cli4脚手架工具提供的vue ui管理新建的新项目，vscode则是安装vetur插件，prettier插件

背景知识

Eslint
eslint是代码风格检查工具，在它之前，一直是jslint当道，而后来ECMAScript 6出现了，jslint的机制无法胜任需求了，eslint脱颖而出。他凭什么能脱颖而出呢？
因为eslint使用的是AST（Abstract Syntax Tree）抽象语法树机制，AST不依赖于具体的文法，不依赖于语言的细节，它将源代码转化为AST后，可以对AST做很多的操作，包括一些你想不到的操作，这就相当于拿到代码不是直接开始检查，而是先分析出元素，然后根据规则进行二次书写。
AST机制可以做

• 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等（如jslint）
• 代码混淆压缩（如UglifyJS）
• 优化变更代码，改变代码结构使达到想要的结构（如TypeScript到javascript的转换，es6到es5的转换）

正因为eslint可以做到es6到es5的转换，所以eslint更适合目前的需求。

在vue项目中配置eslint规则
在项目的根目录会有 .eslintrc.js 文件，eslint是根据这里边的规则工作的，

eslint的规则中文版
https://cn.eslint.org/docs/rules/
eslint的规则另一版本
https://cloud.tencent.com/developer/section/1135626

参考资料
深入理解 ESLint
https://blog.csdn.net/VhWfR2u02Q/article/details/98127371
AST语法树
https://blog.csdn.net/weixin_39408343/article/details/95984062
EsLint简介
https://www.jianshu.com/p/933b6b6a84c9

prettier
prettier是最近流行起来的一个代码格式化工具，他区别于别家代码格式化工具的特点是他有printWidth这个特性，当代码里存在换行可能性的时候，他会根据printWidth设定好的值来决定是否要换行
如下边这段
var demo=[{a:1},{a:1,b:2,c:3},{a:1,b:2,c:3},{a:1,b:2,c:3},{a:1,b:2,c:3},]

如果你设定的printWidth的是60（printWidth宽度计算是一个字符算一列）
prettier首先会尝试把他格式化成一行
var demo = [{ a: 1 }, { a: 1, b: 2, c: 3 }, { a: 1, b: 2, c: 3 }, { a: 1, b: 2, c: 3 }, { a: 1, b: 2, c: 3 }]

可以看到数组元素之间加上了空格，json值也加好了空格。
如果这一行的最大列数是50，不超过printWidth设定好的60，就维持现在这个样子，如果超过了60，就不会保持在一行了，而是下边这个样子

var demo = [
	{ a: 1 },
	{ a: 1, b: 2, c: 3 },
	{ a: 1, b: 2, c: 3 },
	{ a: 1, b: 2, c: 3 },
	{ a: 1, b: 2, c: 3 },
	{ a: 1, b: 2, c: 3 }
]

特别注意的是如果代码前边有缩进，也是会算入列的

另外prettier也提供了一些额外的参数调整格式化配置，在vscode里ctrl+, 调出settings，输入prettier即可调整这些配置。

/*  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验

在vscode配置的时候是图形化的，但本质是一个东西

eslint的常见报错

解决原则，极重要

1.查看每个报错的出处，根据这个出处，查找 .eslintrc.js 里对应的rules规则，如果这个规则很严格，而我们不需要这么严格，就放松标准，修改标准
2.如果在 .eslintrc.js里未找到此规则，说明这个是默认值，这时需要查找文档，弱化规则然后加进去 基本文档 vue相关lint文档
3.特别注意的是，修改规则后，并不会立马生效，需要重启项目，并且代码有变化（如果代码无变动不会引起lint检查，这个是死磕半天才发现滴）

常见报错1 Missing space before function parentheses

这个是data() {...} 函数名后边必须要有空格 data () {...} ，而prettier的格式化规则就是没空格的，所以要么不用prettier做格式化，要么修改这个规则。
修改规则就是加入 'space-before-function-paren': 0, ，然后重启项目

常见报错2 Expected indentation of 2 spaces but found 4 spaces

这个是缩进为2个空格，还是4个空格，对于我习惯4个了的人，只能去修改这个规则。
这里就用到了上边的解决原则，可以看到报错的是vue/html-indent ，然后eslint配置文件里并没有这个配置，说明严格是它的默认配置，这是就要找到vue/html-indent默认是怎么配的，把他关掉。(https://eslint.vuejs.org/rules/html-indent.html)

'vue/html-indent': [
    'error',
    2
],

第一个参数是报错级别，有off，warn，error。分别代表 关闭，警告但流程继续，错误并停下流程，一般来说，修改成off，这事就搞定了。
off,warn,error字符串也可以是数字，分别是0，1，2
所以余下的解决方法都可以把第一项改成 'off' 或者 0 就可以了

'vue/html-indent': [
    'off',
    2
],

别忘了重启项目

常见报错3 strings must use singlequote

这个是quotes规则，引号限制可严可松，知道在哪配置就行了 ， avoidEscape填true就可以放松要求

quotes: [
    0,
    'single',
    {
        avoidEscape: true,
        allowTemplateLiterals: true
    }
],

别忘了重启项目

常见报错4 Extra semicolon

这个可以看到是semi规则，就是每行结尾是否要分号，我选择放松要求。通过文档可以看到

semi: [
    0,
    'never',
    {
        beforeStatementContinuationChars: 'never'
    }
],

别忘了重启项目

大招

很多人都选择了这个大招，那就是禁用eslint，方法如下：
根目录下找到.eslintrc.js 找到 extends: ['plugin:vue/strongly-recommended', '@vue/standard'], 然后注释掉'@vue/standard' 重启项目即可

一点感想

和Eslint死磕了一下午，加上写文章，总算是把eslint这个可恶的家伙降服了一点，不是大伙不想用你，是你在规则严格的同时又没有提供亲和力的配置项（很多配置项默认是很严格的，但并不出现在配置文件里，我可是花了几个小时才摸索到那条重要原则的） ， 导致很多人都禁用了eslint