# Visual Studio CodeをMarkdownエディターとして使用する

URL: https://webrandum.net/visual-studio-code-markdown/
公開日: 2019-01-22
更新日: 2019-01-22
カテゴリー: コーディング
出典: Webrandum（著者: サイトウ マサカズ）

Visual Studio CodeをMarkdownエディターとして使用するために必要な設定についてまとめておきます。そもそもMarkdownが何か分からない方は、[以前記事](https://webrandum.net/markdown/)にした事があるのでそちらをご覧ください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2017/11/markdown.png)思考したり情報整理したい時はMarkdown記法で文章を書き出そう!!Webデザイナーの情...https://webrandum.net/markdown何か企画の情報をまとめたり、アイデアを出して行くときに僕はMarkdown記法という記述方法で情報の整理を行う場合がよくあります情報整理を行う際にメモ帳等で手書きという場合もありますが、箇条書きでどんどん情報の深掘りをしていく際はPCの方が自分には合っているからです。 そんな時にただただプレーンなテキストで文字を入力するのではなく、Markdown記法と言って文字列をHTMLに変換するための記述方法を利用する事で、見出しやリストを素早く表現して文章をまとめる事で、より綺麗に情報整理ができます。もちろん自分の中で目印...](https://webrandum.net/markdown)

## プレビューの表示方法

Visual Studio Codeでは、デフォルトでMarkdownをサポートしていて、プレビュー機能まであります。

まずはVisual Studio Codeに「自分がいまMarkdownを書こう（あるいは見よう）としている」ことを教えてあげる必要があります。

ウインドウ右下の［プレーンテキスト］をクリックして「Markdown」を検索して言語設定をMarkdownに切り替えましょう。

![](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_1-2-1024x600.png)

ちなみに、拡張子がmdのファイルを開くと自動的にMarkdownだと識別してくれます。

言語設定を切り替えたら、右上にある「虫眼鏡がウインドウに乗っかっているアイコン」をクリックするとプレビューが開きます。

この画面で、書いたMarkdownをプレビューしてくれます。

![プレビューアイコンをクリック](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_3-2.png)

プレビュー表示のショートカットキーは少々ややこしいですが、command + Kを押した後にVを押します。

あとはMarkdownを書けばいい感じにプレビューしてくれます。

![](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_2-3-1024x823.png)

```
<!-- 見出し -->
# 見出し1
## 見出し2
### 見出し3

<!-- リスト -->
* リスト
* リスト
- リスト
- リスト
1. リスト
2. リスト
<!-- リンク -->
[Google](https://www.google.com)
<!-- 装飾 -->
**強調表示** *イタリック* `コード`
> 引用文
```
.codeblock {
  color: #333;
}
```
<!-- テーブル -->
|テーブル|テーブル|
|:------|:-----|
|テーブルの内容 | テーブルの内容 |
```

## 拡張機能で更に便利にする

Visual Studio Codeは拡張機能を導入する事で、更に便利になります。

今回は自分がとりあえず入れたMarkdownに関するものをいくつか紹介します。

- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

- [Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image)

- [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)

- [テキスト校正くん](https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading)

### markdownlint

MarkdownのLint（構文チェックをしてくれる）拡張機能です。

不慣れな人はとりあえず入れておくとよいかもしれません。

ちなみに、チェックする内容は設定ファイルから変更できます。

### Markdown All in One

Markdownを利用するなら必ず入れておきたい拡張機能です。

- ショートカットキーでMarkdownのタグ入力

- 画像パスの入力補完

- mdファイルを開いた時に自動でプレビューを開く

ちなみに「mdファイルを開いた時に自動でプレビューを開く」のみの拡張機能で「Auto-Open Markdown Preview」というのもありますが、こちらを導入している場合は不要になります。

### Paste Image

クリップボードにコピーした画像をファイル内に貼り付けられる拡張機能です。

Markdownは画像の貼り付けが非常に面倒なのですが、この拡張機能を使うと画像をペーストするだけで済むようになります。

ちなみに貼り付ける画像は、デフォルトだとmdファイルと同一ディレクトリに保存されます。

### Markdown PDF

書いたMarkdownをPDFに変換してくれる拡張機能です。

とりあえず入れて、いつでもMarkdownをPDFに変換できるようにしておくとよいです。

### テキスト校正くん

文章の校正をしてくれる拡張機能です。

更新したタイミングで自動的に文章をチェックして、問題のある箇所をマーキング。エラー内容はエラーパネルに表示してくれます。

校正は下記のようなWeb製作者の人にとって嬉しいルールに沿って行ってくれます。

- 「ですます」調と「である」調の混在

- ら抜き言葉のチェック

- 用語の表記チェック（javascript → JavaScript）