マークダウン文書に対する Prettier の自動フォーマットを範囲指定で無効にする

こんにちは、CX 事業本部 Delivery 部の若槻です。

VS Code でのマークダウン文書の編集で Prettier を使いたく、言語ごとの設定を有効化したら、特定の記述だけ自動フォーマットを無効化する必要性が生じたので、方法を調べてみました。

はじめに結論

次のように Prettier のチェックを無効化したい範囲を <!-- prettier-ignore-start --> と <!-- prettier-ignore-end --> のタグで囲むことで、範囲指定で Prettier のフォーマットを無効化できます。

<!-- prettier-ignore-start -->
フォーマットを無効化したい記述1
フォーマットを無効化したい記述2
フォーマットを無効化したい記述3
<!-- prettier-ignore-end -->

• Range Ignore - Ignoring Code · Prettier

※以降はほぼ蛇足ですので、興味のある方のみご覧ください。

背景

DevelopersIO の記事執筆を効率化する際の事情で、 VS Code 上で記事を編集する際にコードスニペットをバッククォートと[]で二重に囲むということをしています。

しかしマークダウンで Prettier の自動フォーマットを有効化すると、バッククォートの前後の行に空行が挿入されてしまいます。これを無効化したいです。

Prettier で特定の文字種の前後でのみフォーマットを無効化する設定は無いようでしたので、範囲指定での無効化タグを使うことにしました。

ちなみに無効化タグは消さずに記事を公開しても、公開画面ではちゃんと非表示となっています。

• 編集画面

• 公開画面

設定内容

以下に設定内容を書き残しておきますが、特に特別なことはしていません。Prettier の設定は特定プロジェクトでのみ有効化するようにしました。

Prettier インストール

Prettier を npm でインストールします。

npm install --save-dev --save-exact prettier

拡張機能のインストール

まだの場合は VS Code に Prettier の拡張機能をインストールします。これでファイル保存時の自動フォーマットを使用できるようになります。

code --install-extension esbenp.prettier-vscode

保存時の自動フォーマットの有効化

プロジェクト内に次のファイルを作成し、ファイル保存時の自動フォーマットをマークダウン形式のファイルに対して有効化します。

.vscode/settings.json

{
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
  }
}

BetterTouchTool でのショートカット設定

前述の背景の通り、コードスニペットを二重にしているため、記述が若干冗長となります。そこで下記ブログで紹介しているような BetterTouchTool でのショートカット設定を行い、コードスニペットの記述を効率化していました。

そして今回無効化タグを使うようにするにあたり、タグの追加も BetterTouchTool のショートカットで対応するうようにしました。修正後のスクリプトは次のようになります。

async (lang) => {
   return `<!-- prettier-ignore-start -->\n[${lang}]\n\`\`\`${lang}\n\n\`\`\`\n[/${lang}]\n<!-- prettier-ignore-end -->`
}

参考

以上