VS Code（Visual Studio Code）で文章を書いてみる｜おすすめ拡張機能とマークダウン記法の超入門

※VS Codeの画面 – by iPhone（F1.4 1/100s）

※ただいまメルマガ読者を募集しています。
（ご興味があれば登録していただけるとうれしいです→登録はこちら）

パソコンで文章を書くツールの選択肢として、VS Code（Visual Studio Code）というアプリがあります。

実際、使うにあたっては、環境を整えるところからはじめました。

最初にやった設定と、つまずいたところなど、入門編にまとめてみました。

外出先でも書けるツール選び

パソコンで文章を書くツールには、いろいろ選択肢があります。WordやGoogleドキュメント、Notionなどなど。ブログの下書きは、Notionで書いています。

そんな中で選んだのが、VS Code（Visual Studio Code）というMicrosoftのアプリ（無料）です。

https://code.visualstudio.com

外出先でも書く仕事はやっておきたいので、Windowsだけでなく、持ち運び用のMacにもインストールしました。

実際のところは、HPのコラム執筆用に試そうとしたことはあったのですが、それっきりになっていました。

ただ、今回ちょっとしたきっかけがあって、再び触ってみることにしたのです。

慣れは必要そうですが、慣れれば使いやすいツールに化ける可能性はありそうです。

VS Codeは、もともとはプログラムを書く人向けのイメージがありますが、文章を書くのにも使えるツールです。文章は「マークダウン記法」という書き方で書きます。ClaudeでMDファイルを作ったことがあるなら、その「MD」＝マークダウンのことです。

それだけに、VS Codeで書くにあたっては、事前準備などの環境を整えておくことが大事です。

VS Codeの設定と拡張機能

WordPressのプラグインや、Google Chromeの拡張機能のように、VS Codeも、機能を足していくことができます。

このように、画面左側の拡張機能のアイコンから検索して、目的のものをインストールします。

わたしが、文章を書く用に入れた拡張機能でおすすめのものは次の3つです。

「Japanese Language Pack for Visual Studio Code」

インストールして、Macなら「Command⌘＋Shift ＋ P」の検索窓から「Configure Display Language」と入力して、「日本語」を選ぶと日本語にできます。

「Markdown All in One」

ショートカットキーが使えるようになる「Markdown All in One」もインストールしました。

たとえば、 目次をつくるには、「Control＋Command⌘＋P」で、

このような目次を一瞬で表示することができます。

また、文章の中を範囲を選択して、「Command⌘＋B」（WindowsはCtrl＋B）で太字に変換することもできます。

「Markdown Word Count」

文章の文字数を表示ことができます。1,000字、2,000字といった目安を見ながら書きたいので入れています。

文字をカウントできる拡張機能には、Word Counterなどもありましたが、うまくいかず…。日本語対応の「Markdown Word Count」を選びました。

ただ、デフォルトの設定で表示されるのは、語数だけ。句読点や記号（＠など）はカウントされませんので、この文字数も出すために、設定ファイルを書き換えます。

まず、「Command⌘＋Shift＋P」で検索窓を開いて、
「Preferences: Open User Settings (JSON)」をクリックで実行します。

開いた部分に、このようなコードを書いて保存します。

"markdown-word-count.statusBarCounts": {
    "words": false,
    "lines": false,
    "characters": true,
    "charactersWithSpaces": false
},
"markdown-word-count.selectionCount": true

すでに他の設定が書いてある場合は、前の行の末尾に、カンマ（,）を足します。

画面下のステータスバーの左下に、このように文字数（M↓ 334 Characters）と表示されます。334が文字数（句読点や記号もカウントされた字数）です。

ただ、見出しの記号「#」も含まれていますが、目安にはなるかと（ほかに設定があるのかもしれませんが）。

そして、もうひとつ、拡張機能ではないのですが、VS Code標準のショートカットキーで、プレビュー画面を横に並べて表示できます。「Command⌘＋K、続けてV」です。

エディタに文章を書きながら、実際の文章の見た目を確認しながら書くことができます。これは意外と便利です。

マークダウン記法で書く

マークダウンは、記号で見出しや太字などを表現していく書き方です。

たとえば、

＃ 本のタイトル

## はじめに

のように、記号を使って書いていきます。

よく使いそうな記号は、こういったものがあるかと。

・見出し1：#（半角シャープ）
・見出し2：##（半角シャープを2つ）
・箇条書きリスト：- または *
・連番書きリスト：数.（数字の後ろにピリオドをつける）
・リンクを貼る：［文字］(URL)
・画像を挿入：
・区切り線（横線）：—-（ハイフンを3つ）

この中で、わたしが最初につまずいたのは、「#」（見出し）でした。

「＃」のあとに、半角スペースを入れないと、見出しとして認識してくれないのがマークダウン記法。
私も最初は、スペースなしで書いていて、目次の作成が動きませんでした。
もし見出しが表示されない場合は、「半角スペース」で書いているかもチェックするようにしましょう。

もうひとつ補足です。

長い文章を書くと、行が画面の外に伸びてしまうことがあります。

ただ、これも「Option＋Z」（Windowsは、「Alt＋Z」）で、画面の幅で折り返して表示できます。

文章を書くときにも環境は大事です。使いやすさで選ぶとしても、慣れは必要かもしれません。
その「慣れ」が楽しめそうなら、使いやすさに変化する可能性はあるかと。

というところで、試してみるのもおすすめです。

■編集後記
昨日は息子の送迎のあとはHPコラム執筆、打ち合わせ
Kindle執筆など
寒暖差が出てきたので外出するときは服装がむずかしい季節です

■昨日の1日1新
・VS CodeでKindle本執筆

■息子（12歳）
新幹線に再びハマっています
夢も見たそうで
（パパとママが新幹線にひかれて飛んで行ったという内容…）
こわがりなのか、どうなのか、こわがるポイントがちょっと違います
（きのうの給食 658kcal：ごはん、ピリ辛みそしる、とうふのうまに、はるさめサラダ）