どんな新人エンジニアやベテランエンジニアもスペルミスには油断できません。
時にはタイプミスが原因で致命的なバグが起きてしまうこともあります。
つい最近も、4,5年前ぐらいに実装されたタイプミスが原因でバグが発生すということがありました。。。
そこで、CSpellというスペルチェッカーを導入しました。
設定
前提として、Node.jsがプロジェクトで使用可能であることとします。
タイプミスを自動でレビュー指摘させたいので、プルリクエスト作成時や更新時にGitHub Actionsを動かします。
CSpellをインストール
yarn add cspell
を実行します。
CSpellの設定
プロジェクト配下に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の設定
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としますが、どんな名称でも構いません。
単語は改行区切りでこのように追加してください。
tango
tango2
カスタム辞書を適応
作成したカスタム辞書は、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"
]
}
その他設定について
その他の詳しい情報は、公式ドキュメントをご覧ください。