234文字
1分
編集

ESLint Config InspectorをGithub Pagesにデプロイする

#ESLint #GitHub

#ESLint Config Inspector

ESLint Config Inspector は、設定ファイルを解析し、設定ファイルの構造を可視化するためのツールである。 ESLint v9 から次のようにコマンドを打てば利用できるようになった。

shell
npx eslint --inspect-config

また @eslint/config-inspectorパッケージ経由でも利用することが出来る。

shell
npx @eslint/config-inspector

実行すると、設定を可視化した Web ページが表示される。

#Build Inspector

ESLint Config Inspector は次のコマンドで静的なファイルを吐ける。

jsx
npx @eslint/config-inspector build

#Github Pages にデプロイする

ESLint config プラグインを提供しているリポジトリで、Config Inspector を Github Pages で提供した。

jsx
name: Deploy Inspector

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version-file: package.json
      - name: Install dependencies
        uses: npm install
      - name: Build Inspector
        run: |
          npx @eslint/config-inspector build --base /REPOSITORY_NAME/
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./.eslint-config-inspector

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/deploy-pages@v4
        id: deployment
編集