这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
eslint-config-airbnb
我们公司的规范选用的是airbnb，当我们去npmjs.com搜索eslint-config-airbnb的时候，可以看到第一个eslint-config-airbnb，查看其说明，可以看到如下内容
Our default export contains most of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. Note that it does not enable our React Hooks rules. To enable those, see the eslint-config-airbnb/hooks section. If you don't need React, see eslint-config-airbnb-base.
可以看到，eslint-config-airbnb针对react项目的，并且还有几个辅助插件。如果你是vue项目，那么你可以使用eslint-config-airbnb-base，我们搜vue的eslint相关的配置的时候，也会看到有很多文章也是介绍的关于使用该config的内容。
@vue/eslint-config-airbnb
不过我们公司的项目使用的是@vue/eslint-config-airbnb
$ npm install --save-dev @vue/eslint-config-airbnb
查看其使用说明，也可以看到如下内容
A part of its design is that this config may implicitly depend on other parts of Vue CLI setups, such as eslint-plugin-vue being extended in the same resulting config.
什么意思呢，它可能隐式依赖于vue-cli的一些内容，比如vue-plugin-vue，因此我们还需要安装eslint-plugin-vue
$ npm install --save-dev vue-plugin-vue
vue-eslint-parser
根据官方文档说明，
How to use a custom parser?
If you want to use custom parsers such as @babel/eslint-parser (opens new window)or @typescript-eslint/parser (opens new window), you have to use the parserOptions.parser option instead of the parser option. Because this plugin requires vue-eslint-parser (opens new window)to parse .vue files, this plugin doesn't work if you overwrite the parser option.
什么意思，vue-plugin-vue的解析器为vue-eslint-parser，不过如果你是ts项目（@typescript-eslint/parser）或者想使用es6以后的语法（@babel/eslint-parser），是需要在parserOptions里再额外配置的，因为eslint只允许直接配置一个parser。如果不配置vue-eslint-parser作为parser，只配置了比如@babel/eslint-parser，解析起来没有大问题。我本地运行它们两个的区别主要是template模版中一些字段的顺序问题，比如el-button, vue-eslint-parser的顺序为size, type, onclick事件, 而babel是先写的onclick事件
// 安装vue-eslint-parser
$ npm install --save-dev vue-eslint-parser
补充说明
项目比较老的话，可能还是使用的babel-eslint，10.+之后更新为@babel/eslint-parser了
.eslintrc的配置
module.exports = {
root: true,
env: {
browser: true,
},
extends: ['plugin:vue/recommended', '@vue/airbnb', 'prettier'],
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint',
},
};
补充说明
-
@vue/airbnb是我们在package.json文件中安装的
@vue/eslint-config-airbnb的简写 -
项目比较老了，还是使用的
babel-eslint -
并没有写rules，使用的是extends默认的，可以根据需要在其中进行扩展。默认的话，eslint错误目前是error哦，也就是页面报错，影响继续工作哦～
-
vue文件中的fileheader注释的头尾要写成尖括号哦～否则是会自动换行的，可能解析规则还是有些问题，js，react都不存在的哦～
-
关于为啥是
plugin:vue/recommended，以下内容摘自官网
- Configurations for using Vue.js 2.x.
- `"plugin:vue/essential"` ... `base`, plus rules to prevent errors or unintended behavior.
- `"plugin:vue/strongly-recommended"` ... Above, plus rules to considerably improve code readability and/or dev experience.
- `"plugin:vue/recommended"` ... Above, plus rules to enforce subjective community defaults to ensure consistency
强制力更强，也有项目是使用的plugin:vue/essential，这个看公司项目需求哦～～
- 关于eslint的其他内容，可以参看上期
// 举个栗子
<!--
* @Author: xxx
* @Email: xxx
* @Date: 2021-09-26 13:53:59
* @Last Modified by: lixz
* @Last Modified time: 2021-09-26 17:27:46
* @Description: xxx
* @Route: xxx
-->
关于自动格式化
- vscode下载
vetur, prettier, eslint, fileheader插件 - code-首选项-设置-用户
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.fontSize": 12,
"prettier.tabWidth": 4,
"prettier.singleQuote": true,
"prettier.semi": true,
"prettier.printWidth": 120,
"fileheader.LastModifiedBy": "xxx",
"fileheader.tpl": "/*\\r\\n * @Author: {author}\\r\\n * @Date: {createTime}\\r\\n * @Last Modified by: {lastModifiedBy}\\r\\n * @Last Modified time: {updateTime}\\r\\n * @Description: Description\\r\\n * @Route: Route\\r\\n */\\r\\n",
"fileheader.Author": "xxx",
"vetur.format.defaultFormatter.html": "js-beautify-html"
}
中途遇到一个stylelint和prettier的冲突，就是template中要不要加分号
<el-dialog title="提示" width="30%" center>
//....
</el-dialog>
如上，也就是说30%要不要加分号。我们的项目是以prettier为准，因此，在.stylelintrc的文件中添加了如下内容
"rules": {
"declaration-block-trailing-semicolon": null
}
其他同事有提stylelint-prettier插件，据说可以解决该问题。我个人是不爱装太多依赖的，如果再碰到第二个冲突的问题，我们就来验证一下这个问题。
总结
- 遇到问题先去官网，二手知识毕竟是别人加工过的，可能并不是适用于我们自己本身的项目。官网能让我们更明白很多事情为什么是这样
- 不要太迷信自己觉得权威的人的话，会影响自己的判断力
