PrettierでMarkdownをフォーマットした時、英語と日本語の間に勝手にスペース入る問題を解決する

問題点

VSCodeの拡張機能「Prettier-Code formatter」を使うと、英語（htmlタグなど）と日本語の間に半角スペースが入ることがあります。
例えば以下のように、
1行に書いたコードが長いと、勝手に改行されます。

<a href="#">
  <span class="point-nav__txt">英語と日本語の間に入るスペースを<br class="only-sp">入らないようにする</span>
</a>

↓

<a href="#">
      <span class="point-nav__txt"
        >英語と日本語の間に入るスペースを<br
          class="only-sp"
        />入らないようにする</span
      >
</a>

（なんで">"の前で改行されるのかが謎なんですが...）
こんな感じでPrettierがキレイにフォーマットしてくれるのですが、
ブラウザで確認すると........

英語と日本語の間に入るスペースを 入らないようにする

と改行タグ前後に、変な空白ができることがあります。
「コードの中にゴミ(空白)が入っちゃってるのかなぁ」と思い、
削除する等など、あれこれ試しましたが効果なし...

前々からこの現象には困っていたのですが、
クライアントからの修正依頼もあり、重い腰を上げて調べることにしました。

先人の知恵をお借りする

調べを進めていると、
どなたかお優しい方が、対処法をご紹介してくださっているじゃないですか！！！
結構詳細に記載されているので、とても参考になりました！！！

PrettierでMarkdownをフォーマットしたときの英語と日本語の間に入るスペースをどうにかする

こちらでは、最新の解決方法として「prettier-plugin-md-nocjsp」をローカルインストール・グローバルインストールする方法をご紹介しています。

こちらの記事の更新日が2021年04月05日なのと、
githubにissueもあがっている等など、
「将来改善されるかも？」的な話を記載されていたので、

「もしや、既にVSCodeの拡張機能の方が更新されているかも？！」

と思い、設定し直したら...
スペースが無くなりました！！！

VSCodeの拡張機能の設定（※2022年2月1日）

動作環境

• macOS Big Sur 11.6
• VS Code 1.49.0
• Prettier - Code formatter 5.8.0

設定内容

1.　VSCodeの拡張機能をクリック
2.「Prettier-Code formatter」を探し、右下の歯車のところをクリック。
　 するとメニューが出てくるので、一番下の「拡張機能の設定」をクリック。
3. Rosolve Global Modules を true にする。
　（デフォルトでは false になっています。）

設定後

念のためVSCodeを再起動。
問題箇所には、スペースが残っているので、スペースを消去します。
そして保存すると、Prettierがフォーマットしてくれます。
ブラウザチェックすると、直っていました！！！

追記(2022.02.07) Windows10ではうまく動作しない

参考記事の執筆者 @kumapo0313 様からコメントいただきました！

ちなみに私の環境（win10）でためしたところ
Rosolve Global Modules を True にするとPrettierでフォーマットできなくなりました。
どうやらVScodeのPrettier拡張機能の問題のようです。

https://qiita.com/kumapo0313/items/92d1597da5f3752f6584?utm_campaign=email&utm_content=link&utm_medium=email&utm_source=public_mention#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

私の環境はmacOS Big Sur 11.6 で、問題なく動作しています。
Windows10ユーザーの方は注意してください。

追記(2022.02.10)Macでもうまく動作がしない場合

@u3xbf8i9 さんから以下のご報告をいただきました。
もしうまくいかない方は、以下も試してみてください。

macOS Big Sur 11.2を使用しています。
@LifescrewDesign さんのコメント・記事を参考にグローバルインストールと設定をしましたが動きませんでした。
ですが.prettierrcを以下のようにしたらうまくいきました。
Rosolve Global Modulesのチェックはなしで、prettier-plugin-md-nocjspをグローバルインストールしています (Prettierはインストールしていません) 。
この設定方法が一番手軽で良いかなと思いました。

.prettierrc

snip

overrides:

• files:
  • "*.md"
  • README
    options:
    parser: markdown-nocjsp
    plugins:
    • "./.config/yarn/global/node_modules/prettier-plugin-md-nocjsp"
• files:
  • "*.mdx"
    options:
    parser: mdx-nocjsp
    plugins:
    • "./.config/yarn/global/node_modules/prettier-plugin-md-nocjsp"

> 
> https://qiita.com/kumapo0313/items/92d1597da5f3752f6584#comment-e328de87992dbb82c9a1

## 後書き
この半角スペース問題は結構根深いようです。半角スペースが入るように勝手に変更されてたとは...
↓
[和欧文字間（漢字仮名と英数字の間）に半角スペースが挿入されないようにするPrettier Markdownプラグインを作った](https://qiita.com/tats-u/items/bcbfe2bb4e71bf0a2b87)

今後アップデートで変更されるかもしれないので、注視していこうと思います。

## 参考

- [PrettierでMarkdownをフォーマットしたときの英語と日本語の間に入るスペースをどうにかする](https://qiita.com/kumapo0313/items/92d1597da5f3752f6584)
- [和欧文字間（漢字仮名と英数字の間）に半角スペースが挿入されないようにするPrettier Markdownプラグインを作った](https://qiita.com/tats-u/items/bcbfe2bb4e71bf0a2b87)