これまで、このブログ記事を書く際は Markdown の整形を Prettier に頼っていました。これは全角文字と半角文字の間にスペースを入れるのに重宝していました。

しかし Prettier による整形の場合、絵文字を使う場合にもスペースが入ってしまい、少し不便に感じていました。

これはスペースが入ってしまうケース 😇

こうなってほしい🙂

これを防ぐためには<!-- prettier-ignore -->を書けばよいのですが、それも面倒ですしね･･･😅

<!-- prettier-ignore -->
prettier-ignore を使えば大丈夫ではある😓

というわけで、今回 Markdown のフォーマットを Prettier ではなく、textlint を使うように設定を見直してみました。

textlintの導入手順

まずは、.prettierignoreを使って Prettier による整形をオフにします。

*.md

続いて、textlint を追加します。

VSCode の拡張機能は vscode-textlint - Visual Studio Marketplace を使い、ワークスペースでのみ有効化します。

続いて、保存時のフォーマットの設定を.vscode/settings.jsonにて行います。

{
  "textlint.autoFixOnSave": true
}

次に、必要なパッケージを追加します。今回はスペースの管理のみ行いたかったので、以下のパッケージを導入することにしました。

$ yarn add -D textlint textlint-rule-preset-ja-spacing

パッケージが追加されたら初期化のためのコマンドを入力し、設定を追加します。

$ npx textlint --init
.textlintrc is created.

// .textlintrc
{
  "filters": {},
  "rules": {
    "preset-ja-spacing": {
      "ja-space-between-half-and-full-width": {
        "space": "always"
      }
    }
  }
}

この状態で Markdown を記述すると、自動保存が効きつつ、絵文字の入力もいい感じに動作することが確認できました👍

おわりに

今回は最低限の設定を行いましたが、場合によってはもっと設定を追加してあげても良いかもしれません。例えば、textlint-filter-rule-commentsは textlint を一時的に無視したい場合に便利でしょう。

textlint/textlint-filter-rule-comments: textlint filter rule that disables all rules between comments directive.

自分はこのブログ記事に関しては、文章の形式をガチガチに定めるのもちょっとなぁ、と思っているので、今後しばらくはとりあえずこの設定で記事を書いていく予定です。

参考記事

• textlint と VS Code で始める文章校正 - Qiita