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

![スクリーンショット 2025-04-22 8.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/de423e46-d350-4232-8883-82de572258b9.png)


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

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

https://github.com/streetsidesoftware/cspell

https://cspell.org/


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

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker


# 今回やりたいこと

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


# インストールについて

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

https://cspell.org/docs/installation/

https://formulae.brew.sh/formula/cspell

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

## Bunについて
https://bun.sh/

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

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

![スクリーンショット 2025-04-21 15.55.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/a8b0f53e-8f16-4bbc-8064-4847fc348a69.png)


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

https://mise.jdx.dev/

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

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

``` shell
brew install mise 
```

### バージョン確認

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

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

```shell
echo 'eval "$(mise activate bash)"' >> ~/.bashrc
source ~/.zshrc
```
※zshを使っている方は ~/.zshrc に書き込んでください

### bunのインストール
```
mise use bun 
```

インストールすると、`mise.toml`ファイルに以下の記載が追加されます。
```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

https://bun.sh/guides/install/add



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

https://www.npmjs.com/package/cspell

```shell
bun add -d cspell
```
そのあと、依存関係を反映させるために以下を実行します：

```shell
bun install
```

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

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

```gitignore:.gitignore
# dependencies (bun install)
node_modules
```

### スペルチェックする方法

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

```shell
bunx cspell .
```


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

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


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