ESLintでスクリプトファイル名のフォーマットを指定する

Next.js + TypeScriptのプロジェクトで、TypeScriptファイル名はローワーキャメルケースにするようコーディング規約を定めていた。

ただ、Javaのように言語側でフォーマットが決まっていないからか、個人の癖が出やすく、アッパーキャメルケース、スネークケース、ケバブケースと、異なる形式で書かれることがあった。

コードレビューでもファイル名については見落とされがちだったので、ファイル名のフォーマットを指定できないか調べたところ、ESLintでできたのでメモ。

ざっと調べただけでいくつかでてきたが、最終更新日が古く、TypeScript未対応だったりする。

今回は、XOにも使われているeslint-plugin-unicornに、ファイル名に関するルールがあり、かつTypeScript対応していたため、こちらを使用する。

ルールの詳細は以下。

yarn add -D eslint-plugin-unicorn でインストールし、.eslintrc のpluginsに unicorn を追加。

ルールを有効化するには、unicorn/filename-case をrulesに追加する。

また、推奨設定に含まれているため、extendsに plugin:unicorn/recommended を追加しても有効となる。なお、推奨設定を有効化すると、v44.0.2の時点で、96ルールが有効になるため注意。

以下、推奨設定の有効化の例。

{
  "extends": [
    "plugin:unicorn/recommended"
  ],
  "plugins": [
    "unicorn"
  ]
}

これでファイル名に関するルールが有効となるが、デフォルトではケバブケース(foo-bar.拡張子)がフォーマットとして設定されている。

今回はローワーキャメルケース(booBar.拡張子)としたいので、rulesを以下の様に変更。

{
  "rules": {
    "unicorn/filename-case": ["error", { "case": "camelCase" }]
  }
}

case に camelCase を指定すると、ローワーキャメルケースとなる。

この他、 snakeCase でスネークケース、 pascalCase でアッパーキャメルケース。

yarn lint すると、ファイル拡張子が js,jsx,ts,tsx で、ファイル名のフォーマットが異なるファイルについては、そのファイルの1行目に以下の様なLintエラーが発生する。

Filename is not in <指定フォーマット名>. Rename it to <推奨ファイル名>.

クイックフィックスも可能。

驚いたのは、Next.jsで使用する pages/_app.tsx や pages/_document.tsx といったファイルはエラーにならなかった。Next.jsを使っているか判断しているのか?

なお、明示的に除外したいファイル名がある場合、rulesの ignore で調整可能。

ファイル名の形式違いをLintエラーとし、ビルドを失敗させることで、見落とすことなく修正できるようになった。

また、eslint-plugin-unicornで追加されたその他のルールも有用だったので、ソースコード品質の向上につながった。そっちもいろいろ面白いので、そのうちまとめたい。