hugo を使って書いているこのブログですが、文章チェック的なことをほとんどしていません。

ですが、ブログはどちらかというとぐわーっと書いてしまいたい派なので、最低限の文章チェックは自動化したい。

ということで textlint を使ってブログを書きながら文章チェックする仕組みを作りました。

前提

  • 使っているエディタ:Visual Studio Code
  • node.js, npm は導入済み

手順

1. textlint の導入

まずはこのブログのプロジェクトに textlint を入れます。

hugo のディレクトリのルートでnpm init -yしたのち、npm i --save-dev textlintします。

しばらくするとインストールが終わるので、npx textlint -vして正常に完了しているかを確認。

% npx textlint -v
v11.7.6

2. プリセットの導入と、.textlintrc の作成&記載

textlint はインストールしただけだと何もせず、ルールを追加する必要があります。

textlint-rule-preset-ja-technical-writing というルールプリセット(複数のルールをパッケージングしたもの)がいい感じと聞き入れてみました。

npm i --save-dev textlint-rule-preset-ja-technical-writing

※このコマンド一発でよかったはずなのですが、私の環境ではうまくいかず、結局上記プリセットに含まれているであろうルールをコツコツ入れていくはめになりました。

次に、さきほど npm i したところで.textlintrcというファイルを作成します。

記載する際のフォーマットやルール、サンプルなどはネット上にたくさん有ります。とはいえ最初からすべて自分で決めるのは無理というもの。いったんTextLint の技術文書向けのルールセットが便利だった - Corredorに記載されているルールを真似してみることにします。

3. vscode 用の拡張をインストール

こちらを導入。

vscode-textlint - Visual Studio Marketplace

拡張を入れることで、vscode上でMarkdownを書いて保存したタイミングでLintが走って、即座に問題点を指摘してくれます。

導入した結果

textlint-sample

上の画像のように、問題がある点に赤く波線を引いてくれるようになりました。マウスオーバーすると何が問題なのか表示してくれます。

これでブログの文章が少し読みやすくなれば幸いです。

参考