VSCodeやCursorでブログを効率的に書くためのセットアップ集
Zennの執筆を始めるに当たり、自分のエディタの設定を見直してみました。
というわけで、この記事ではVSCodeやCursorでブログ記事を快適に書くために僕が導入している環境構築について説明します。
これから紹介する拡張機能や設定、AIエージェントを取り入れることで、効率的な記事執筆が可能になります。
Zenn始めましたエントリー↓
1. Markdown関連の拡張機能をインストール
Markdown All in One
Markdownを効率的に編集するための必須機能が揃った拡張機能です。
| ショートカット | 説明 |
|---|---|
Cmd/Ctrl+B |
選択テキストを太字（太字）に変換 |
Cmd/Ctrl+I |
選択テキストをイタリック（斜体）に変換 |
Ctrl+Shift+] |
見出しレベルを上げる |
Ctrl+Shift+[ |
見出しレベルを下げる |
Cmd/Ctrl+M |
数式の入力モードを切り替え |
インストールはこちら：
Markdownlint
Markdownのフォーマットをチェック・修正してくれる拡張機能です。一貫性のあるMarkdownファイルを作成する手助けをしてくれます。
特にテーブルのフォーマット整形や、見出しレベルの一貫性チェック、空白行の適切な配置などを自動で行ってくれるため、読みやすいドキュメントを作成できます。
インストールはこちら：
Markdown Table
Markdownのテーブルを作成・編集するときに便利な拡張機能です。Tabキーを押すと次のセルに移動でき、テーブルの作成が格段に効率化されます。
インストールはこちら：
2. 画像管理の効率化
記事作成で面倒なのが画像の管理です。画像を専用のディレクトリに保存してファイルパスコピーするのめっちゃめんどい…
以下の設定で、画像のペーストを自動化できます。
.vscode/settings.jsonを作成して、スクリーンショットをエディタ上にペーストしたときに画像をimagesディレクトリに保存するように設定します。
{
"markdown.copyFiles.destination": {
"*": "/images/${documentBaseName}/"
}
}
これで、スクリーンショットをエディタ上にペーストしたときに画像を自動的にimagesディレクトリに保存できるようになります。
3. 等幅フォントの設定
VSCodeのデフォルトのフォントは等幅フォントではないため、日本語と英数字が混在するテキストを美しく表示するために等幅フォントを指定するのがよきです。
フォントがデフォルトのままだと、テーブルのコンテンツに英数字と日本語が混じっていたときに綺麗にフォーマットされません。
等幅フォントを使わない場合。ガタガタ。
等幅フォントを使う場合。フォーマットが揃う。
PlemolJPの導入
PlemolJPは以下の特徴を持つ日本語プログラミングフォントです：
- テキストエディタ用に最適化された文字幅（半角1:全角2）
- 日本語と英数字の視認性の高さ
- 豊富なウェイトとスタイルのバリエーション
公式リポジトリとインストール方法はこちら：
フォント設定の手順
-
Cmd/Ctrl + ,で設定を開く - 検索バーに「font family」と入力
- 「Editor: Font Family」に
PlemolJPを設定
PlemolJPフォントが正しく設定された状態
4. AIエージェントを活用する
ブログ執筆を効率化する大きなメリットとして、各種AIエージェント（Github Copilot, Cursor等）を使えることが挙げられます。
特にCursorの自動補完は、日本語の文章を書くときにも非常に便利です。マジでオススメ。
文章を途中まで書くと自動的に補完してくれるため、文章作成が格段に速くなります。
また、Cursorのチャット・エージェント機能を使って、記事のアイデアを考えたり、記事の内容を検討したりすることもできます。
AIエージェントは各社が様々なツールを提供しているので、自分の既存のセットアップや予算に合わせて最適なものを選ぶのが良いかと思います。
おわりに
今回紹介したVSCodeのセットアップを行うことで、以下のような効果が期待できます：
- Markdownの編集効率が大幅に向上する
- 画像の管理が自動化され、記事作成の流れが中断されにくくなる
- 等幅フォントによって表や整形されたテキストが見やすくなる
- AIツールの活用でライティングの質と速度が向上する
これらの設定は一度行えば、その後のブログ執筆がずっと快適になります。特にGitHubと連携できるZennのようなプラットフォームでは、この環境を最大限に活かせるでしょう。
ぜひ皆さんも自分好みにカスタマイズして、快適なブログ執筆環境を構築してみてください。もし他にも「これは便利！」という拡張機能や設定があれば、コメントで教えていただけると嬉しいです。僕自身も常により良い執筆環境を模索しています。
また、この記事で紹介した設定で何か問題があった場合や、質問がある場合もお気軽にコメントください。
Discussion