textlintでブログの文章を整える

今までこのブログの文章は、はてなブログ上のエディタで書いていた。 最近はnoteでも文章を書くことがあり、複数アプリで置き場所が1つにならないのが煩わしくなり文章の管理をGitHub上に持ってきた。 普段使っているVS Codeで文章が書けることになったので、このタイミングで「textlint」を導入した。 文章上のルールや専門用語のチェックをおこない正しい文章を書いていきたい。

textlintの準備

npmを使い「textlint」をインストールする。

npm install --save-dev textlint

1から文章のルールを作成することもできるが、今回はすでにルールプリセットを公開してくださっている方のものを利用させてもらう。 https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing

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

また、技術用語のチェック用辞書もインストールする。こちらはルールプリセットを公開してくださっている方が作っているもので、WEB+DB PRESS用語統一ルールをベースにされている。

npm install --save-dev textlint-rule-spellcheck-tech-word

設定ファイルの準備

ここまで次のもののインストールが完了したら、設定ファイルを作成する。

• textlint
• textlint-rule-preset-ja-technical-writing
• textlint-rule-spellcheck-tech-word

「textlint」をおこないたいフォルダーでtextlint initを実行し.textlintrcを生成する。 自分はarticlesフォルダをルートとし、配下にhatenablogフォルダ・noteフォルダを作成している。 今回はarticleフォルダでtextlint initを実行した。

- article
  - .textlintrc ←ココに作られる
  - hatenablog
    - *.md
  - note
    - *.md

.textlintrc の中に次の記述をする。設定したルールが適応される。今回は事前にインストールしたものを設定した。

{
  "rules": {
    "preset-ja-technical-writing": true,
    "spellcheck-tech-word": true,
  }
}

これで 「textlint」 自体の設定は完了した。コマンドラインで./node_modules/.bin/textlint ./*"を実行すると 「textlint」 された結果がコンソールに表示される。

vscode-textlintをインストールする

自分はVS Codeを利用しているので、VS Codeの拡張機能を利用する。 拡張機能から 「vscode-textlint」 を検索しインストールする。 特に難しい部分ではないので割愛する。

画面上での動き

VS Codeを起動する際に注意するところがあるので先に載せておく。 「vscode-textlint」 を利用する場合、.textlintrcが存在するフォルダをVS Codeで開かないといけない。 今回の説明では、articleフォルダに配置したのでarticleフォルダを開く。

- article
  - .textlintrc ←ココに作られる
  - hatenablog
    - *.md
  - note
    - *.md

下記の例だと、workspace配下でVS Codeを開くと.textlintrcがないため、「vscode-textlint」 が正しく動作しない。

- workspace
  - hoge
  - fuga
  - article
    - .textlintrc
    - hatenablog
      - *.md
    - note
      - *.md

使えるようになると、次のように警告を出してくれる。

これは正式な表現が「JavaScript」なのに対して、「Javascript」になっていると警告されている。