はじめに

---

参考となる最終形はこちら

最近，ESLint の設定を，自分でカスタムするようになってきた．

これにより，自分のコーディングルールを自分のプロジェクト内で共通化しつつ，手動フォーマッティングによる開発速度の低下を防いでくれるようになった．

ESLint の設定を自分でカスタムすることでこれらの恩恵を得られる一方，プロジェクト間で同じルールを設定していないのは開発者体験を低下させてしまう．そのため，古いルールが適用されているプロジェクトの開発に着手する際に，最新の.eslintrcを探し出して，それをコピペするといった作業が必要になるようになってしまった．

これは「よしこれを開発しよう！」となったときの出鼻をくじかれる作業となるため，最小の時間でこれを行えるようにしたかった．

そこで調べたところ，ESLint のextendsには，ルールの継承のような役割があり，npm パッケージから設定を引き継げるとのこと．そして，それを準備し，実装した．

同じような事を考えている方は多くいると思うため，ここで知見を記しておく．

npm パッケージの準備

---

リポジトリ準備

---

以前作成したnpm パッケージ開発用テンプレートからリポジトリを作成する（手順は少し変わってしまいますが，ここはどのような方法でリポジトリを準備しても構いません）．

トークンの設置

---

こちら

リポジトリから不要物を削除

---

まずは以下を削除．

• rollup.config.js
• index.ts
• index.test.ts
• tsconfig.json

自分用のカスタム eslintrc の配置

---

.eslintrcを作成し，ここに自分用の設定をコピペする．

この時，依存しているeslint系のパッケージも併せてインストールする．

.eslintrc が公開されるようにする

---

package.jsonの設定を行う．

必須な変更箇所

オプショナルな変更箇所

publish

---

こちら

自分の npm アカウントに移動し，パッケージが公開されている事を確認する．

使い方

---

上で変更したnameの項目に書いた名前でパッケージが公開されているので，そ設定を導入したいプロジェクトで，以下を実行．

npm i -D <your-package>

その後，プロジェクト内の.eslintrcに以下を追記する．

{
  extends: ["<your-package>"]
}

おわりに

---

(再掲)最終形はこちら

npm upをするだけで最新のカスタム設定を適用できるのは，かなり便利ですね！

参考

---

• https://eslint.org/docs/developer-guideshareable-configs