torihazi ロゴtorihazi.dev

MDX を 書く上でmustな拡張機能や設定

Cursorに何も入れずに「.mdx」ファイルを開くと

拡張機能の設定画面

txtファイル開いたように、補完も効かない、コンポーネントなどが色ついてみやすくもならない、、、
となってとにかく書きづらい、見づらいのストレスづくしです 😩

これを少しでも楽にして、
もっと楽しくブログ生活をEnjoyするために色々やっていこうというわけです。

とりあえず調べてみた - シンタックスハイライト編

個人的にまず「編集体験をよくしたい」ので、そこを第一目標にしていく

何ができたら嬉しいか、

とかですかね。

色々書いてみたものの、そもそも自分自身がMDXファイル書くことに慣れていないので

どういう辛みがあるのかがまだわかっていないかもしれない。

とにかくこの真っ白な文字しか表示しない画面とはおさらばしたい。

ということで色々Perplexityに聞いて調べてみると、良さげなものがありました。

それが、MDX tfor Visual Studio Code

とにかく入れてみる。

すると、、、

おーー

シンタックスハイライトつきましたね👏

あとは何だろう。自動補完とかは Cursorの方でやってくれそう。

コードジャンプとか？

でもまだコンポーネント使って色々やりたいこととかもないしなー。

と思ったが、改行で行変えたりとか箇条書きで改行したら箇条書きが継続したりするようにしたいな。

そのやり方を調べよう。これも拡張機能かな？

まずは改行で行変えたら、view側でも改行されているようにしたい。

とりあえず調べてみた - 改行編

まずは改行で行変えたら、view側でも改行されているようにしたい。

どういうことかというと、エディタ上で改行したら当然文字列も改行するのだが、 実際のviewだとその改行が反映されずに1行になってしまう現象のこと。

現在、上の文章はEditor上では改行されているのだが、view上では改行されていない。

どういうことかというと、エディタ上で改行したら当然文字列も改行するのだが、
実際のviewだとその改行が反映されずに1行になってしまう現象のこと。

ただ、2行改行すると反映されるようになるな。

どういうことかというとこういうこと。

ただ、2行改行すると反映されるようになるな。

どういうことかというとこういうこと。

なるほど、そういえば確かQiitaとかもこのような仕様だったはず。

これはそういうものとして許容しておく。tipsという感じかな。

何かしらのレンダリングの仕組みなんかな？

さて次だ。

とりあえず調べてみた - 箇条書き編

まずは箇条書きで改行したら箇条書きが継続したりするようにしたい。

どういうことかというと、エディタ上で箇条書きを書いたら当然文字列も箇条書きになるのだが、 文末まで行って、改行した時に次行に箇条書きが継続しない現象のこと。

githubのPR description書いているときは自動で反映されるので基本ノンストレスなのだが、

今書いていると、次行にも箇条書きが継続せずに、

いちいち「-」を入力しないといけないからストレス

これもなんとかならないのかな。拡張機能系な気がするなー。

これも拡張機能っぽい。

それがMarkdown All in One

これを入れてみる。

が特に変わらないので再起動してみる

が、Enter押しても自動で箇条書き継続はしていない。

ただ、mdファイルで同じようなことをすると無事に行った。

ということは mdxファイルだとうまく機能していないっぽい。

perplexityに聞いてみる。

どうも拡張機能自身がMDX をmarkdownとして扱っていないそう。

やることは関連付けだそうなので以下手法で良いらしい。

  1. コマンドパレット開く
  2. settingsと入力して、Open VSCode Settings (JSON)を選択
  3. ワークスペースを選択
  4. Files: Associationsに以下画像のものを追加。
拡張機能の設定画面

と入力してみたら。。。。

おーーー、確かに機能したー

箇条書きが自動継続されるし、良い感じ。

だがしかし。。。

代償として MDXで機能していたシンタックスハイライトが。

入れた瞬間、冒頭に書いていた import文とか、export const とかのコードについて

軒並み、シンタックスハイライトが死んだ。

これも調べてみると、このやり方はただ単に

mdxをmarkdownとして認識させただけらしい。

んーあちらが立てばこちらがたたずという感じ。

これだと意味ないなー。

まぁ最初から完璧目指しても意味ないし、一旦これで良いか。

まとめ

この記事を書くうえでできるようになったこと、わかったことは以下だった。

とにかく最初からcompleteは不可能なので、おいおいってことで。