[Slidev] VSCode で Markdown が崩れる問題の解決方法

この記事が役立つかもしれない人

• VSCode で Slidev を使用している人
• Slidev を使っていてスライドの表示が変になって困っている人

状態

slides.md を保存した際などにページが崩れてしまいます。

1 枚目はまだ分かりにいですが、2 枚目は完全に崩れています。

正常な表示

原因

この問題はフォーマッター (例：Prettier など) が自動的に余計な改行や見出しの変更を行ってしまうために発生します。

フォーマッターは通常のコーディングでは非常に便利なものです。しかし今回は特殊な形式で記述される Markdown であるため、変更によって思い通りにスライドを作成することが困難になります。

なので今回は Slidev で快適にスライドを作成するために作業している Slidev プロジェクトでのみフォーマッターが効かないように設定を行います。

解決方法

この問題を解決するために settings.json を作成して、VSCode 上でフォーマッターを無効化します。

1. .vscode/settings.json を作成

Slidev の一般的なディレクトリ構成の場合

  .
+ ├── 📁 .vscode
+ │   └── 📄 settings.json
  ├── 📁 components
  │   └── 📄 Counter.vue
  ├── 📁 pages
  │   └── 📄 multiple-entries.md
  ├── 📁 snippets
  │   └── 📄 external.ts
  ├── 📄 .gitignore
  ├── 📄 .npmrc
  ├── 📄 README.md
  ├── 📄 netlify.toml
  ├── 📄 package.json
  ├── 📄 slides.md
  ├── 📄 vercel.json
  └── 📄 yarn.lock

2. フォーマッターを無効化する

settings.json に以下の内容を追加します。

settings.json

{
  "editor.formatOnPaste": false,
  "editor.formatOnSave": false,
  "editor.formatOnType": false
}

これにより Markdown ファイルの保存や編集時にフォーマッターが自動で動作しなくなり、意図した通りにスライドを作成することができるようになります。

設定の詳細について

項目	詳細
editor.formatOnType	入力後の行をフォーマットする
editor.formatOnSave	ファイルの保存時に書式を設定する
editor.formatOnPaste	ペーストされた内容を整形する

参考資料

---

この記事が役に立ったら ❤️ を頂けると嬉しいです！