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

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

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

```html
<a href="#">
      <span class="point-nav__txt"
        >英語と日本語の間に入るスペースを<br
          class="only-sp"
        />入らないようにする</span
      >
</a>
```
（なんで">"の前で改行されるのかが謎なんですが...）
こんな感じでPrettierがキレイにフォーマットしてくれるのですが、
ブラウザで確認すると........

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

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

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

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

[PrettierでMarkdownをフォーマットしたときの英語と日本語の間に入るスペースをどうにかする](https://qiita.com/kumapo0313/items/92d1597da5f3752f6584)

こちらでは、最新の解決方法として「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 になっています。）
![スクリーンショット 2022-02-01 17.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/118c021f-d0f7-5c1d-20e9-4745388c7161.png)

##設定後
念のため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はインストールしていません) 。
> この設定方法が一番手軽で良いかなと思いました。
>
>```yaml:.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)