【Flutter】CSpellを導入し、プロジェクト全体でスペルチェックをしてみようその①

はじめに

スペルチェックの warning にモヤッとしながらも、つい保存してスルーしちゃう…。そんな毎日から卒業したい！ その第一歩として、プロジェクト全体での設定に挑戦してみました。
また、僕の場合はAndroid Studioを多用していたため、知らずにいました。

CSpellとは

CSpellはコード内のスペルミスを自動でチェックしてくれるツールです。人間が書く以上、どうしてもスペルミスは避けられませんが、cSpellがそれをサポートしてくれます。
また、CSpellはオープンソースプロジェクトで、GitHubで公開されています。

ちなみに

VSCodeでは、「Code Spell Checker」というスペルチェッカーもあるらしいです。

今回やりたいこと

• CSpellを導入する
• プロジェクト全体でスペルチェッカーの設定を統一できるようにする（次回）

インストールについて

CSpellを使用するにあたって、さまざまなインストール方法がありまして、npmやyarn、bunなど多岐にわたるそうです。homebrewでもインストールできるらしいです。

今回は、Bunを使ってインストールしようと思います

Bunについて

Bunとは、JavaScript および TypeScript プロジェクトの開発、テスト、実行、バンドルはすべて Bun で行えます。Bun は、バンドラー、テストランナー、Node.js 互換のパッケージマネージャーを備えた、高速化を重視したオールインワンの JavaScript ランタイムおよびツールキットです。

実行速度が速い例として、Express.js の「Hello World」のリクエスト処理速度を比較したベンチマークがあります👇
この通り、Bun はかなり爆速です。

bunをインストールする前に...

今回は、miseという開発環境を一元管理できるツールからbunをダウンロードすることにしました。

では自分がやっていた流れで進めていきます。

インストールする

※僕の場合、macOSで公式インストーラーがうまく動かなかったため、今回はHomebrew経由で入れました。

brew install mise 

バージョン確認

mise --version 

結果

              _                                        __              
   ____ ___  (_)_______        ___  ____        ____  / /___ _________
  / __ `__ \/ / ___/ _ \______/ _ \/ __ \______/ __ \/ / __ `/ ___/ _ \
 / / / / / / (__  )  __/_____/  __/ / / /_____/ /_/ / / /_/ / /__/  __/
/_/ /_/ /_/_/____/\___/      \___/_/ /_/     / .___/_/\__,_/\___/\___/
                                            /_/                 by @jdx
2025.4.5 macos-arm64 (2025-04-18)

miseを有効化する

今回は、brewで入れました。Pathを通して使えるようにします。

echo 'eval "$(mise activate bash)"' >> ~/.bashrc
source ~/.zshrc

※zshを使っている方は ~/.zshrc に書き込んでください

bunのインストール

mise use bun 

インストールすると、mise.tomlファイルに以下の記載が追加されます。

[tools]
bun = "latest"

今回は、latestではなくバージョン指定したかったので以下のコマンドで設定しました。

mise use bun@1.2.10   

cspellをインストールする

bunを使ってインストールするため、少し工夫が必要になります。CSpellを使えるようにするためには、パッケージ名を検索する必要があります。
ドキュメントには以下の記載がありました。

To add an npm package as a dependency, use bun add

ということでnpmと同じような記載をするために以下のサイトで「cspell」と検索してヒットしたものを使うようにしました。

bun add -d cspell

そのあと、依存関係を反映させるために以下を実行します：

bun install

これで、node_modules にインストールされてCSpell を実行できるようになります。

ちなみにですがnode_modulesされたものの差分が大きくなってしまうと思います。その際にはgitignoreに入れておいてください。

.gitignore

# dependencies (bun install)
node_modules

スペルチェックする方法

以下のコマンドでチェックすることができると思います。何もしていないと莫大にチェックされるので少し注意が必要かもしれません。次の記事でcspell.jsoncを追加し、そこで詳細に設定します。

bunx cspell .

次回予告

今回は基礎編ということで、次回はもっと実践的に「cspell.jsoncの設定」や「CIとの連携」を紹介します！実プロジェクトで活かせるような内容になる予定です、お楽しみに！

• cspell.jsoncで必要な記載を書く
• Github ActionsのCIでスペルチェックをできるようにする

最後に

プロジェクト全体でスペルチェックを設定できることによって、プロジェクトメンバーへの負担が少しでも軽減できると思えました。毎回保存するのめんどくさいですよね〜
今回もとても勉強になりました。