VSCode＋Textlintで文章校正をする

# はじめに
Visual Studio Code（VSCode）＋textlintで文章校正をするための導入手順です。

## 環境
* Windows11 64bit
* Visual Studio Code version 1.63
* Node.js v16.13.2
* npm 8.1.2
* textlint v12.1.0

# textlintとは
文章を書く時に表記揺れや誤字脱字、読みにくい表現などを校正してくれるツールです。

公式サイト
[textlint · The pluggable linting tool for text and markdown](https://textlint.github.io)

Qiitaの記事の下書きを、VSCodeを使ってMarkdownで書くことが多いのですが、textlintを使用すれば自動で文章校正ができます。
![textlint_demo](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/7a6e4494-21af-4fa1-75f5-fadc6fda889c.jpeg)

# 導入手順
導入手順について説明していきます。
以下の記事も参考にしてみてください。

作者のazuさんによる導入方法についての記事です。
[textlintで日本語の文章をチェックする - Web Scratch](https://efcl.info/2015/09/10/introduce-textlint/)

ドットインストールでも導入方法について動画で紹介されています。
[textlint入門 (全11回) - プログラミングならドットインストール](https://dotinstall.com/lessons/basic_textlint)

## Node.jsのインストール
textlintを導入するためにはNode.jsが必要となります。
既にインストールされている人は次に進んでください。

1. [Node.js公式サイト](https://nodejs.org/ja/)からNode.js（推奨版）をダウンロードする
![node_js_download](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/10a8104c-88df-48ca-d7a0-78925c7ba4ea.jpeg)

1. ダウンロードしたファイルを実行し、画面の指示に従って進んでいき、Node.jsをインストールする

2. PowerShellを立ち上げて、以下のコマンドを実行し、Node.jsがインストールされたことを確認する

	```
	node -v
	```

	![terminal_node](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/0ad8a2df-2f57-62ca-f49f-e9800379dd66.jpeg)

3. Node.jpと一緒にnpm（Node Package Manager）もインストールされているはずなので確認する

	```
	npm -v
	```

	![terminal_npm](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/6a713bd2-aedd-58f7-f054-1aeefd1a3313.jpeg)

## textlintのインストール
VSCode上でtextlintの環境を作っていきます。

1. VSCodeを開き、任意のフォルダ、もしくはWorkspeaceを開く
	今回は「D:\Workbooks」というフォルダを作成し、VSCodeで開きました。
	VSCodeからは必ずフォルダかWorkspeaceを開いてください。ファイルそのものを開いてしまうとtextlintが正しく作業しません。

	![open_folder](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/c3266ea7-06c5-95dd-92fe-31fc9cac15b2.jpeg)

1. VSCodeでターミナルを開き、「D:\Workbooks」へ移動する

	Workspeaceで開いた場合は、「Workbooks.code-workspace」ファイルがあるディレクトリへ移動してください。

	![terminal](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d6c0bb42-417d-1bf1-1e98-784e0b32e87b.jpeg)

1. ターミナルで以下のコマンドを実行し、プロジェクト管理用ファイルを作成する（「package.json」が作成される）

	```
	npm init -y
	```

1. textlintをインストールする（「node_modules」と「package-lock.json」が作成される）

	```
	npm install --save-dev textlint
	```

1. textlintのバージョンを表示し、インストールできたことを確認する

	```
	./node_modules/.bin/textlint -v
	```

	もし以下のようなエラーが出た場合は、実行ポリシーの変更をしてください。
	![error](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/efec35f0-6cf5-0f25-39e8-f1bd34968a96.jpeg)
	* 実行ポリシーの変更（現在のプロセスのみ有効）

		```
		Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
		```

		![textlint_ver](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d72eac99-4571-bac1-5748-078d4b3ce1c3.jpeg)


1. Textlintの校正ルールをインストールする

	```
	npm install --save-dev textlint-rule-preset-ja-technical-writing
	npm install --save-dev textlint-rule-preset-jtf-style
	```

	ルールはいろいろあるのですが、自分はこの2つのルールを使用しています。
	* [textlint-rule-preset-ja-technical-writing](https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing)
		技術文書を書くためのルールのプリセット（「1文の長さは100文字以下とする」や「ら抜き言葉」など）
	* [textlint-rule-preset-JTF-style](https://github.com/textlint-ja/textlint-rule-preset-JTF-style)
		JTF日本語標準スタイルガイド（翻訳用）に準拠しているプリセット
	
2. ルールを有効にする設定ファイルを作成する（「.textlintrc」が作成される）

	```
	npx textlint --init
	```

	.textlintrcの中身は以下のようになっており、これを編集することで適用したいルールを変更できます。

	```json
	{
	"filters": {},
	"rules": {
		"preset-ja-technical-writing": true,
		"preset-jtf-style": true
	}
	}
	```

## 拡張機能「vscode-textlint」のインストール
textlintをVSCode上で動かすための拡張機能をインストールします。

1. 拡張機能から「vscode-textlint」を検索する
	![extensions](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/4552dcc2-17b9-cd37-d17c-44812404ad3c.jpeg)

1. インストールする
	![vscode_textlint](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/7595ac78-b813-945a-de9b-6baf9e413344.jpeg)

1. VSCodeを再起動する

1. もしtextlintがうまく起動しない場合は、以下の設定をする
	1. textlintの設定画面を開く
		![extension_settings](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/2eb0099b-8f80-38fd-e200-1d0797043863.jpeg)

	1. textlint: Node Pathに「node_modules」フォルダが存在するフォルダのパスを入力する
		![node_path](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d45ca078-a165-ca0b-31e6-97e08d4adce5.jpeg)

これで、VSCode上でtextlintを使用して文章が自動校正されるようになりました。
![textlint_demo](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/7a6e4494-21af-4fa1-75f5-fadc6fda889c.jpeg)

# 参考にしたサイト
* [textlintで日本語の文章をチェックする - Web Scratch](https://efcl.info/2015/09/10/introduce-textlint/)（最終アクセス2022年1月25日）
* [textlint入門 (全11回) - プログラミングならドットインストール](https://dotinstall.com/lessons/basic_textlint)（最終アクセス2022年1月25日）
* [textlint と VS Code で始める文章校正 - Qiita](https://qiita.com/takasp/items/22f7f72b691fda30aea2)（最終アクセス2022年1月25日）