概要
プログラミングをすると時々タイポでエラーが発生します。また、タイポはよく見付かれなくて、意外に時間を無駄にする場合があります。今回のブログポストではCSpellを使ってタイポを検査する方法について説明します。
ここで紹介するソースコードは下記のリンクで確認できます。
Nodeのインストール
CSpellを使うためにはNodeをインストールする必要があります。各OSに合わせてNodeをインストールします。s
macOS
Homebrewはマックにパッケージをインストールしたり、管理するマック専用のパッケージ管理者です。Homebrewを使ってマックに必要なパッケージを簡単にインストールすることができます。次のコマンドを実行してHomebrewをインストールします。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
インストールしたら、次のコマンドを実行してうまくインストールされたか確認します。
brew --version
もし、バージョンが見えない場合、ターミナルを終了して、再び起動して実行してみます。すでにHomebrewがインストールされた方は下記のコマンドを実行してNodeをインストールします。
brew install node
Windows
ウィンドウズではChocolateyと言うパッケージマネージャーを使います。管理者権限でCMDまたはPowershellを開いて、下記のコマンドを実行してChocolateyをインストールします。
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
インストールが完了されたら、次のコマンドを実行してインストールができたか確認します。
choco –version
Chocolateyのバージョンが表示されない場合は、CMDまたはPowershellを終了して再び実行します。Chocolateyがインストールされたら下記のコマンドを実行してNodeをインストールします。
choco install -y nodejs.install
package.jsonの生成
CSpellはNodeの開発環境で動作します。したがって、Nodeのパッケージを管理するため、package.jsonファイルを生成する必要があります。下記のコマンドを実行してpackage.jsonファイルを生成します。
npm init
コマンドを実行すると次のような質問が表示されます。特に変更するものがない場合は、全ての質問にEnterキーを入力します。
package name: (cspell-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
そしたら、次のようにpackage.jsonファイルが生成されることが確認できます。
{
"name": "cspell-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
CSpellのインストール
今度は次のコマンドを使ってCSpellをインストールします。
npm install --save-dev cspell
実行スクリプト生成
インストールしたCSpellを使うため、実行するスクリプトを生成してみましょう。package.jsonファイルを開いて次のように修正します。
{
...
"scripts": {
"check:spell": "cspell '**' --gitignore --no-progress "
},
...
}
CSpellを使って全てのファイル(**)を検査する予定で、--gitignoreオプションを使って.gitignoreに設定せれたファイルを検査しないようにしました。また、--no-progressオプションを使って検査してる状態を表示しないようにしました。
実行
次はCSpellが上手く動作するか確認するためindex.jsファイルを生成して次のように修正します。
function template() {
console.log('deku');
}
その後、次のコマンドを実行して、CSpellが上手く実行できるか確認します。
npm run check:spell
CSpellが問題なく動作すると、次のようなエラーが表示されることが確認できます。
/study-linters/cspell-example/index.js:2:16 - Unknown word (templete)
CSpell: Files checked: 2, Issues found: 1 in 1 files
除外単語設定
特定単語をCSpellのタイポ検査から外したい場合、辞書を作って登録する必要があります。.cspell.jsonファイルを生成して次のようにタイポ検査から除外したい単語を登録します。
{
"words": ["deku"]
}
その後、次のコマンドを再び実行してCSpellでタイポを検査してみます。
npm run check:spell
以前と違って辞書に登録された単語がタイポ検査の結果に表示されないことが確認できます。
CSpell: Files checked: 2, Issues found: 0 in 0 files
特定ファイルフォマットの除外
ビルドの結果やスナップショットテストの結果ファイルなど特定ファイルをCSpellのタイポ検査から除外することができます。特定ファイルフォマットを除外させるために.cspell.jsonファイルを開いて下記のように修正します。
{
"words": ["deku"],
"ignorePaths": ["*.snap"]
}
これからスナップショットファイルの結果である.snapファイルはCSpellの検査から除外されます。
完了
これでCSpellを使ってタイポを検査する方法について説明しました。CSpellを使って全てのタイポを検知することができないですが、タイポのせいで出る問題を少しでも解決できるようになるので、皆さんも使ってみてください。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
