prettierでMarkdownを整形すると日本語と英数字の間に半角スペースが挿入される問題
Prettierとは?
コードフォーマッター(ソースコードを整形してくれるツール)のこと.読み方はプリティア.コードフォーマッターは,コードをルールや慣例に基づき整形し,読みやすい(可読性の高い)コードにしてくれる.
可読性の低いコードは,バグの発生やメンテナンスのしづらさなど様々な弊害を生む.prettier
はVSCode
の拡張機能から簡単に導入でき,ショートカットキーから実行できる.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
,削除するにはset
をdelete
に置き換えるか,~/.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」を使う方法