VS Code で Markdown 編集時に「半角文字と全角文字の間に半角スペースを入れているかのチェック」と、特定条件下では textlint のチェックを無視する設定方法の紹介

VS Code で設定していた textlint の設定をいちからやり直しすことになりました。

特定条件下では textlint のチェックを無視し、半角文字と全角文字の間に半角スペースを入れているかのチェックを有効化する方法をインストール手順を紹介した備忘録です。

実現したいこと

1. 半角文字と全角文字の間に半角スペースを入れているかのチェックを有効化
2. 特定条件下では 1 番のチェックを含め textlint のチェックを無視
3. 1 番のチェックで指摘された箇所は手動で半角スペースを自動追加（自動修正）

特定条件下というのは［text］code hoge［/text］のブロック内ではチェックを無視したい。

半角スペース入れ忘れは自動で追加したいが、本当に意図していない箇所か念のため確認したいのでコマンドを入力してから修正をかけたい。

Commnadキー + .キーを入力後、Fix all auto-fixable problemsを選択して修正がかかること。

特定条件下の指定は先人の知恵を拝借しました。

textlint のインストールと設定

VS Code のワークスペース配下などの編集したいマークダウンファイルを保存している任意のディレクトリへ移動します。

cd [任意のディレクトリ配下]

textlint のインストールし、npx textlint --initコマンドを実行し、任意のディレクトリ配下に textlint の設定ファイル（.textlintrc.json）を生成します。

npm install --save-dev textlint
npx textlint --init

各種ルールの追加

実現したいことに必要なルールをインストールします。

npm install textlint-rule-preset-ja-technical-writing
npm install textlint-rule-preset-ja-spacing
npm install textlint-rule-ja-space-between-half-and-full-width
npm install textlint-filter-rule-allowlist

textlint-rule-preset-ja-spacing ルールを直接設定することはありませんでした。半角文字と全角文字の間に半角スペースを入れているかのチェックのためのja-space-between-half-and-full-widthを利用するにあたり必要と思われたためインストールしています。

各種ルールの設定

npx textlint --initコマンドを実行して生成した.textlintrc.jsonはこの様な設定になりました。

{
  "plugins": {},
  "filters": {
    "allowlist": {
      "allow": [
        "/^\\[.+\\]$[^]*?^\\[\\/.+\\]$/m"
      ]
    }
  },
  "rules": {
    "preset-ja-technical-writing": true,
    "ja-space-between-half-and-full-width": {
      "space": "always"
    }
  }
}

• allowlist: 正規表現で特定条件下では textlint の効力を無効化
  • ［text］code hoge［/text］の様な DevelopersIO 向けのシンタックスハイライト対策
  • 機能を有効にするためには以下のルールをインストールする必要がある
    • textlint-filter-rule-allowlist
  • 詳細解説リンク
• preset-ja-technical-writing: trueの箇所
  • 技術文書向けの校正ルール有効化
  • 機能を有効にするためには以下のルールをインストールする必要がある
    • textlint-rule-preset-ja-technical-writing
  • 詳細は GitHub の README 参照
• ja-space-between-half-and-full-widthの箇所
  • 半角文字と全角文字の間に半角スペースを入れているかのチェックを有効化
  • 機能を有効にするためには以下のルールをインストールする必要がある
    • textlint-rule-preset-ja-spacing
    • textlint-rule-ja-space-between-half-and-full-width
  • 詳細は GitHub の README 参照

実現したかった内容の Linter の設定は完了です。setting.jsonに追加する内容はありませんでした。

ユーザースニペット追加（オプション）

DevelopersIO 向けのシンタックスハイライトは独自記法となっています。たとえば Python のコードの場合は以下の様に記述しています。

［python highlight="" title=""］

［/python］

上記は独自の記法であるため、デフォルトの設定では自動で補完が効きません。私は記述が面倒なためユーザースニペットで対応しています。以下の設定ファイルでは[tの入力すると必要なコードブロック補完できます。

{
	"code_text": {
		"prefix": "[t",
		"body": [
			"",
			"$1",
			"[/text",
		],
		"description": "DevIO"
	},
	"code_json": {
		"prefix": "[j",
		"body": [
			"",
			"$1",
			"[/json",
		],
		"description": "DevIO"
	},
	"code_go": {
		"prefix": "[g",
		"body": [
			"",
			"$1",
			"[/golang",
		],
		"description": "DevIO"
	},
	"code_yml": {
		"prefix": "[y",
		"body": [
			"",
			"$1",
			"[/yml",
		],
		"description": "DevIO"
	},
	"code_python": {
		"prefix": "[p",
		"body": [
			"",
			"$1",
			"[/python",
		],
		"description": "DevIO"
	}
}

"[/text",の箇所で最後の]をあえて書いていません。[tと入力して補完するとき Markdown ファイルのデフォルトの設定で[と入力すると]も同時に入力されるため、ユーザースニペットでも]を記述してしまうと]]の様にダブってしまったための対策です。

ユーザースニペットのファイル保存先について

DevelopersIO でブログ書くとき以外では必要のない設定です。ブログの編集のディレクトリ内の.vscodeディレクトリ配下にdevio.code-sinippetsファイルを作成しています。

設定を終えた実行環境

ユーザースニペット

登録したユーザースニペットにより候補が表示され、候補の内容を選択します。

以下のコードブロックが入力されます。

半角スペースの挿入

［text］code hoge［/text］の内は textlint によるチェックは無視されている。

Commnadキー + .キーを入力後、Fix all auto-fixable problemsを選択して自動で修正をかける。

1 行目の方だけ自動修正が適用され、半角スペースが挿入されている。

1 行目の末尾「字」に赤波線で指摘事項があるのですが、文末が「。」で終わっていませんというご指摘です。

おわりに

当初はtextlint-filter-rule-commentsルールを利用して、コメントアウトした箇所を textlint 対象外としていました。

<!-- textlint-disable -->

textlint チェック対象外になる

<!-- textlint-enable -->

ユーザースニペットの登録ファイルへコメントアウトの文字列ごと記述して利用できました。ですが、私の場合は補完するときのキー設定といまいち噛み合わず、先人が正規表現を用意してくれたこともあり今回の方法へ移行しました。

秘伝のタレとなった setting.json の整理をと思っていたのですが、ぜんぜん関係ない設定の変更が必要でした。自分が使いやすいと思える環境へ戻す間に新しい秘伝のタレを製造している疑惑があるので設定内容を書き出してみました。textlint の設定例としてどなたかの参考になれば幸いです。

2023/10/7追記
修正を手動実行ではなく保存時に自動実行の設定を追加しました。

{
    "textlint.languages": ["markdown"],
    "textlint.run": "onType",
    "textlint.autoFixOnSave": true
}

参考

• Getting Started with textlint · textlint
• textlint-rule-preset-ja-spacing/packages/textlint-rule-ja-space-between-half-and-full-width at master · textlint-ja/textlint-rule-preset-ja-spacing
• textlint/textlint-filter-rule-comments: textlint filter rule that disables all rules between comments directive.