业务项目中使用自定义eslint插件

要在项目中直接使用你编写的 ESLint 插件，你需要完成以下几个步骤：

1. 确保插件结构正确 ：你的 ESLint 插件通常是一个 Node.js 模块，导出一个包含 rules、configs 或 processors 等属性的对象。最常见的是 rules。
2. 安装或放置插件：让项目能够找到你的插件。
3. 配置 .eslintrc.* 文件：告诉 ESLint 加载并使用你的插件。

下面是详细的步骤和示例：

步骤 1：创建你的 ESLint 插件 (示例)

假设你已经编写了一个简单的 ESLint 插件，例如，它包含一个名为 no-foo 的规则，禁止使用变量名 foo。

插件文件结构示例：

my-eslint-plugin/
├── index.js
└── rules/
    └── no-foo.js

my-eslint-plugin/index.js:

module.exports = {
  rules: {
    'no-foo': require('./rules/no-foo'),
  },
  // 如果有预设配置，可以在这里添加
  // configs: {
  //   recommended: {
  //     plugins: ['my-plugin'],
  //     rules: {
  //       'my-plugin/no-foo': 'error',
  //     },
  //   },
  // },
};

my-eslint-plugin/rules/no-foo.js:

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Disallow the use of the variable name `foo`',
      category: 'Possible Errors',
      recommended: false,
      url: 'https://example.com/no-foo-rule', // 你的规则文档链接
    },
    schema: [], // 规则选项的 JSON Schema
  },
  create(context) {
    return {
      Identifier(node) {
        if (node.name === 'foo') {
          context.report({
            node,
            message: 'Variable name `foo` is not allowed.',
          });
        }
      },
    };
  },
};

步骤 2：将插件引入你的项目

你有几种方式将插件引入你的项目：

方式 A：作为本地文件 (推荐用于开发和测试)

如果你只是在当前项目中使用，并且不想发布到 npm，可以直接将插件放在项目内部的某个目录，例如 plugins/。

项目结构示例：

your-project/
├── .eslintrc.js
├── package.json
├── src/
│   └── index.js
└── plugins/
    └── my-eslint-plugin.js  <-- 你的插件文件 (将上面的 index.js 内容复制过来)

注意： 这种方式下，my-eslint-plugin.js 文件的内容就是上面 my-eslint-plugin/index.js 的内容，并且 rules 目录需要和 my-eslint-plugin.js 在同一级。为了简单起见，你可以把所有规则文件也放在 my-eslint-plugin.js 内部，或者使用 require 相对路径。

更推荐的本地方式 (保持插件结构)：

your-project/
├── .eslintrc.js
├── package.json
├── src/
│   └── index.js
└── local-plugins/
    └── my-eslint-plugin/
        ├── index.js
        └── rules/
            └── no-foo.js

方式 B：作为 npm 包 (推荐用于发布和共享)

如果你想在多个项目中使用，或者与团队成员共享，最好将插件发布为 npm 包。

1. 在插件目录执行 npm init ：创建一个 package.json 文件。

2. 发布到 npm ：执行 npm publish (如果你有 npm 账号)。

3. 在你的项目安装：

   npm install my-eslint-plugin --save-dev
   # 或
   yarn add my-eslint-plugin --dev
   ```    如果你还没有发布到 npm，但想在本地测试，可以使用 `npm link` 或 `npm install /path/to/my-eslint-plugin`。
   ```bash
   # 在插件根目录 (my-eslint-plugin/)
   npm link
   
   # 在你的项目根目录 (your-project/)
   npm link my-eslint-plugin

   或者直接安装本地路径：

   npm install file:./local-plugins/my-eslint-plugin --save-dev

步骤 3：配置 .eslintrc.* 文件

无论你选择哪种方式，配置 .eslintrc.* 文件是关键。

your-project/.eslintrc.js 示例：

module.exports = {
  // ... 其他配置

  // 1. 声明插件
  // 如果是 npm 包安装的，直接写包名 (不需要前缀 eslint-plugin-)
  // 例如，如果你的包名是 `eslint-plugin-my-plugin`，这里写 `my-plugin`
  // 如果你本地安装的包名是 `my-eslint-plugin`，这里写 `my-eslint-plugin`
  plugins: [
    // 方式 A (本地文件)：
    // ESLint 2.x 及更高版本支持直接引用本地文件作为插件
    // 'plugins/my-eslint-plugin.js', // 如果是单个文件
    require.resolve('./local-plugins/my-eslint-plugin'), // 如果是本地目录，指向 index.js 所在的目录

    // 方式 B (npm 包)：
    // 'my-eslint-plugin', // 假设你的 npm 包名是 my-eslint-plugin
  ],

  // 2. 启用插件中的规则
  rules: {
    // 格式：'插件名/规则名': '级别'
    // 这里的插件名是你在 plugins 数组中声明的名字 (不包含 .js 后缀或 require.resolve 的路径)
    'my-eslint-plugin/no-foo': 'error', // 启用你自定义的 no-foo 规则
    // 'my-plugin/no-foo': 'error', // 如果你的 npm 包名是 eslint-plugin-my-plugin
  },

  // 3. 如果你的插件提供了预设配置 (如 recommended)
  // 你也可以在 extends 中使用它
  // extends: [
  //   'eslint:recommended',
  //   'plugin:my-eslint-plugin/recommended', // 假设你的插件提供了名为 'recommended' 的配置
  // ],
};

关键点解释：

• plugins 数组：

  • 当你通过 npm install 安装一个 ESLint 插件时，它的包名通常以 eslint-plugin- 开头（例如 eslint-plugin-react）。但在 plugins 数组中引用时，你只需要写 eslint-plugin- 后面的部分（例如 react）。
  • 如果你自定义的插件包名不是 eslint-plugin- 开头，那么在 plugins 数组中你需要写完整的包名。
  • 对于本地文件，你可以直接使用相对路径或 require.resolve() 来引用。require.resolve() 确保路径解析正确。

• rules 对象：

  • 规则的键名格式是 插件名/规则名。
  • 这里的 插件名 对应你在 plugins 数组中声明的字符串。
  • 规则名 对应你在插件 index.js 中 rules 对象里定义的键名（例如 no-foo）。

完成以上步骤后，当你运行 eslint 命令时，它就会加载并使用你自定义的插件和规则了。