こんにちは。エンジニアの安達(@ry0_adachi)です。
今回は社内で利用しているESLintの設定ファイルを @connehito/eslint-config という名前でnpmに公開したので、公開しようと思った理由なども含めて書いていきます。
ちなみに、これが初のコネヒトという会社名義でのnpmへの公開となります🎉 www.npmjs.com
公開する前のお話
公開しようと思った理由
npmに上げるまでは各リポジトリに同じような内容の .eslintrc が存在していて、どこかのリポジトリの設定を更新したら「あっちも同じように更新したいな」となり、それをまた別のリポジトリでやって...というような感じでとても面倒でした。そして各リポジトリにあった設定は「同じような内容」であって「全く同じ」わけではなかったのでこれもまた私の作業をより面倒にしていました。
面倒な作業を早く簡単にしたい！設定はどのリポジトリでも一緒でいいのでは！という思いが強くなっていき、それで今回npmに公開して各リポジトリでnpmから落としてくるだけのフローにしました。
公開するまでにやったこと
- ESLintの設定を見直す
- npmのOrgを作成する
- 会社名義でpublishするときのルールを決める
あたりが事前にやった作業です。
ESLintの設定を見直す
各リポジトリで微妙に設定が違ったりしていたのもありましたし、その時はPrettierのようにコードフォーマットをお任せできるようなものが入ってるわけではなく、rulesの中には2年前くらいに考えた大量のオレオレルールの記述がされていて、どれがどういうルールなのかを覚えているのも大変でした。
そんな理由から既存のオレオレルールはなくしたかったので、extendsだけでなるべく完結させることにして、あとはGitHubやエディタ上でいい感じの見え方になるような最低限の設定(1行の最大文字数、セミコロンつけるつけない、クォートの種類)だけにしました。
これでどんなルールを設定したか覚える必要もないですし、ESLint本体やpluginをアップデートすればextendsしているrecommendedな設定が更新されていくので最高です。
npmのOrgを作成する
https://www.npmjs.com/org/create からOrganizationの作成ができるのでぽちぽちやっていきます。実際作った時には間違えて通常アカウントで作ってしまったのですが、有難いことに通常アカウントをOrgに変換する機能がついていたのでなんとかなりました、よかったです。
会社名義でpublishするときのルールを決める
npmに公開したい〜！な人が現れた時のためにアカウント作成やscopeの統一(パッケージ名に@connehitoとか入ってるところ)、publishする時に気をつけることなどを社内ドキュメントにしました。私だけでなくいろんなメンバーに気軽にチャレンジしてもらいたい、という思いを込めて作成しています。
公開した後のお話
公開したあとは各リポジトリに @connehito/eslint-config をインストールして .eslintrc の内容を修正したのちに、各アプリケーションの実装や環境に合わせてenvやglobalsを上書きしました。
--- extends: - "@connehito"
公開後の各リポジトリのメンテナンス
@connehito/eslint-config を更新したら各リポジトリで yarn upgrade して eslint --fix するようになりました。設定いじらずにとりあえずコマンド打てば良い状況になったので、あとはCIで定期的に回すなどして自動化できると良いなぁと考えています。
さいごに
npmで公開した経験があまりないので今更ですがkeywordの設定とか依存関係の書き方とかもっとスマートな書き方があるんじゃないかという気がしてきました。気付いた点などあればissueなどでもらえるとものすごく嬉しいです！日本語でももちろんオッケーです！
たくさんの人に見てもらえる場所でたくさんフィードバックをしてもらえる方が作った側としては有難いし嬉しいので、今後も公開できそうな便利なものがあればどんどん公開していこうと思っています。
