📃
markdownのコードフォーマッターにRemarkを使う方法
ご覧いただきありがとうございます。こやさんです。
Zenn の記事書くようになり、Markdown のコードフォーマッターをちゃんと考えようとなりました。
今回はコードフォーマッターの Remark の導入についてまとめます。
環境
PC：MacBook Pro 13-inch, 2020, Four Thunderbolt 3 ports
macOS：Ventura 13.5.1
Remark のインストール
remarkのインストールを行います。
このタイミングで他のパッケージも一緒にインストールします。
-
remark
- Markdownを解析、変換、文字列化するためのツールキット。
- プラグインシステムを持っており、そのおかげで非常に柔軟にMarkdownの変換や検証が可能です。
-
remark-frontmatter
- remarkのプラグイン。
- Markdown内のフロントマター（通常はYAMLやTOML形式で提供されるメタデータ）を解析するためのものです。
-
remark-preset-lint-consistent
- remark-lintのためのプリセット。
- Markdownファイル全体で一貫したスタイルを維持するためのルールセットを提供します。
-
remark-preset-lint-recommended
- remark-lintのためのプリセット。
- Markdownの書き方や構文に関する推奨されるルールセットを提供します。
npm install remark remark-frontmatter remark-preset-lint-consistent remark-preset-lint-recommended --save-dev
VSCode へ拡張機能
VSCodeの設定更新
VScodeの設定に以下を追加して、Remarkがmarkdownのデフォルトのフォーマッタとなるようにします。
"[markdown]": {
"editor.defaultFormatter": "unifiedjs.vscode-remark",
"editor.formatOnSave": true
}
Remarkの設定
Remarkで実際にどう言ったフォーマットをするのかを記載します。
{
"plugins": {
"remark-frontmatter": ["yaml"],
"remark-preset-lint-recommended": true,
"remark-preset-lint-consistent": true,
"remark-lint-heading-style": ["error", "atx"]
}
}
以上でmarkdownのフォーマッタの設定は完了となります！
Discussion