actions/github-script で補完を効かせて script を書こう

GitHub Actionsで、こんなことがやりたいな、あんなことがやりたいなと思った時に、@actions/github-scriptを使うことがあると思います。
そんな@actions/github-scriptですが、使う時にこんな悩みを抱えたことはありませんか？

• script書いてる時、補完が効かないJavaScriptを書くのが辛い
• 提供されているcontextやgithubなどのObject、メンバに何があったかわからない
• script部分だけファイルに切り出したけど、補完を効かせるために型定義も入れて…
  • .github 以下に package.json を配置したり…って本当に？

などなど…

私もこういう悩みを抱えていましたし、実行したらtypoで動かなかったなど、プロダクトのCI/CDに悪影響を与えてしまった経験があります。

そんな悩みを解決するために、Visual Studio Code用の拡張機能を作成しました。

Workflow Script Highlighter

こちらが、今回作成した拡張機能です。

https://marketplace.visualstudio.com/items?itemName=yamachu.workflow-script-highlighter

この様に、GitHub Actions Workflowファイルの @actions/github-script script block内でJavaScriptの補完が効いています。
加えて、actions/github-scriptの提供するオブジェクトの型も補完が効いています。

使い方

1. 拡張機能のインストール
   • GitHub Actions拡張のインストールも必要です（上記拡張機能が依存しています）
2. GitHub Actions Workflowファイルを開く
3. script blockに対して特定の文字列を記述する

3の簡単な例を以下に示します。

- uses: actions/github-script@v7
  with:
    script: | #```typescript
      await github.rest.issues.createComment({
        body: 'Hello, World!',
        issue_number: context.issue.number,
        owner: context.repo.owner,
        repo: context.repo.repo
      });
    #```

この、script: | 以降の #```typescript と #``` で囲まれた部分が、補完が効く部分です。

この様に記述することで、JavaScriptの補完が効く状態で、script blockを記述することが出来ます。

CLIでも使いたい

Visual Studio Code拡張以外でも出来たら嬉しいですよね。
ということで、Node.jsが使える環境で利用できるツールも作成しました。

https://www.npmjs.com/package/@yamachu/github-script-checker

使い方

# without install
$ npx -p @yamachu/github-script-checker github-script-checker <path>
# with install locally
$ npm install @yamachu/github-script-checker
$ npx github-script-checker <path>

イメージとしてはこんな感じです。

最後に

actions/github-script は便利ですが、scriptの書きづらさが若干の課題でした。
しかし今回のツールである程度快適になるのではないでしょうか。

ぜひとも使ってみてください。