【Visual studio code】をマークダウンで使う簡単な設定とおすすめ拡張機能

読了時間: 約458

Visual studio codeのインストール

「Visual studio code」は多機能でしかも使いやすいので、開発者(プログラマー)が好んで使いますが、それゆえ初心者が使うには敷居が高く感じられるソフトです。
しかしブログを書くのにマークダウンで特化して使うのもありですね。
インストールしてもそのままでは使いにくいので、「Google Chrome」の様に拡張機能を追加して使いやすくしていくことが大切です。

Visual Studio Codeはソースコードエディタである。マイクロソフトにより開発され、Windows、Linux、macOS上で動作する。デバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持つ。カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できる。

引用:Visual Studio Code – Wikipedia
黄色のアンダーライン部分が少し分かりにくい説明ですが、気にせずまいりましょう笑
インストールはこちらからどうぞ

Visual Studio Codeのインストール

画像ではMacですが、Windows・Linuxの方は横のをクリックして選択して下さい。

メニューの日本語化

インストールした状態ではメニューが英語表記です。
先ずはメニューを日本語化しましょう。
手順を説明します。

「Japanese Language Pack for Visual Studio Code」のインストール

日本語化
  1. 左下のアイコンをクリックします。これが拡張機能用のアイコンです
  2. 検索窓です。検索したいワードを記入します(英語でjapanese)
  3. (上の画像にあるように、「Japanese Language Pack for Visual Studio Code」を選択)
  4. インストールボタンをクリックします
画像

これでメニューが日本語化されました。

ファイルの新規作成と保存

画像

Macでの説明になります。
(Windowsの場合は⌘➡️Ctrlに置き換えてください)
メニューバーから「ファイル➡️新規ファイル」もしくはショートカットキーで +Nを選択
ステータスバーの「プレーンテキスト」をクリックします。

画像 「Markdown」を選択 画像
文章を書きます。 保存する場合はメニューバーから「ファイル➡️保存」もしくはショートカットキーで +Sを選択 画像

これで文章が保存されました。 保存する場所は「デスクトップ」以外でも、ローカルで好きな場所を選んで下さい。

フォントの追加方法

①フォントの指定

設定ボタンをクリック

左下の 歯車アイコンをクリックします。

画像

「設定」をクリックし、検索窓に「font」と入力します。

フォント設定画面

フォントの間に空白が入るものは、シングルクォーテーション(‘)ではさみます。
例えばNoto Sans JPを指定する場合’Noto Sans JP’と記述します。

拡大したところ

①を拡大しています

MEMO
①で最後に「monospace」となっていますが、これは『等幅系フォント』を表します。
従ってこれを『ゴシック系フォント』にする場合は「sans-serif」に変更します。
注意
Noto Sans JPは「Google web fonts」です
別途私はダウンロードしています
自分のパソコンに入っているフォントを指定出来ます。(例ヒラギノ角ゴシック)
指定したいフォントを一番最初に記述して下さい。
【例】

"editor.fontFamily": "'Hiragino Kaku Gothic ProN', Menlo, Monaco, 'Courier New', sans-serif"
英語だけを表示できる「英語フォント」と、英語+日本語を表示できる「日本語フォント」があります。font-familyを書くときは、英語フォントは前に並べるようにしましょう。そうすることでアルファベットには英語フォントで、日本語の文字には日本語フォントが使われるようになります。

引用:font-familyの書き方まとめ:CSSでフォント種類を指定しよう
というわけで、ここでは「ヒラギノ角ゴシック」を一番前に持ってきていますが、英語にこだわりがある場合は「英語フォント」を最初に配置するようにして下さい。

お気に入りのフォントを入れるのに参考となるサイトがあります。

②大きさ

ここに数値を入れることで、フォントサイズを変えることが出来ます。

③フォントの太さ

太さを制御

メニューより好きな太さを選んで下さい。

プレビュー

プレビュー設定

検索窓に「Markdown」と入力
プレビューのフォントも同様に指定することが出来ます。

"markdown.preview.fontFamily": "'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif"

上のフォントで説明した時と同様に間に空白が入るフォントは、シングルクォーテーション(‘)ではさみます。
これは初期設定に「Noto Sans JP」を追加している画面です。
これでまずは日本語で使う環境が出来ました。

その他の設定

画像

設定箇所が多いので、特に気になるポイントだけを取り上げます。
例えばカッコを挿入した場合、「Auto Closing Brackets」を➡️「always」にすることで、(  ➡️ ()と自動的に入力補完をしてくれます。


それでは「Visual Studio Code」をより便利に使うために、「拡張機能」をインストールして行きましょう。