WebDesigner's Memorandumウェブデザイナーの備忘録

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

Visual Studio CodeをMarkdownエディタとして使う

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

プレビューの表示方法

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

まずはVisual Studio Codeに「自分がいまMarkdownを書こう(あるいは見よう)としている」ことを教えてあげる必要があります。
ウインドウ右下の[プレーンテキスト]をクリックして「Markdown」を検索して言語設定をMarkdownに切り替えましょう。

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

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

プレビューアイコンをクリック

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

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

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

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

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

Visual Studio Codeは拡張機能を導入する事で、更に便利になります。
今回は自分がとりあえず入れたMarkdownに関するものをいくつか紹介します。

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)

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね