Site cover image

blog by izumiz

blog by izumiz
2021-01-21
JavaScriptメモ

Textlintの初期設定メモ

Textlintの導入とVSCode Integrationのメモ

導入手順

  1. Textlintのインストール
  2. ルールの追加
  3. .textlintrcの設定
  4. CLI上Textlintを動かす
  5. VScodeで使う

Textlintをインストールする

ディレクトリの作成，Textlint本体のインストール 

mkdir docs # Textlintを使うディレクトリの作成
cd doc
npm init --yes # package.jsonが生成される
npm install textlint # Textlintをdocsにインストール

ルールの追加

Textlintにルールを入れることで，目的のLintが利用可能になります．

ルールリストは，以下のリンクにあります．https://github.com/textlint/textlint/wiki/Collection-of-textlint-rule

今回は，技術文書向けのtextlintルールプリセットと説明のあるtextlint-rule-preset-ja-technical-writingのルールをインストールします． 

npm install --save-dev textlint-rule-preset-ja-engineering-paper

.textlinrcの設定

.textlintrcを設定することで， ./node_modules/.bin/textlint コマンドで任意のルールを使用することができます．

.textlintrcを生成するには，以下のコマンドを実行します． 

./node_modules/.bin/textlint --init

ファイルの中身は以下のようになります． 

{
  "filters": {},
  "rules": {
    "preset-ja-technical-writing": true
  }
}

CLI上Textlintを動かす

以下のコマンドでmarkdown.mdに対してTextlintを実行する． 

./node_modules/.bin/textlint markdown.md

上記のコマンドをテキトーなファイルに実行したところ以下のようなエラーが返り，コマンドラインでの実行は成功しているようです． 

  16:34  error  一文に二回以上利用されている助詞 "に" がみつかりました。  ja-technical-writing/no-doubled-joshi
  19:28  error  弱い表現: "かも" が使われています。                       ja-technical-writing/ja-no-weak-phrase
  19:34  error  Disallow to use "？"                                      ja-technical-writing/no-exclamation-question-mark
  41:36  error  文末が"。"で終わっていません。                            ja-technical-writing/ja-no-mixed-period

VSCodeで使う

拡張機能をインストールする

VSCodeのTextlint Extension taichi.vscode-textlint をインストール．

VSCodeにTextlintの設定をする

settings.jsonにTextlintの設定をしますが，今回は，Workspaceのみに反映したいので，WorkspaceのRootに.vscode/settings.jsonを作成します．

現在のファイル構成は以下の通りです．(npmではなくyarnを使用しているため，少し異なるかもしれません) 

/Users/user1/Docs
├── .textlintrc
├── .vscode
│   └── settings.json
├── markdown.md
├── node_modules
├── package.json
└── yarn.lock

pwd | pbcopy でWorkspaceのルートディレクトリをコピーします．
上の結果を /Users/user1/Docsとします．

.vscode/settings.jsonを以下のように設定します． 

{
  "textlint.autoFixOnSave": false, // 保存時の自動修正を無効
  "textlint.run": "onType", // 文字を入力するときに実行する
  "textlint.configPath": "/Users/user1/docs/.textlintrc",
  "textlint.nodePath": "/Users/user1/docs/node_modules/@textlint"
}
  • "textlint.run"は 実行するタイミングです． "onSave", "onType" があります．
  • "textlint.autoFixOnSave"はルールが自動修正に対応しているものであれば，保存時に自動修正されると思われます．
Markdown ドキュメントを開く

Markdownファイルを開くと，赤い波線などproblemが表示されるはずです(ルールに反している物がある場合)．

電球のマークをクリックすると，その箇所だけ修正するようなメニューが表示されるはずです．

Shift + Command + M で Problemsを表示できます．

JavaScriptメモ