こんにちは。Kaneyasuです。

先日、VSCodeでマークダウンを書いていたら、このように勝手にスペースが入ってしまいました。

AS部の兼安です。

↓

AS 部の兼安です。

これがファイル全体に適用されると、結構な違和感を感じます。

これの原因はVSCodeにインストールしているPrettierによる意図しない整形でした。Prettierはコードを整形するためのツールで、これが悪さをしていた次第です。したがって、Prettierの無効化すればこの現象は起きなくなるのですが、整形を完全にOFFにするのは避けたいので、丁度良い設定を探してみました。

本記事の対象者

マークダウンをVSCodeで書いている方

Prettierとは？

Prettierはコードを整形するためのツールです。VSCodeの拡張機能としてインストールすることができます。

ESLintよりも強力な整形機能を持っており、フォーマッターとしてとても便利です。多くのファイル形式をサポートしており、マークダウンもサポートしています。ですが、2023年8月時点では、細かな設定ができず、ファイル形式ごとのON/OFFまでしかできないので少々困ります。

冒頭の現象は、半角文字と全角文字の間に一律でスペースを入れているようですが、これを制御する方法は見当たりませんでした。

Markdownlintとは？

Markdownlintは、マークダウン形式のファイルをLintするためのツールです。こちらもVSCodeの拡張機能としてインストールすることができます。

こちらは、細かく整形ルールが定義されており、ルール単位でON/OFFができます。また、ルールのカスタマイズも可能です。

{
    "MD013": false
}

ルールの内容はこちらで確認できます。

以上のように、マークダウンに関しては、Markdownlintの方が使いやすいと思います。

PrettierとMarkdownlintを併用する

本記事で紹介したかった方法は、PrettierとMarkdownlintを併用し、マークダウンは細かく設定したMarkdownlintを使用し、それ以外のファイル形式はPrettierを使用するというものです。settings.jsonに以下のように設定することで、実現できます。

{
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
  },
  "markdownlint.config": {
    "default": true, // すべてのルールを有効にする
    "MD018": false // 複数の空白を許可しないルールを無効にする
  }
}

言語ごとに、フォーマッターを指定し、マークダウンはMarkdownlintを使用するように設定しています。

"[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
}

次に、Markdownlintの設定を行います。markdownlint.configに設定を記述します。defaultをtrueにすることで、すべてのルールを有効にします。そして、いらないルールだけを無効化しています。もちろん、必要なルールだけを有効化することもできます。

"markdownlint.config": {
    "default": true, // すべてのルールを有効にする
    "MD018": false // 複数の空白を許可しないルールを無効にする
}

この例では、言語を指定せずにeditor.defaultFormatterを設定していないので、設定していない言語はフォーマッターが効きません。以下のようにすれば、全体的にデフォルトフォーマッターはPrettierとし、マークダウンだけはMarkdownlintをフォーマッターとすることができます。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
  },
  "markdownlint.config": {
    "default": true, // すべてのルールを有効にする
    "MD018": false // 複数の空白を許可しないルールを無効にする
  }
}

しかし、全体的なデフォルトフォーマッターを指定してまうと、冒頭のような意図せぬ整形が走るので、言語ごとにフォーマッターを指定するのが良いと思います。

VSCodeでPrettierとMarkdownlintを併用し、マークダウンが変な整形するのを防ぐ

本記事の対象者

Prettierとは？

Markdownlintとは？

PrettierとMarkdownlintを併用する