タイポ発見ツールtyposをGitHub Actionsで導入してみた #GitHubActions

自己紹介

はじめまして、はる（@lemonade_37）と申します。
駆け出しエンジニアとして約2ヶ月が経過しました🐣

概要

CI/CDの知識がない駆け出しエンジニアが、タイポ発見ツールのtyposを
GitHub Actionsで設定してみました。

環境

PC内にhomebrewはすでにインストール済み
ローカル環境・Dockerなし
Ruby3.2.2、Rails7.0.8

間違っている箇所や、紹介した方法よりも良い方法があるかもしれませんので、その際は教えて頂けると嬉しいです🙇

typosのインストール

下記コマンドを実行し、ローカルPC内にtyposをインストールします。

ターミナル

brew install typos-cli

これで、アプリ内のディレクトリで

typos

と実行すると、タイポを発見してくれるようになりました。

実行例😱

沢山タイポが見つかりました…

ターミナル

MBP hokkaido_travel % typos
error: `seach` should be `search`
  --> ./app/javascript/forgot_spotname.js:3:9
  |
3 |   const seachButton = document.getElementById('search-btn')
  |         ^^^^^
  |
error: `seach` should be `search`
  --> ./app/javascript/forgot_spotname.js:5:3
  |
5 |   seachButton.addEventListener('click', function(event) {
  |   ^^^^^

GitHub Actionsでプルリクのタイポチェックをする

では、これをGitHub Actionsに設定し、プルリクエストを作成するたびにタイポをチェックしてくれるようにします。

GitHub Actionsとは

リポジトリ内のイベント（プッシュなどの処理）によってトリガーされたときに実行される処理をあらかじめ設定しておき、自動で実行してくれるようにします。
今回のタイポチェックツールの他にも、自動でRSpecを実行するなど、さまざまな用途で使用されます。

実装方法

WebブラウザでGitHubのリポジトリページにアクセスします。
Actionsタブを開き、Set up a workflow yourself →をクリックします。

ファイル名をtypos.yml、内容は下記のように入力し、コミットします。ファイルが作成できたらOKです。

typos.yml

name: GitHub Action
on: [pull_request]

jobs:
  run:
    name: Spell Check with Typos
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Actions Repository
        uses: actions/checkout@v3

      - name: Run Typos
        uses: crate-ci/typos@master

ローカル環境で、git pull origin mainしておきます。
　　
ローカル環境、アプリのディレクトリ内で下記コマンドを実行します。
ターミナル
```
アプリ名 % touch .typos.toml
```

作成したファイル内を編集します。

.typos.toml

# スペルチェックを無効にするフォルダやファイルの設定
[files]
extend-exclude = [
  "*.svg",
  "node_modules",
  "vendor/**/*",
  "**/*.min.js",
  "logs/**/*",
  "*.png",
  "*.jpg",
  "*.gif",
  "*.ico",
  "*.exe",
  "build/**/*",
  "dist/**/*"
]
ignore-hidden = true # 隠しファイルを無視
ignore-vcs = true    # バージョン管理システムのファイルを無視

# 一般設定
[default]
check-filename = true  # ファイル名のスペルチェックを有効
check-file = true      # ファイル内容のスペルチェックを有効
locale = "en-us"       # 英語のロケールをアメリカ英語に指定

# もし他にも設定したい場合は、下記のように設定できます。
# プロジェクト内で使用される独自の技術用語や、英国英語のスペルなど、default.extend-wordsで設定すると、タイポとして扱われなくなります。
extend-words = {
  "colour" = "color",
  "initialise" = "initialize",
  "analogue" = "analog"
}
# など、自由にカスタマイズできます。

他にも細かく設定したい方は公式ドキュメントのtypos/docs
/reference.mdを参照ください。
　　

作成できたら、add・commit・pushします。
　　
試しに、わざとタイポしてプルリクエストを作成し、引っ掛かるかどうか確認してみます。
プルリクエスト内で、GitHub Actionsが実行されタイポが検知されたことが確認できます。

　　
Detailsを開くと、どのファイルの何行目でタイポしているかが確認できます。
これで、プルリクを作成するたびに、タイポがないか確認できるようになりました🎉

まとめ

ふんわり自動でテスト実行してくれるもの？くらいの理解だったGitHub Actionsを実際に触ってみて、少し理解が深まりました。
このような便利なツールを、タイポの対策などさまざまな用途で活用していけるように、これからも勉強していきます💻🔰

タイポ発見ツールtyposをGitHub Actionsで導入してみた

自己紹介

概要

環境

typosのインストール

GitHub Actionsでプルリクのタイポチェックをする

GitHub Actionsとは

実装方法

まとめ

参考記事