📏

ESLint で禁止ワード、必須関数などを正規表現で設定する

に公開

ESLint のプラグインを作った

eslint-plugin-pattern-rules は禁止ワード、必須ワードを設定できる ESLint のプラグインです。

私が作りました。

禁止ワード、必須ワードは正規表現で指定できます。

eslint-plugin-pattern-rules

こんな時に使える

eslint-plugin-pattern-rules は以下のような状況を想定しています。

  • pagesディレクトリではメタ情報を設定する関数を必ず呼び出さなければならない
  • 非推奨となった関数の呼び出しを禁止する
  • 共通関数のディレクトリでドメインを表す単語の禁止する

ルール対応表

eslint-plugin-pattern-rules では 6 つのルールがあります。

変数名や関数名などのidentifier、文字列などのliteralと分けてルールを指定することができます。もちろん両方に対しても設定できます。

ルール identifier literal
pattern-rules/banned ⭕️ ⭕️
pattern-rules/banned-identifier ⭕️
pattern-rules/banned-literal ⭕️
pattern-rules/required ⭕️ ⭕️
pattern-rules/required-identifier ⭕️
pattern-rules/required-literal ⭕️
  • identifier: 変数名、関数名
  • literal: 文字列など

使い方

使い方を紹介します。

インストール

まず ESLint 本体とプラグインをインストールします。

npm i eslint eslint-plugin-pattern-rules -D

config を設定

eslint.config.jsを設定します。

eslint.config.js

import patternRules from 'eslint-plugin-pattern-rules';

export default [
  {
    files: ["*.js", "*.ts"],
    plugins: {
      'pattern-rules': patternRules,
    },
    rules: {
      'pattern-rules/banned': ['error', { patterns: ["forbidde*"] }],
      'pattern-rules/required': ['error', { patterns: ["required"] }],
    },
  },
];

サンプル

禁止ワード

forbiddeから始まるワードを禁止しています。

export default [
  // その他の設定...
  {
    rules: {
      'pattern-rules/banned': ['error', { patterns: ["forbidde*"] }],
    },
  },
];

<img
src="https://asset.hirameki.dev/img%2Fblog%2Ftech%2Feslint%2Feslint-plugin-pattern-rules%2Feslint-plugin-pattern-rules_010.webp?alt=media"
alt="eslint-plugin-pattern-rules_010"
loading="lazy" />

必須ワード

ファイル内でrequiredとういうワードが呼び出されるのを必須とします。

export default [
  {
    // その他の設定...
    rules: {
      'pattern-rules/required': ['error', { patterns: ["required"] }],
    },
  },
];

<img
src="https://asset.hirameki.dev/img%2Fblog%2Ftech%2Feslint%2Feslint-plugin-pattern-rules%2Feslint-plugin-pattern-rules_020.webp?alt=media"
alt="eslint-plugin-pattern-rules_020"
loading="lazy" />

さいごに

正規表現を採用したことで柔軟性の高いルールを書けるようになっていますので是非使ってみて下さい。

2年半、家で毎日開発した知見をまとめました!よかったら読んでみてください。

https://doityourself.jp/articles/2026/full-platform-development/

Discussion