はじめに

こんにちは、SHIFTのITソリューション部に所属しているHoribeです。

2022年に「Markdown+VSCodeでブログを執筆する環境を整えてみた 」というブログを投稿しました。投稿から2年近くが経ち、当時使用していた技術も自分の知識も変化しました。

今回、新しくブログを書こうと思ったタイミングで執筆環境をアップデートしました。以前からの変更点や新たに追加した部分があったため、備忘録としてまとめようと思います。

以前からの変更点

settings.jsonをユーザー設定とワークスペース設定に分割

以前は全設定をユーザー設定に記述していましたが、役割別に分けるようにしました。具体的には、フォントサイズやテーマなどワークスペースに依存しない設定をユーザー設定に、特定言語に対する設定などワークスペースに依存する設定をワークスペース設定に分割しました。

なお、ユーザー設定はCtrl + , (⌘ + ,) で開くことができ、ワークスペース設定はワークスペースに.vscode/settings.jsonを作成して記述することで設定できます。

Prettierのフォーマット対象をMarkdownにのみ適用

以前はPrettierの設定時に全ファイル形式を対象にしていました。当然ながらPrettierのフォーマット対象にしたくないファイル形式もありますし、保存時に自動でフォーマットしてほしくないファイル形式も出てきます。

そこで、settings.jsonを以下のように修正しました。

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

これでMarkdownファイル（.md）に対してのみ、保存時にPrettierの自動フォーマットが走るようになります。

Prettier v.3.0.0の登場

以前の記事では、Prettierで日本語と英数字が混じった文章にフォーマットを走らせた際、英数字の前後に半角スペースが挿入されてしまう問題の対処法をまとめていました。

この問題ですが、2023年にリリースされたPrettierのv.3.0.0で解消されています。過去にもPrettierのGitHub Issuesでは議論されていましたが、ついに半角スペースを挿入しない方向で固まったようです。（詳しくはこちら をお読みください。）

prettier-plugin-md-nocjspというパッケージを導入することで対処していましたが、こちらは不要となりました。

新たに追加した点

ここからは、前項「以前からの変更点」を反映済みの執筆環境が完成されている前提で進めていきます。

Markdownlintの導入

Markdownlintとは、Markdownファイルが正しい構文で記述されているかをチェックするツールです。改行位置や見出しの階層が適切であるかをチェックすることができます。

導入するには、VSCodeの拡張機能にMarkdownlint をインストールします。

Markdownlintが使用するルール は執筆時点では50個あり、初期設定のままだとすべてが適用されます。

もし適用したくないルールがあれば、settings.jsonから設定をカスタマイズすることができます。

筆者はMD024 というルールを部分的に無効にしているため、例に挙げて紹介します。

MD024とは、見出し文言の重複を防ぐルールです。

例えば、以下のような見出しはMarkdownlintが検出して警告してくれます。

# 見出しA <- 重複するため警告

## 見出しA <- 重複するため警告

しかし、実際に文章を書く場合、意図して見出し文言を重複させたいこともあると思います。その場合、異なる親要素を持つ見出し同士は重複を許すsiblings_onlyオプションが存在します。以下が具体例です。

# 見出しA

## 見出しB

### ポイント <- 異なる親要素なので、重複が許可される

## 見出しC

### ポイント <- 異なる親要素なので、重複が許可される

具体的にはsettings.jsonに下記のように設定します。

{
  ...,
  "markdownlint.config": {
    "MD024": {
      "siblings_only": true
    }
  }
}

等幅フォントの導入

等幅フォントはモノスペースフォントとも呼ばれ、名前の通りすべての文字が同じ幅を持っているフォントのことを指します。（逆に、文字列の幅が異なるフォントのことをプロポーショナルフォントと呼びます。）

プログラムをコーディングする際によく使用されますが、コードはもちろん表やリストなどを使う技術ブログの執筆とも相性が良いと思います。

フォントを使用するには、OSにインストールした上でsettings.jsonに下記のように設定します。複数指定した場合は先に指定したものからフォントが割り当てられ、対応するフォントがなかった場合は次に指定したものから探します。これは、日本語と英語それぞれで指定したい場合などに便利です。

{
  ...,
  "editor.fontFamily": "{フォント名}"
}

日本語に対応したオープンソースの著名な等幅フォントをいくつか紹介します。紹介したフォント以外にも様々な等幅フォントがオープンソースで開発されているので、ぜひお気に入りのフォントを見つけてみてください。

• Source Han Code JP

• HackGen

• Cica

終わりに

今回の記事では、Markdown+VSCodeでブログを執筆する環境についてのアップデート内容を備忘録としてまとめました。文章を簡潔に構造化できるMarkdownは、ブログの執筆だけでなく議事録を取ったりメモを整理する場合などにも便利です。この記事を通して、Markdownに興味を持つ方が増えれば幸いです。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

PHOTO：UnsplashのJess Bailey