如何创建自己的ESLint配置包

Contents

1 前言
2 建立项目
3 拓展

前言

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

代码语言：javascript复制

mkdir eslint-config-test
cd eslint-config-test
npm init

一路点击下一步之后，我们会得到这样的package.json

代码语言：javascript复制

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

下面，我们来添加我们需要的相关依赖

代码语言：javascript复制

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

代码语言：javascript复制

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

具体源码，大家可看一下

使用方法也很简单

代码语言：javascript复制

npm i @osdoc-dev/eslint-config-preset -D # yarn add @osdoc-dev/eslint-config-preset -D

代码语言：javascript复制

// .eslintrc.js
module.exports = {
  "extends": "@osdoc-dev/eslint-config-preset"
}

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

网络安全 https eslint javascript npm

0 人点赞