どんな新人エンジニアやベテランエンジニアもスペルミスには油断できません。
時にはタイプミスが原因で致命的なバグが起きてしまうこともあります。
つい最近も、4,5年前ぐらいに実装されたタイプミスが原因でバグが発生すということがありました。。。

そこで、CSpellというスペルチェッカーを導入しました。

設定

前提として、Node.jsがプロジェクトで使用可能であることとします。

タイプミスを自動でレビュー指摘させたいので、プルリクエスト作成時や更新時にGitHub Actionsを動かします。

CSpellをインストール

yarn add cspellを実行します。

CSpellの設定

プロジェクト配下にcspell.jsonを追加します。

./cspell.json

{
  "version": "0.2",
  "language": "en",
  "dictionaries": [
    "softwareTerms",
    "misc",
    "companies",
    "typescript",
    "node",
    "html",
    "css",
    "fonts",
    "filetypes",
    "npm"
  ],
  "ignorePaths": [
    "**/node_modules/**",
    "**/.git/**",
    "**/package.json",
    "**/yarn-error.log",
    "**/yarn.lock"
  ]
}

GitHub Actions workflowの設定

.github/workflows/spell-check.yaml

name: spell-check
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  spell-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: reviewdog/action-setup@v1
      - uses: actions/setup-node@v4
        with:
          node-version: '18.16.0'
      - name: Install Yarn
        run: npm install -g yarn@1.22.19
      - name: Install Dependencies
        run: yarn install
      - name: execute spell-check
        env:
          REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run:
          yarn spell-check $(git diff remotes/origin/$GITHUB_BASE_REF --name-only) |
          reviewdog -efm="%f:%l:%c - %m" -reporter=github-pr-check -level=warning

プルリクエストへのレビューコメントにはReviewdogを使い、変更差分だけをチェックさせます。

実行コマンドの設定

package.jsonの"scripts"にcspellの実行コマンドである"spell-check": "cspell --show-suggestions"を追加します。

動かしてみる

試しに、意図的にタイポしたコードをコミットしてプルリクエストを作成してみてください。

下記エラーが出る場合は、package.jsonのdevDependenciesに"@cspell/eslint-plugin": "^8.2.3"を追加します。

There was a problem loading formatter: /home/circleci/project/node_modules/eslint/lib/cli-engine/formatters/stylish
Error: require() of ES Module /home/circleci/project/node_modules/strip-ansi/index.js from /home/circleci/project/node_modules/eslint/lib/cli-engine/formatters/stylish.js not supported.
Instead change the require of index.js in /home/circleci/project/node_modules/eslint/lib/cli-engine/formatters/stylish.js to a dynamic import() which is available in all CommonJS modules.

固有の単語などを検知させたくないとき

定義した変数名や関数名などに固有の単語が含まれていると、検知したくなくても検知されてしまう可能性があります。
そのような時は、カスタム辞書をCSpellに定義することができます。

カスタム辞書の作成

カスタム辞書となるファイルを作成します。
ファイル名はcspell-ignore-words.txtとしますが、どんな名称でも構いません。

単語は改行区切りでこのように追加してください。

./cspell-ignore-words.txt

tango
tango2

カスタム辞書を適応

作成したカスタム辞書は、cspell.jsonへ設定します。

設定後、cspell.jsonはこのようになっているはずです。

./cspell.json

{
  "version": "0.2",
  "language": "en",
  "dictionaryDefinitions": [
    {
      "name": "cspell-ignore-words",
      "path": "./cspell-ignore-words.txt",
      "addWords": true
    }
  ],
  "dictionaries": [
    "cspell-ignore-words",
    "softwareTerms",
    "misc",
    "companies",
    "typescript",
    "node",
    "html",
    "css",
    "fonts",
    "filetypes",
    "npm"
  ],
  "ignorePaths": [
    "**/node_modules/**",
    "**/.git/**",
    "**/package.json",
    "**/yarn-error.log",
    "**/yarn.lock"
  ]
}

その他設定について

その他の詳しい情報は、公式ドキュメントをご覧ください。