自定义 eslint 插件， 要求常量为大写 snake 命名方式， 该怎么做【热度: 35】

[yanlele]

关键词：eslint 插件实现

1. 项目结构

假设你的项目根目录为 your-project，在项目中创建插件相关的目录结构：

your-project/
├── .eslintrc.js
├── src/
│   └── ...
├── eslint-plugin-local/
│   ├── lib/
│   │   ├── rules/
│   │   │   └── uppercase-snake-case.js
│   │   └── index.js

2. 编写插件代码

规则组件（eslint-plugin-local/lib/rules/uppercase-snake-case.js）

module.exports = {
  meta: {
    type: "suggestion",
    docs: {
      description: "Enforce uppercase snake case naming convention",
      category: "Stylistic Issues",
      recommended: false,
    },
    schema: [],
    messages: {
      invalidNaming: 'Variable name "{{name}}" should be in uppercase snake case.',
    },
  },
  create(context) {
    return {
      VariableDeclarator(node) {
        const { id } = node;
        if (id.type === "Identifier") {
          const name = id.name;
          const isUppercaseSnakeCase = /^[A-Z_]+$/.test(name);
          if (!isUppercaseSnakeCase) {
            context.report({
              node: id,
              messageId: "invalidNaming",
              data: {
                name,
              },
            });
          }
        }
      },
    };
  },
};

插件入口文件（eslint-plugin-local/lib/index.js）

module.exports = {
  rules: {
    "uppercase-snake-case": require("./rules/uppercase-snake-case"),
  },
  configs: {
    recommended: {
      rules: {
        "eslint-plugin-local/uppercase-snake-case": "error",
      },
    },
  },
};

3. 配置 ESLint

在项目根目录下的 .eslintrc.js 文件中进行配置，让 ESLint 能够识别并使用本地插件：

module.exports = {
  // 告诉 ESLint 从哪里查找插件
  plugins: [
    {
      rules: require("./eslint-plugin-local/lib/index.js").rules,
      configs: require("./eslint-plugin-local/lib/index.js").configs,
    },
  ],
  extends: ["plugin:eslint-plugin-local/recommended"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
  },
};

代码解释：

• plugins 数组中的对象用于直接引入本地插件的规则和配置。
• extends 用于应用插件中定义的推荐配置。

4. 运行 ESLint

确保你的项目已经安装了 ESLint，然后在项目根目录下运行 ESLint 检查：

npx eslint src

这里的 src 是你的项目代码所在目录，你可以根据实际情况修改为其他目录。

通过以上步骤，你就可以在自己的项目中使用本地编写的 ESLint 插件了。当你修改插件代码后，再次运行 ESLint 检查，就能看到最新的检查结果。