Zenn
📁

ls-lintでファイルの命名を統一しよう

2024/03/17に公開
linter
tech

はじめに

ファイルやディレクトリの命名規則について、どのような運用をしていますか？
チームで共有している規約があるというところもあれば、既存資産から推測している...といったところもあると思います。

Next.jsやRemixといったファイルシステムベースルーティングを採用しているフレームワークを使用していた場合、ファイルやディレクトリの命名は特に気を遣う部分だと思います。

これらはできれば機械的にチェックし、統一されているかどうかを確認できていると望ましいはずです。
これは、ls-lintというツールを使って実現することができます。

ls-lint

Go製、マルチプラットフォーム対応のリンターです。
https://github.com/loeffel-io/ls-lint

.ls-lint.ymlという設定ファイルに記述したルールを適用してくれます。

ルールはファイルの拡張子それぞれに設定することも、特定のディレクトリだけに設定することも可能です。

インストール手順は公式ドキュメントを参照してください。

Next.jsで設定してみる

例えば、pages配下はURLになるのでkebab-case、components配下はPascalCaseにしたいとします。

Zennにterms/transaction-lawというURLが存在したのでkebab-caseの例にしています。

// こんな感じ
src
├── components
│   └── Button
│       ├── Button.tsx
│       └── index.ts
└── pages
    ├── _app.tsx
    ├── _document.tsx
    ├── posts
    │   └── [params].tsx
    └── transaction-law.tsx

これらを満たすような.ls-lint.ymlを書いてみます。

ls:
  src/pages:
    .dir: kebab-case
    .tsx: kebab-case | regex:^_[a-z-.]* | regex:^\[\w*\]

  src/components/*:
    .dir: PascalCase
    .tsx: PascalCase

_app.tsxや[param].tsxのような_始まりや[]といったフレームワークから指定される命名を正規表現を書くことで対応できるようにしているところ意外はシンプルに見えますね。
npx ls-lintもしくはpackage.jsonのscriptsに"lint:ls": "ls-lint"などと書いて実行すると成功していることが確認できます。

失敗することも確認するため、UserSetting.tsxというkebab-caseを満たさないファイルを作成します。ls-lintを実行すると失敗しました。

$ touch src/pages/UserSetting.tsx
$ npx ls-lint
2024/03/17 16:26:10 src/pages/UserSetting.tsx failed for rules: kebabcase|regex (^_[a-z-.]*)|regex (^\[\w*\])

まとめ

個人的には.ls-lint.ymlに書かれたルールがそのまま規約として運用できる点がとてもいいな〜と思いました。ファイルやディレクトリといった部分もこういったツールを活用して統一性を意識していきたいですね。

Discussion