textlintのインストールから新しいルール作成までやってみた

textlintを使ったルールを作成しようと四苦八苦したので作業ログを残しておこうと思います。

javascript初心者 (簡単なチュートリアルを一通り終えた程度) が実装していることを先に述べておきます。

MacBook Pro、macOS 12.4 Montereyで確認しています。

npmのインストール

npmはすでにローカルにインストールされていたのですが、インストールしなおしました。
このstackoverflow 記事と同様、パッケージをインストールしようとすると Error: EACCES: permission denied が発生して権限周りがうやむやになっていることがわかったからです。
npmの公式ページ (Downloading and installing Node.js and npm | npm Docs) をみてnodeのバージョンコントロールに n をインストールしました。
- nodeのバージョンを指定するとnpmもついてくるので、これで環境は整いました。

% n ls
node/10.19.0
node/14.4.0
node/18.1.0
% node -v
v18.1.0
% npm -v
8.8.0

前述のnpmの公式ページではnodeのバージョンマネージャーでnodeとnpmをインストールすることを推奨していました。(下記) ネット上では色々紹介されていますが公式サイトに従っておくのが無難そうだなと思います。

We strongly recommend using a Node version manager like nvm to install Node.js and npm.

textlintのインストール

textlintのドキュメント Getting Started with textlint · textlint の通り導入していきます。

新しくディレクトリ textlint-demo を作って動作確認しました。
installのオプションに --save-dev をつけることでローカル textlint-demo/package.json が更新されます。

 {
   "name": "textlint-demo",
   ...,
   "devDependencies": {
     "textlint": "^12.1.1",
     "textlint-rule-no-todo": "^2.0.1"
   },
   ...
 }

実行コマンドは ./node_modules/.bin/textlint と書いてありますが、ローカルの実行では npx textlint のように npx を使うこともできました。
- ドキュメントの他のページでは npx 使われているので多分問題ないはずです。

textlintのルールを新規作成

textlintの実行環境が整ったのでルールをつくります。

ドキュメント (https://textlint.github.io/docs/rule.html#setup-for-creating-rule) に記載のツール create-textlint-rule を使ってベースを作成。
- textlint-rule-no-todo と同じガワができます。
- 簡単なルールであればこのテンプレートを拡張するだけで実装できそうです。

オプションの設定

options = {} で引数を受け取ることができます
optionsを使っているルールをみて、どういう使い方をすればいいかなんとなく理解。
- textlint-rule-max-number-of-lines
- textlint-rule-max-ten 　
ルールを使う際は .textlintrc で指定できます。
- 例えば textlint-rule-max-number-of-lines の場合、max を指定することで max-number-of-lines のルールを使うことができます。

 {
   "rules": {
     "max-number-of-lines": {
         "max" : 300
     }
   }
 }

テストの実装

create-textlint-rule のテンプレートでルールを作成するとテストコード test/index-test.js が作成されます。以下のようなコードです。

  "use strict";
  import TextLintTester from "textlint-tester";
  const tester = new TextLintTester();
  import rule from "../src/index";
  // ruleName, rule, { valid, invalid }
  tester.run("rule", rule, {
      valid: [ ....

テストコードの定義は textlint配下のフォルダ (https://github.com/textlint/textlint/tree/master/packages/textlint-tester) にあります。
- create-textlint-rule のgithubページからも飛べます。
書き方としてはシンプルで、valid, invalidにそれぞれ有効なケース、無効なケースを列挙すればよいだけです。
- ただし、無効なケースについては位置 (line, column) やメッセージ (message) 内容も書く必要があります。
npm test で test/index-test.js を使ったテストが実行できます。
- テストケースには前述の options も指定できるので細かい部分までチェック可能です。
- 詳細は: https://github.com/textlint/textlint/tree/master/packages/textlint-tester#valid-object

作ったルールをローカルで実行する

npmに登録する前にローカル環境 textlint-demo で実行を確認します。

まず、作成したルール textlint-my-rule 配下において、npm run build でルールをビルドし textlint-my-rule/lib/ 配下にファイルが生成されたことを確認しました。
- treeで表示すると以下のような感じ。

├── README.md
├── lib
│   ├── index.js
│   └── index.js.map
...
├── package-lock.json
├── package.json
├── src
│   └── index.js
└── test
    └── index-test.js

textlint-demo ディレクトリに移動し、textlint-my-rule へのパスでインストールします。
- 同じ階層にあるなら npm install ../textlint-my-rule --save-dev
- 以下のようにsymbolic linkが貼られます。

%  ls -al ./node_modules/textlint-rule-my-rule
lrwxr-xr-x  1 name  staff  34  7 24 00:00 ./node_modules/textlint-rule-my-rule -> ../../textlint-rule-my-rule

参考: https://docs.npmjs.com/cli/v8/commands/npm-install

VS Codeでtextlintを実行する

毎回textlintコマンドを叩くのは大変なのでVS Codeの拡張機能 vscode-textlint をインストールしました。

これで追加したルールが適用されるかすぐ確認できるようになりました。

つづく

次回はnpmでの公開までやっていきたいです。

ちなみにこのブログはscrapboxで下書きした後markdownに変換し、textlint-demo 配下にファイルを置き、チェックして作成しました。

試しにいれてみたルールもあるのですが .textlintrc は以下の通りです。

{
  "filters": {},
  "rules": {
    "ja-no-mixed-period": true,
    "ja-hiragana-keishikimeishi": true,
    "no-doubled-conjunctive-particle-ga": true,
    "no-orthographic-variants": true,
    "max-ten": {
      "max": 3,
      "strict": false,
      "touten": "、",
      "kuten": "。"
    }
  }
}