pre-commitとtextlintを使ってHTMLに潜むゼロ幅スペース文字や表記ゆれを倒す #Node.js

概要

括弧や数字の全角半角が表記揺れしていたり、href内にゼロ幅スペースが紛れ込んでいてリンク切れが起こってしまったりすることをtextlintを使って防ごうという記事です。

textlintとは？

文章の校正をしてくれるリンターツールです。漢字よりひらがなのほうがいい場合や、「てにをは」がおかしいような文章を指摘してくれます。

導入手順

1. プロジェクトの作成

※ この工程はpackage.jsonを生成するものです。すでにある方はスキップしてください。

npm init

2. パッケージのインストール

npm install --save-dev textlint textlint-rule-prh # textlint関係
npm install --save-dev husky lint-staged # pre-commit関係

textlint：textlint本体
textlint-rule-prh：textlintで使う辞書を読み込めるようにするためのもの
@textlint/textlint-plugin-text：もともとtextlint本体に付属するプレーンテキスト用のプラグイン

3. pre-commitが動作するように設定する

package.jsonに次の項目を追記してください。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.html": "textlint"
  }
}

4. textlintの設定ファイルを作成

./node_modules/.bin/textlint --init

作成された.textlintrcファイルの中身を次のように上書きしてください。
これでtextlintがHTMLファイルを読むようになり、オリジナルの辞書を利用するようになります。

※今回は使いませんがHTMLを読むためのプラグイン「textlint-plugin-html」については後述します。

{
  "filters": {},
  "rules": {
    "prh": {
      "rulePaths": ["./prh.yml"]
    }
  },
  "plugins": {
    "@textlint/text": {
        "extensions": [".html"]
    }
  }
}

5. 辞書ファイルを作成

package.jsonと同じ階層にprh.ymlというファイルを作成します。
中身を次のように設定してみてください。

version: 1
rules:
  - expected: VS Code
    patterns: VSCode
    prh: 正しい表記はVS Code

  - expected: ""
    patterns: "/[\\u034f\\u200b\\u200c\\u200d\\u200e\\u200f\\u2028\\u2029\\u202a\\u202b\\u202c\\u202d\\u202e\\u2061\\u2062\\u2063\\ufeff]/"
    prh: ゼロ幅スペースを検出しました

項目を増やしたいときは次の塊を追加することで対応できます。patternsには正規表現も利用できますし、リストで複数項目設定することもできます。

  - expected: 正しい表記
    patterns: 検出する表記
    prh: エラーメッセージ（説明文）

参考：prh/prh.yml at master · prh/prh

6. 試してみる

プロジェクト内に適当なHTMLファイルを作成します。たとえば、test.htmlなど。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>私はVSCodeが好きです</p>
<p>ここに→【‪】←ゼロ幅スペース文字がいます</p>
</body>
</html>

このHTMLファイルがpackage.jsonと同じ階層にあるとき、次のようなコマンドでリンターに検査させられます。

./node_modules/.bin/textlint test.html

するとおそらく次のようなログがでるはずです。

D:\dummy\dummy\test.html
  10:6  ✓ error  VSCode => VS Code
正しい表記はVS Code           prh
  11:9  ✓ error   =>
ゼロ幅スペースを検出しました  prh

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

出ない場合は、node_modulesフォルダを削除し、npm iコマンドを実行してみてください。

7. コミットしてみる

うまくpre-commitが動作していれば次のようなエラーが出てコミットが中断されるはずです。
こちらもうまく出ない場合は、node_modulesフォルダを削除し、npm iコマンドを実行してみてください。

Sourcetree

TortoiseGit

いろいろ試してみよう

検出には正規表現も使えるので、他にも様々な表記ゆれや誤実装を回収できそうです。

  - expected: （
    patterns: (
    prh: 全角括弧を利用してください

  - expected: ）
    patterns: )
    prh: 全角括弧を利用してください

などなど…。Webサイトの運用で表記ゆれやゼロ幅スペースにお困りの場合は試してみてください。

タグを無視する`textlint-plugin-html`

HTMLのタグを無視させたい場合はtextlint-plugin-htmlを一緒にインストールしてください。

npm i -D textlint-plugin-html

.textlintrcの設定は次のようになります。

{
  "filters": {},
  "rules": {
    "prh": {
      "rulePaths": ["./prh.yml"]
    }
  },
  "plugins": [
    "html"
  ]
}

検出されない場合がある（追記）

~~コードの順番など、特定のケースでうまく検出されない場合がある模様。調査中。~~
~~https://github.com/textlint-rule/textlint-rule-prh/issues/74~~

問題解決済みバージョン：textlint 11.6.2

pre-commitとtextlintを使ってHTMLに潜むゼロ幅スペース文字や表記ゆれを倒す

概要