👌

PrettierのMarkDown日本語問題が解決してた

2023/05/02に公開

VS Code

ESLint

Prettier

tech

PrettierのMarkDown日本語問題について

Prettierには「日本語のMarkdownファイルを整形すると不要な半角が挿入されてしまう」という問題があり、以前調べたことがありました。

大体同じ問題に遭遇している人がいて、記事も多数出ていました。

などなど

そしてこの問題に対してやり取りされているIssueにたどり着いて、長い間問題が放置されていることから一旦諦める、というのが前回でした。

Issueがクローズされていた

このIssueがいつの間にかクローズされていました。Prettier v3 から解決されるようです。

P.S. (2022-12-11)
This patch is enabled in Prettier 3.0.0-alpha.3 or later.

対応してくれていたエンジニアの方々に感謝🙏

コマンドで使ってみる

3.0.0-alpha.3 以降で実装されるとのことなので、早速使ってみます。

npm install prettier@3.0.0-alpha.6 -D
npx prettier --write README.md

変なスペースが入らなくなっていることが確認できました！

VS Codeで使ってみる

VS CodeのPrettierプラグインを使ってみます。

今年(2023年)の4月にPrettierプラグインのv9.12.0がリリースされいて、Version 3がサポートされたようです。

Prettier Version 3

Prettier's preview version 3 is supported as of version 9.12.0. It is not included in the extension by default, but can be used by installing locally in your project. Version 10.0.0 of this extension will include prettier 3.0.0 after it is out of preview. To try version 3 now run the following in your project:

npm i prettier@3.0.0-alpha.6 -D

ということで試してみたのですが、私の環境（Windows）ではエラーが出てしまいました。。。
粘ったのですが解消できず。うーん。

実行環境

OS：Windows 11 Home 22H2
VS Code：バージョン: 1.77.3 (user setup)
Node.js：v18.16.0

エラー内容

["ERROR" - 18:57:48] Error handling text editor change
["ERROR" - 18:57:48] Invalid host defined options
TypeError: Invalid host defined options
    at Object.<anonymous> (c:\Users\user\Desktop\work\App\zenn\node_modules\prettier\index.cjs:647:23)
    at Module.u._compile (c:\Users\user\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:1271)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1220:10)
    at Module.load (node:internal/modules/cjs/loader:1035:32)
    at Module._load (node:internal/modules/cjs/loader:876:12)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
    at Function.m._load (c:\Users\user\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:124:14199)
    at Function.h._load (c:\Users\user\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:119:11871)
    at Function.I._load (c:\Users\user\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:119:11264)
    at Module.require (node:internal/modules/cjs/loader:1059:19)
    at Module.require (c:\Users\user\.vscode\extensions\github.copilot-1.78.9758\dist\extension.js:8:365152)
    at t.ModuleResolver.g (c:\Users\user\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:4:647)
    at t.ModuleResolver.loadNodeModule (c:\Users\user\.vscode\extensions\esbenp.prettier-vscode-9.12.0\dist\extension.js:1:6406)
    at t.ModuleResolver.getPrettierInstance (c:\Users\user\.vscode\extensions\esbenp.prettier-vscode-9.12.0\dist\extension.js:1:4086)
    at t.default.handleActiveTextEditorChanged (c:\Users\user\.vscode\extensions\esbenp.prettier-vscode-9.12.0\dist\extension.js:1:9843)
    at t.default.handleActiveTextEditorChangedSync (c:\Users\user\.vscode\extensions\esbenp.prettier-vscode-9.12.0\dist\extension.js:1:9445)
    at t.default.registerDisposables (c:\Users\user\.vscode\extensions\esbenp.prettier-vscode-9.12.0\dist\extension.js:1:12288)
    at c:\Users\user\.vscode\extensions\esbenp.prettier-vscode-9.12.0\dist\extension.js:1:77862
["INFO" - 18:58:04] Formatting file:///c%3A/Users/user/Desktop/work/App/zenn/articles/9962f029ad50fc.md
["INFO" - 18:58:04] Using ignore file (if present) at c:\Users\user\Desktop\work\App\zenn\.prettierignore

代わりに

仕方ないので、ちょっと使いにくいですが、npm scriptでフォーマットできるようにすることにしました。

package.json

{
  "scripts": {
    "format": "prettier --write %npm_config_path%"
  }
}

npm run format --path=./README.md

無事にフォーマットされました！

私の環境でも使えるようになるよう、正式なリリースを待ちます。

GitHubで編集を提案