如何创建自己的ESLint配置包
Contents
前言
作为一个爱折腾的前端码农，经常会玩一些自己的项目，为了代码质量，每个项目都会单独配置自己的Eslint 规则，随着项目越来越多，每个项目都可能有自己的规则，这是一件很不好的事情。
Eslint的设计是完全可配置的，我们可以去启用/关闭每个规则，或混合规则达到我们的目的。
考虑到这一点，JavaScript社区和使用JavaScript的公司可以扩展原始的ESLint配置。npm 仓库中也有着很多优秀的事例:https://www.npmjs.com/search?q=eslint-config
eslint-config-airbnb 是我们平时用的最多的包之一。借鉴社区这些包的经验，为了解决我们自己的配置问题，我们今天来看一下如何创建自己的Eslint库
建立项目
首先，我们需要创建一个新的文件夹和npm项目，按照约定https://eslint.org/docs/developer-guide/shareable-configs，我们的包名需要以eslint-config-开头，例如：eslint-config-preset
mkdir eslint-config-test
cd eslint-config-test
npm init一路点击下一步之后，我们会得到这样的package.json
{
"name": "eslint-config-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}下面，我们来添加我们需要的相关依赖
npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier在eslint-config-test 文件夹下新建index.js
module.exports = {
extends: [
'airbnb',
'eslint:recommended',
'plugin:import/errors',
'plugin:react/recommended',
'plugin:jsx-a11y/recommended',
'plugin:prettier/recommended',
'prettier/react',
],
plugins: [
'react-hooks',
],
rules: {
},
};rules 对象是我们要覆盖的所有规则，这里我们留空，大家可根据需要作出相应修改
https://github.com/airbnb/javascript/issues/1089 在Airbnb / JavaScript仓库中，为我们说明了有哪些规则可被我们修改
拓展
有时候我们写的项目是React 或者Vue，对于不同架构的项目，我们的规则可能有所不同，这里我利用lerna 封装了一个多包项目，里面包含了Typescript React Vue等项目配置
https://github.com/osdoc-dev/eslint-config-preset
具体源码，大家可看一下
使用方法也很简单
npm i @osdoc-dev/eslint-config-preset -D # yarn add @osdoc-dev/eslint-config-preset -D// .eslintrc.js
module.exports = {
"extends": "@osdoc-dev/eslint-config-preset"
}到此，该文就结束了，很短也很简单。后续自己的项目都会使用这个配置去进行约束代码风格，避免重复劳动