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

2024-05-30

Tech

ESLint

/

Github

ESLint Config Inspector#

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

1
npx eslint --inspect-config

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

1
npx @eslint/config-inspector

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

Build Inspector#

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

1
npx @eslint/config-inspector build

Github Pages にデプロイする#

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

1
name: Deploy Inspector
2

3
on:
4
  push:
5
    branches: ["main"]
6
  workflow_dispatch:
7

8
permissions:
9
  contents: read
10
  pages: write
11
  id-token: write
12

13
concurrency:
14
  group: "pages"
15
  cancel-in-progress: true
16

17
jobs:
18
  build:
19
    runs-on: ubuntu-latest
20
    steps:
21
      - name: Checkout
22
        uses: actions/checkout@v4
23
      - name: Setup Pages
24
        uses: actions/configure-pages@v5
25
      - name: Setup node
26
        uses: actions/setup-node@v4
27
        with:
28
          node-version-file: package.json
29
      - name: Install dependencies
30
        uses: npm install
31
      - name: Build Inspector
32
        run: |
33
          npx @eslint/config-inspector build --base /REPOSITORY_NAME/
34
      - uses: actions/upload-pages-artifact@v3
35
        with:
36
          path: ./.eslint-config-inspector
37

38
  deploy:
39
    needs: build
40
    runs-on: ubuntu-latest
41
    environment:
42
      name: github-pages
43
      url: ${{ steps.deployment.outputs.page_url }}
44
    steps:
45
      - uses: actions/deploy-pages@v4
46
        id: deployment