Visual Studio Code をはてなブログ向けにカスタムしたお話

Visual Studio Code Advent Calendar 2016 - Qiita の 15 日の記事（の予定）です

軽く自己紹介
なぜやろうとしたのか
- 探した結果、
はてなブログで使いやすくするためにしたこと
まとめ

軽く自己紹介

はじめまして、くぅといいます。
好きな技術は C# や Xamarin 等です。
まだまだ技術的に足りないところもありますが、頑張っています。

なぜやろうとしたのか

はてなブログ標準のブログエディタ（Markdown エディタ？）の機能に満足できなかったからです。そこで、代わりとなるブログエディタを探すことにしました。
以下の点を重視しました。

入力補完
Mac, Windows で動くこと
スニペット機能が使える
（出来たら）無料である

探した結果、

すごく使いやすい！、けどMacでしか動かない。。。
Mac,Windows 両方で動く！、けど標準なMarkdown にしか対応してなく、スニペット等が使えない。。。
などのアプリはいくつかありましたが、
` Visual Studio Code は僕の欲しいすべての機能を使える！ということで使い始めました。

はてなブログで使いやすくするためにしたこと

Visual Studio Code 標準での Markdown をサポートしていることについてしらべた

qiita.com qiita.com 以上の２つをを見ました。
ざっと Visual Studio Code での Markdown の使い方を紹介します。
1..md ファイルを開きます。
2.右上にあるアイコンをクリックして、左右で２つファイルを開けるようにします。
3.右側のウィンドウにマウスカーソルが来ている状態で CTRL + Shift + V を押して、Markdown のプレビューができるようにします。こんな感じです。標準ではこんな感じでしょうか。

インテリセンスを使ってみた

Visual studio Code には、インテリセンスという素晴らしい入力補完機能があります。下の画像は、新規でMarkdown のファイルを作ってふと、CTRL + Shift を押しただけですが、様々な入力候補が出てきます。いいですよね～

スニペットを追加した

ここからが、 Visual Studio Code の本領発揮です。はてなブログのMarkdown 用のスニペットを追加して、省力化しましょう。

#### スニペット機能とはここでは、説明のために、Microsoft のテクニカルエバンジェリストの戸倉彩さんのブログを引用します。

Visual Studio Codeの機能として使われているスニペットは、少しのコード入力をトリガーとして、よく使われるコードを自動的に呼び出して追加してくれる機能のことです。さまざまな言語に対してスニペット機能を使うことが可能です。
blogs.msdn.microsoft.com

キーボードへの入力が圧倒的に楽になりますね

次に、Markdown 用のスニペットを設定していきましょう！
1.ファイル>基本設定>ユーザースニペットを開きます。
http://i.imgur.com/UpYPiMI.pngi.imgur.com
2.どのスニペットにするかの選択ボックスが出てくるので、そこで Markdown を選択してください

3.markdown.json というファイルがでてくるので、そこに編集していきます。
4.すでにコメントアウトで書いてあるテキストを参考にすれば、ある程度は書き方がわかると思います。

 /*
     // Place your snippets for Markdown here. Each snippet is defined under a snippet name and has a prefix, body and 
     // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
     // $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
     // Example:
     "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
*/

僕の設定例公開

{
    "content": {
        // 見出しリストを作るときに使う
        "prefix": "content",
        "body": [
            "[:contents]"
        ],
        "description": "For HatenaBlog"
    },
    "injection": {
        // 注釈を作るときに使う
        "prefix": "injection",
        "body": [
            "((${1}))${}"
        ],
        "description": "For HatenaBlog"
    },
    "more": {
        // 続きを読むを作るときに使う
        "prefix": "more",
        "body": [
            "<!-- more -->"
        ],
        "description": "For HatenaBlog"
    },
    "wiki": {
        // Wikipedia へのリンクを作るときに使う
        "prefix": "wiki",
        "body": [
            "[wikipedia:${1}]"
        ],
        "description": "For HatenaBlog"
    },
    "google": {
        // Google への検索結果を作るときに使う
        "prefix": "google",
        "body": [
            "[google:${1}]"
        ],
        "description": "For HatenaBlog"
    },
    "embed": {
        // プレビュー付きのリンクを作るときに使う
        // tweet やいろいろに使える
        "prefix": "embed",
        "body": [
            "[${1}:embed:cite]"
        ],
        "description": "For HatenaBlog"
    },
    "title": {
        // タイトルだけ表示されるリンクを作りたいときに使う
        "prefix": "title",
        "body": [
            "[${1}:title]"
        ],
        "description": "For HatenaBlog"
    },
    "Image": {
        // 画像を張り付けたいときに使う
        "prefix": "Image",
        "body": [
            "[${1}:image=${1}]"
        ],
        "description": "For HatenaBlog"
    }   
}