👨‍🏭

日本語でコメントを書くと怒ってくれるESLintのプラグインを作ってみた

2022/02/25に公開

TypeScript

ESLint

eslintplugin

tech

概要

日本語でのコメントや変数や関数の宣言を指摘してくれるeslintのプラグインを作成してみました。

チーム内で日本語が得意でない方がいらっしゃりで、できるだけ全員が理解できる言語でコメントや関数名等を書く必要がある場合は助けになるカモです...😇？

下記でソースコード等を確認いただく事ができます。

ESLintに指摘される例👎

// 日本語のコメントを書いているとLintに怒られる
const greeting = () => {
    return "Hello"
}

ESLintに指摘されない例👍

// Gotta stick to English
const greeting = () => {
    return "Hello"
}

使い方

eslintのpluginなのでお手元のeslintの設定ファイルで下記を追加して頂くだけです。(詳細はRepoのREADMEに記載しています)

{
    "plugins": [
        "eslint-plugin-no-jp"
    ],
    "rules": [
        "no-jp/no-jp-identifier": 2, // 日本語の関数や変数を認めない
        "no-jp/no-jp-comment": 2 // 日本語でのコメントを認めない
    ]
}

eslintでは0 ~ 2 はそれぞれ下記の様な意味を持つので、上記の数字を1 にすることでコードベースの段階的な移行も可能です。

0 : ルールを適用しない
1 : warn
2 : error

ESLintプラグインの作り方

公式のドキュメントが非常にわかりやすく、下記のドキュメントに沿っていくだけで作成が可能です。

プロジェクトのセットアップ方法からテスト方法まで説明してくれています。

その他参考にしたページ

ESLint: Working with Rules
- プラグインの肝となる実際のルールに関してはこちらでとてもわかり易く説明されていました。
ESLint: Selectors
- AST中で使用したいNodeを参照する為のselectorsに関してはこちらで確認していました。
AST Explorer
- ESLintはEspreeをパーサーとして使用していますが、いちいち手元で生成等していたら面倒ですので、こちらのサイトは非常に便利でした。

余談

今までCI/CDはTravis CI やCircleCIを使っていたのですが、今更Github Actionsを使用してみました。

Githubで完結しますし、設定もわかりやすく、ドキュメントも豊富でとてもよかったです🥰

概要

ESLintに指摘される例👎

ESLintに指摘されない例👍

使い方

ESLintプラグインの作り方

その他参考にしたページ

余談

Discussion