VS Codeにtextlintを導入して文章を校正する
ブログメンタリング受講者の方々が書いたtextlint
の記事に触発され、Visual Studio Code
(以降VS Code
)にtextlint
を導入しました。
ブログメンタリングに関しては
技術ブロガーを育てる!ブログメンタリングで何を教えているのか - kakakakakku blog
を読んでみてください。
基本的には、上記記事の方法と同様です。
しかし、少し異なるのは私の
ブログ
がHugo
で構築している点です。
Hugo
は、通常のMarkdown
の文章の中にHugo
独自の記法(Shortcodes
)を利用できます。
textlint
とそのルールプリセットを導入すると、Shortcodes
の部分がエラーになってしまう(文字数制限)ため、その除外方法(フィルター方法)を付け加えています。
textlintとは

Markdown
やPlain text
に書かれた文章のチェックを行うツールです。
ブログの文章以外にも、ドキュメントや書籍作成などの事例をよく目にします。
普段私は、VS Code
でMarkdown
を書いています。
よって、VS Code
上で保存するのと同時にtextlint
が動作して、文章のチェックができる環境を目指します。
VS Codeにtextlintを導入する
textlint
は「textlint
本体」と適用する「ルール」に分かれています。
そのため、適用したいルールを利用者が選択して導入できます。
今回は、以下の2つのルールを適用しました。
textlint-rule-preset-ja-technical-writing
preset-jtf-style
1つ目のtextlint-rule-preset-ja-technical-writing
は、技術文書向けのルールプリセットです。
技術文書を書く上での留意点が一通り収められています。
厳しめに作られているとのことですが、まずはこの流儀に従ってみます。
- textlint-ja/textlint-rule-preset-ja-technical-writing: 技術文書向けのtextlintルールプリセット
- 技術文書を書くためのtextlint校正ルールセット | Web Scratch
2つ目のpreset-jtf-style
は「JTF日本語標準スタイルガイド(翻訳用)」を実装したルールプリセットです。
この「JTF日本語標準スタイルガイド(翻訳用)」とは「実務翻訳において和訳時に使用できる日本語表記ガイドライン」です。
1つ目のtextlint-rule-preset-ja-technical-writing
だけでも十分ですが、括弧の扱いなどのスタイルも含んだルールプリセットとして導入しました。
記事を書いているうちに違和感があるようだったら適宜メンテンスする予定です。
1. textlintインストール
Hugo
のプロジェクト直下で以下のコマンドを実行し、textlint
本体と上記2つのルールをインストールします。
npm install --save-dev textlint textlint-rule-preset-ja-technical-writing textlint-rule-preset-jtf-style
2. textlintルール定義
textlint
の設定ファイルは.textlintrc
です。以下のコマンドで.textlintrc
を生成します。
npx textlint --init
.textlintrc
{
"filters": {},
"rules": {}
}
この.textlintrc
のrules
に下記の通り2つのルールを追加します。
{
"filters": {},
"rules": {
"preset-ja-technical-writing": true,
"preset-jtf-style": true
}
}
これでtextlint
としての準備が整いました。
試しに以下のコマンドを実行することで、動作を確認できます。
npx textlint {hogehoge.md}

3. VS CodeにtextlintのExtenstionをインストール
続いてVS Code
で記事を保存した瞬間にtextlint
が実行されるようにします。
以下のVS Code Extensiton
をインストールし、WindowをReloadします。これで、VS Code
にtextlint
を統合できました。
vscode-textlint - Visual Studio Marketplace

VS Code
で保存した瞬間にtextlint
による文章チェックが行われます。また、下図の通り、自動修正可能な指摘は一括修正できます。

4. HugoのShortcodesを除外ルールに追加
上記の手順により、VS Code
上でtextlint
による文章チェックが行えるようになりましたが、Hugo
を利用している場合はもう一手間必要です。
Hugo
のShortcodes
はURLを含めて長くなってしまう場合があり、そのままだと1文の文字数制限に引っかかってしまいます。
そこで、冒頭で書いたHugo
のShortcodes
を除外するルールを追加します。
textlint
ではホワイトリストによる除外設定が可能です。
ホワイトリストを作るためにはtextlint-filter-rule-whitelist
を追加でインストールします。
npm install --save-dev textlint-filter-rule-whitelist
続いて、.textlintrc
のfilters
に以下の通り追加します。
これは、HugoのShortcodes
として{{%
shortcodes %}}
を利用しているためです。
{
"filters": {
"whitelist": {
"allow": [
"/{{%[\\s\\S]*?%}}/m
"
]
}
},
"rules": {
"preset-ja-technical-writing": true,
"preset-jtf-style": true
}
}
まとめ
ようやくtextlint
を用いた日本語校正が行えるようになりました。
常に隣にtextlint
がいて、自分が間違った日本語を書いた瞬間に指摘してくれるのは非常にありがたいです。
また、今まで自分が書いていた日本語は以下の指摘が多く、技術文書として適切ではないことに気付かせてくれました。
- 読点が多い
- 弱い表現になっている
- 冗長な表現になっている
ぜひあなたもtextlint
を用いて、ツールのサポートを受けながら正しい日本語を書く意識をしてみませんか。
Related contents

BOOK
2012.03.14

BOOK
2011.01.15

TECH
2019.01.03