Visual Studio Codeで textlint校正ツールを使う方法

textlint と Re:VIEW

textlint と Re:VIEW

VS Codeからtextlint校正ツールで日本語原稿チェック

2018年5月、Visual Studio Code(VS Code)からtextlint校正ツールを使用してRe:VIEW日本語原稿をチェックしました。VS Codeは、マイクロソフト社が開発したクロスプラットフォームで動作する高機能なソースコードエディターです。

VS Codeにtextlint拡張機能 vscode-textlint をインストールして文章をチェックします。

vscode-textlint

vscode-textlint

vscode-textlint

The extension uses the textlint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version.

【要約】
拡張機能は、開いているワークスペースフォルダーにインストールされているtextlintライブラリーを使用します。
フォルダーが提供していない場合、拡張機能はグローバルインストールバージョンを探します。

上記説明から、vscode-textlintはインストール済みのtextlintコマンドを起動していることがわかります。ローカルフォルダーにインストール済みのtextlintを使います。

textlintのインストールと設定については、下記ブログを参照してください。

textlint校正ツールでRe:VIEW日本語原稿をチェックする方法

下記ルールをインストールしました。

技術文書向けルールのカスタマイズは、下記ブログを参照してください。

textlint校正ツールの技術文書向けルールをカスタマイズする方法

日本語周りスペースルールのカスタマイズは、下記ブログを参照してください。

textlint校正ツールの日本語周りスペースルールをカスタマイズする方法

表記ゆれルールのカスタマイズは、下記ブログを参照してください。

textlint校正ツールで表記ゆれをチェックする方法

また、VS CodeにRe:VIEWプラグインをインストールして、プレビューや表記チェックできるようにしています。

Visual Studio Codeプラグインで Re:VIEW を使う方法

VS Codeからtextlintを使用

VS Codeからtextlintを使用

vscode-textlintのインストール

Visual Studio Code にtextlint拡張機能プラグインをインストールします。

textlint拡張機能インストール1

textlint拡張機能インストール1

左の拡張機能(①)をクリックして、検索窓に「vscode-textlint」を入力(②)ます。vscode-textlintの拡張機能を選択(③)します。

textlint拡張機能インストール2

textlint拡張機能インストール2

vscode-textlintであることを確認して、[インストール]をクリックします。

textlint拡張機能インストール3

textlint拡張機能インストール3

[再読み込み]をクリックします。

textlint拡張機能インストール4

textlint拡張機能インストール4

インストール済みの拡張機能を確認します。

Re:VIEWサンプル原稿

textlintで原稿の校正を行うサンプル原稿を作成します。ファイル名はtest.reで、UTF-8エンコードLF改行コードで作成します。

= はじめてのRe:VIEW
 
== Re:VIEWとは
 
Re:VIEWは素晴らしいツールですが、
Windowsへのインストールが難しいと言われていましたが、
2018年現在は簡単にインストールできます。

jQueryは、JavaScriptライブラリです。
JavaScriptには、ブラウザ上で動くクライアントサイドと、
サーバー側で実行するサーバーサイドがあります。

ディフォルトの設定を行います。

VS Codeで原稿チェック

textlintをインストールした環境のディレクトリーを示します。

ディレクトリーの構成

ディレクトリーの構成

Visual Studio Code を起動して、「ファイル(F)-フォルダーを開く(K)」で TEXT01フォルダーを開きます。

VS Code フォルダーを開く

VS Code フォルダーを開く

「ファイル(F)-ファイルを開く(F)」で サンプル原稿 test.reを開きます。

VS Code ファイルを開く

VS Code ファイルを開く

右上の [Show preview]をクリックするとプレビュー表示します。これは、Re:VIEW拡張機能の働きです。

VS Code プレビュー

VS Code プレビュー

textlintチェックにより、サンプル原稿 test.reに波アンダーラインを表示しました。

指摘事項の表示

指摘事項の表示

波アンダーラインにマウスを重ねると、指摘事項がポップアップで表示します。

表示(V)-統合ターミナル(I)でターミナルを表示して、[問題]を選択します。

指摘事項

指摘事項

7個の指摘事項を表示しています。指摘事項をクリックすると、原稿の該当位置にジャンプします。

textlintコマンドで原稿チェック

ターミナルで「textlint test.re」とコマンドを実行すると指摘事項を表示します。

textlint指摘

textlint指摘

> textlint test.re
ers\pi\MyTextlint\text01>textlint test.re

C:\Users\pi\MyTextlint\text01\test.re
   1:3   ✓ error  はじめて => 初めて                                    prh
   5:9   ✓ error  素晴らし => すばらし                                  prh
   5:19  error    文中に逆接の接続助詞 "が" が二回以上使われています。  preset-ja-technical-writing/no-doubled-conjunctive-particle-ga
   6:21  ✓ error  言わ => いわ                                          prh
  11:1   ✓ error  サーバー => サーバ                                    prh
  11:11  ✓ error  サーバー => サーバ                                    prh
  13:1   ✓ error  ディフォルト => デフォルト                            prh

✖ 7 problems (7 errors, 0 warnings)
✓ 6 fixable problems.
Try to run: $ textlint --fix [file]

[問題]で表示している指摘事項と少々内容が異なる点が気になります。

VS Codeからtextlintコマンドを実行しているわけではなく、textlint環境のルール設定を参照してvscode-textlint拡張プラグインでチェックしているのかもしれません。

まとめ

Visual Studio Codeに vscode-textlint拡張プラグインをインストールして、textlint校正ツールによりRe:VIEW日本語原稿をチェックできました。

書籍執筆支援システム Re:VIEWを快適に活用することができます。