😸

ESLintの設定をパッケージ化してnpmで公開する

2020/10/28に公開

npm

tech

こんにちはhiro08です。

各プロジェクトで ESLint の設定が混在していたため、パッケージ化して npm に公開しました。下記が GitHub のリポジトリと npm で公開したパッケージです。

GitHub リポジトリ

npm パッケージ

今回の設定は、個人プロジェクトで使ってます。各プロジェクトで ESLint の設定を共通化できたことで個人的に運用がしやすくなりました。なので、今回は ESLint の設定をパッケージ化して npm で公開する方法をまとめてみました。

前提

あらかじめ npm のアカウントを作成してください。
https://www.npmjs.com/

ローカルで npm にログインする必要があります。

$ npm login

`@hiro08/eslint-config` の使用方法

最初に、私が作成した独自設定の使用方法について説明します。 @hiro08/eslint-config と eslint をインストールしてください。

$ yarn add -D eslint @hiro08/eslint-config

そして、インストールした独自設定を extends で指定します。これで、 @hiro08/eslint-config で設定した ESLint のルールが適用されます。

.eslintrc

{
  "extends": "@hiro08"
}

ESLint の独自設定をパッケージ化したことで、各プロジェクトの共通の設定で導入することができます。プロジェクトで使っている ESLint の設定を共通で更新できるため非常に楽になりました。それでは、実際にパッケージを npm に公開する方法を説明していきます。

プロジェクトの設定

今回は、ベースとなるプロジェクトを私のリポジトリに上げておきました。こちらをローカルに clone してください。

$ git clone https://github.com/hiro08gh/eslint-config-base

設定は至ってシンプルで、ESLintの recommended を設定しているだけです。

index.js

module.exports = {
  extends: [
    'eslint:recommended',
  ],
}

npm に公開

それでは早速 npm にパッケージとして公開してみましょう。手順は以下の2つです。

package.json の内容を変更
npm publish

package.json の内容を変更

npm に公開する際に、 package.json の設定が必要になります。 name のところの @yourの部分は自分の npm のユーザーネームを入れてください。そして、 author に自分の情報を入れてください。

{
  "name": "@your/eslint-config",
  "version": "0.0.1",
  "main": "index.js",
  "author": "your",
  //other
}

npm publish

これで準備が整いました。 npm に公開するのは簡単です。下記の publish コマンドを使います。

$ npm publish --access=public

npm のユーザーページにアクセスしてみましょう。公開できていることが確認できます。

再び publish したい場合は、 package.json の version を上げる必要があります。 npm のコマンドを使うとバージョンを上げることができます。

$ npm run patch

package.json を確認します。

package.json

version: 0.0.2

そして、公開されたパッケージは @your/eslint-config としてインストールすることができます。

$ yarn add -D @your/eslint-config

GitHub Actions で自動リリース

次に ESLint の内容を変更した場合に、 GitHub Actions で自動リリースをするワークフローを作成してみましょう。これで、ローカルで publish しなくても特定のブランチにマージされた場合に自動的にリリースすることができます。ただし package.json のバージョンはローカルで上げる必要があります。

今回のプロジェクトを自分の GitHub のリポジトリにプッシュしてください。

npm のトークンを作成する

GitHub Actions でリリースするためには、 npm のトークンが必要になります。プロフィールから Access Tokens -> Generate New Token にアクセスしてください。

ここでは、 Automation を選択します。そして、 Generate Token をクリックするとトークンを取得することができます。

作成したトークンを GitHub Actions で使うために、 Secrets に値を保存します。このリポジトリの settings -> Secrets で設定することができます。 Value は NPM_TOKEN にします。 Value には先ほどのトークンを入れます。

ワークフローの作成

こちらが GitHub Actions のワークフローです。 main ブランチに対してプッシュ、またはプルリクエストを送るとワークフローが起動します。

.github/workflows/release.yml

name: release on npm

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
        node-version: '12.x'
        registry-url: 'https://registry.npmjs.org'
    - run: npm install
    - run: npm publish
      env:
        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

リポジトリの Actions を確認すると、無事にリリースできてることが確認できます。

最後に

今回は ESLint の設定をパッケージ化してnpmで公開する方法を紹介しました。ぜひ、自分の設定を公開してみてください。

参考