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）
