ESLint Config Inspector

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

npx eslint --inspect-config

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

npx @eslint/config-inspector

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

Build Inspector

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

npx @eslint/config-inspector build

Github Pagesにデプロイする

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

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