prettierでMarkdownを整形すると日本語と英数字の間に半角スペースが挿入される問題

Prettierとは?

コードフォーマッター(ソースコードを整形してくれるツール)のこと.読み方はプリティア.コードフォーマッターは,コードをルールや慣例に基づき整形し,読みやすい(可読性の高い)コードにしてくれる.

可読性の低いコードは,バグの発生やメンテナンスのしづらさなど様々な弊害を生む.prettierVSCode拡張機能から簡単に導入でき,ショートカットキーから実行できる.prettier以外のフォーマッターも開発されていてESLintなども有名(lintとは構文チェックツールのこと).なぜ,ESLintではなく,prettireを使うかという話は,ここを参照.

半角スペース問題

  • prettierで日本語のMarkdownファイルを整形すると,日本語と英数字の間に半角スペースが挿入されてしまう.

たとえば上の文章は次のようになる.

  • prettier で日本語の Markdown ファイルを整形すると,日本語と英数字の間に半角スペースが挿入されてしまう.
- `prettier` で日本語の Markdown ファイルを整形すると,日本語と英数字の間に半角スペースが挿入されてしまう.

はじめはあまり気にならなかったが,一度気になると気になってしょうがない.手で消したり,一斉置換して消したりしていたが,手間を減らすためのフォーマッターで手間を増やすなんて意味がないと思い,なんとかならないかと調べてみた.

しかしこれがなかなか根深い問題らしい.これを一旦の解決に導いてくれたのが@tats-uさんのこの記事で,prettierプラグインを導入し,これを解決している.ここでは簡単にこの手順をまとめておきたい.

方針

  • Node Package Manager(npm)からprettier本体とプラグインを導入し,VSCodeと連携する.

初学者でprettierを使い始めた人は誤解していると思う(私もよくわかって使っていなかった)ので,整理しておく.

  • VScode拡張機能のPrettierとnpmで導入するPrettierは別物と思ったほうがいい.拡張機能はあくまで拡張機能で,PCにインストールされているPrettierをVScodeで使えるようにするのが本来の使い方(推奨)
  • しかし,VScode拡張機能のPrettierにはPrettier本体が同梱されていてるので,何も気にせず使えてしまう.(←便利かもしれないが誤解を生む原因)
  • VScodeが探すPrettierの優先順位は,
    • ローカルインストールされたPrettier
    • グローバルインストールされたPrettier(ただし,prettier.resolveGlobalModulesがTrueになっていること)
    • 拡張機能同梱のPrettier

前提

手順

npmの導入

homebrewから導入するのがいいだろうと思う.homebrewの導入はこちら

brew install node

インストールされているかの確認は,

npm --version
# output
7.21.1

proxy設定

この記事を参考にした. proxy下では,~/.npmrcに次のように記述.

strict-ssl=false
registry=http://registry.npmjs.org/
proxy=http://{{userid}}:{{password}}@{{server-address}}:{{port}}

もしくは,ターミナルから次のように書いてもいい.

npm config set strict-ssl false
npm config set registry "http://registry.npmjs.org/"
npm config set proxy "http://{{userid}}:{{password}}@{{server-address}}:{{port}}"
npm config set https-proxy "http://{{userid}}:{{password}}@{{server-address}}:{{port}}"

確認するにはnpm config list,削除するにはsetdeleteに置き換えるか,~/.npmrcの中身を消す.

prettierの導入

ローカルインストールが推奨されている.他のPCからgit cloneした際も使えるので,ローカルがいいだろうと思う.

  • ローカルインストール
# 作業中のディレクトリに移動した上で
# prettier本体の導入
npm install prettier -D --save-exact
# プラグインの導入
npm install --save-dev prettier-plugin-md-nocjsp
  • グローバルインストール
# prettier本体の導入
npm install -g prettier
# プラグインの導入
npm install -g prettier-plugin-md-nocjsp

インストールができているかどうか確認するには,

npm list
# output
prettier_test@1.0.0 {pwd}
├── prettier-plugin-md-nocjsp@1.2.0
└── prettier@2.4.1

ただし,{pwd}には現在のディレクトリが入る.

有効にするための設定

ホームディレクトリもしくは,カレントディレクトに次の内容で,.prettierrcを作成することで,prettier-plugin-md-nocjspを有効にする.

# *snip*
overrides:
- files:
    - "*.md"
    - README
  options:
    parser: markdown-nocjsp
- files:
    - "*.mdx"
  options:
    parser: mdx-nocjsp

json形式で書くなら次でも同じ

{
  "overrides": [
    {
      "files": ["*.md", "README"],
      "options": {
        "parser": "markdown-nocjsp"
      }
    },
    {
      "files": "*.mdx",
      "options": {
        "parser": "mdx-nocjsp"
      }
    }
  ]
}

ここまでくれば,ターミナルからMarkdownファイルのフォーマットができる.カレントディレクトリのtest.mdをフォーマットしたいなら,

# フォーマットして上書きする
npx prettier --write test.md
# フォーマットできているかチェックする
npx prettier --check test.md

実行

  • VSCode拡張機能からPrettierを導入
  • コマンドパレット(⌘+⇧+P)から"Format Document"を選択 or ショートカットキーから"Format Document"(⌘+⌥+F)で実行.

確かに日本語と英数字の間に半角スペースが入らない!

参考

Prettier 入門 ~ESLintとの違いを理解して併用する~ PrettierでMarkdownをフォーマットしたときの英語と日本語の間に入るスペースをどうにかする 和欧文字間(漢字仮名と英数字の間)に半角スペースが挿入されないようにするPrettier Markdownプラグインを作った [Node.js]大企業様で使われているproxy.pacよりProxyサーバを設定している環境で「npm install」を使う方法