如何创建自己的ESLint配置包

发布于 / 学习

前言

作为一个爱折腾的前端码农,经常会玩一些自己的项目,为了代码质量,每个项目都会单独配置自己的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/1089Airbnb / 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"
}

到此,该文就结束了,很短也很简单。后续自己的项目都会使用这个配置去进行约束代码风格,避免重复劳动

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/ruhechuangjianzijideeslintpeizhibao.html