自定义eslint 配置包

简介

对于经常使用的eslint配置，我们可以通过自定义 eslint 配置包，实现配置的复用。

目录结构

pks
- vue-program 项目目录
- eslint-config-vue 公共eslint配置包
  - index.js 配置文件
  - package.json

编写包

index.js 配置文件

module.exports = {
    rules: {  // 自定义规则
        'indent':['error', 2]
    }
}

package.json

{
  "name": "eslint-config-vue", // 包名称必须以 eslint-config- 开头
  "version": "0.0.1",
  "description": "eslint config",
  "main": "index.js", // 入口文件
  "files": [
    "index.js",
    "package.json"
  ],
  "keywords": [],
  "author": "copy-left",
  "license": "ISC"
}

安装配置包

方法一

引入配置

// .eslintrc
{
  "extends": [
    "eslint-config-vue"
  ]
  ...
}

安装

npx install-peerdeps -D eslint-config-vue

方法二

引入配置

// .eslintrc
{
  "extends":[
   "./node_modules/eslint-config-vue/index.js" // 本地配置包文件地址
   or
  "plugin:eslint-config-vue" // plugin:[包名称]
  ]
}

安装

npm i -D ../eslint-config-vue

因为我是用的是本地离线包。所以必须使用npm安装包，包才能指向正确的包地址。

如果使用cnpm，将把包作为在线包安装。

带命名空间的配置包

有时可能我们的报名重复或希望将包统一放在一个目录下管理。可以使用包命名空间

// 带命名空间的包
// package.json
{
  "name": "@micro/eslint-config-vue"  // 包名格式: @[空间名]/[包名]
}

当我们使用带有命名空间的包时，配置eslint方式有所不同

// .eslintrc
{
  extends: {
    "@micro/eslint-config-vue" // eslint-config- 前缀不可省略
   “plugin:@micro/eslint-config-vue” // 不能使用 plugin 模式, 将无法定位包地址 
  }bunen
}

eslint包查找方式

plugin 通过包名根据npm规则查找对应包地址：本地node_modules -> 全局 node_modules

// 当前配置包名 eslint-config-vue
// 生成的 node_modules 目录结构
- node_modules/
  - eslint-config-vue
  - index.js
  - package.json

@命名空间通过命名空间根据npm规则查找对应包地址

 // 当前配置包名 @micro/eslint-config-vue
 // 生成的 node_modules 目录结构
- node_modules/
   - @micro/
     - eslint-config-vue/
        - index.js
        - package.json

文件地址直接通过地址查询

plugin 与 @命名空间查询模式类似，但查询的层级或识别方式不同. 所以如果 plugin 无法查询到 @命名空间的配置包 plugin 包定位到包地址后，可设置具体加载的配置文件。例如： 'plugin:vue/vue3-essential'

其他

也可以将配置包直接，发布到npm。其他地方使用时相对简单方便
npm 与 cnpm 安装本地离线包的package.json的区别

// npm i -D ../eslint-config-vue
{
  "devDependencies": {
    "eslint-config-vue": "file:../eslint-config-vue",  // 包的值为包地址
  }
}
// cnpm i -D ../eslint-config-vue
```javascript
{
  "devDependencies": {
    "eslint-config-vue": "^0.0.1",  // 包的值为包版本号
  }
}

二次安装可能出现安装失败情况，可以删除 package-lock.json, yarn.lock

文档

eslint 官网 extends