Markdownを書くときはPrettierを窓から投げ捨てろ
まえがき
当記事ではマークダウンファイルにおける、Prettierのフォーマットに関する既存の問題に対して論じます。
なお、当記事の仮想読者層は「マークダウンの行末には半角スペースを二個入れたい方」となっています。
行末に空白がなくとも改行が行われる記事投稿サイトをメインで利用している方等に対するものではないことに留意ください。
要約
Use it.
前提環境
以下は筆者の環境です。
| kind env | env name | version |
|---|---|---|
| Host OS | Windows | 10 |
| Guest OS | Ubuntu | 22.04 LTS |
| Virtualizer | WSL | 2 |
| Editor | VSCode | 1.75.1 |
| Shell | bash | 5.0.17(1)-release |
Issue
mdファイルにおいて、テキスト行末の空白が削除される。
なお、筆者の環境でPrettierを無効化したときは、上記の状態にはならない。
試した対処
EditorConfig
root=true
[*]
indent_style=space
indent_size=2
end_of_line=lf
charset=utf-8
trim_trailing_whitespace=true
[*.md]
trim_trailing_whitespace=false
上記の設定をしても、Prettierは行末のスペースを削除します。
なお、そのときのログは以下に記載します。
VSCodeの設定
{
"[markdown]": {
"editor.wordWrap": "on",
"files.trimTrailingWhitespace": false,
"editor.trimAutoWhitespace": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
}
上記の設定をしても、Prettierは行末のスペースを削除します。
原因と思われる振る舞い
上記のコメントによると、Prettierはマークダウンに対して行末の空白を削除する振る舞いをするようでした。
これは設定ファイルでもアクセスすることができません。
解決方法
筆者はただLintのためだけにMarkdownlintを導入していたのですが、このVSCodeの拡張機能はFormatもできることを最近知りました。
そこで利用してみたところ、全く問題なく動作しましたので、これを採用しました。
補足
その他のMarkdownのFormatterとしてRemarkがあるかと思いますが、そちらはzenn用の記事のメタデータを記載する部分を崩すようなフォーマットを掛けてしまうため、採用に至りませんでした。
あとがき
MarkdownのFormatterとしてはPrettierはまだ発展途上のようです。もしかするとプラグインでの解決もできたかもしれませんが、今回は見送りまして、他の拡張機能による簡単な解決法を採択しました。
ここで留意したいのは、VSCodeの機能としても末尾スペースの削除はありますし、Editorconfigはローカルにbinがないと動かないなど分かりにくい仕様があります。そのため問題を特定するのは難しく、Prettierの問題をプラグインで解決したとしても望む動作にはならない可能性があります。
場合によってはモンキーパッチが必要になるときもありますので、シンプルな解決方法が採れるならばそれにこしたことはないというのが筆者の考えです。
Discussion