Visual Studio Code for Mac ユーザー独自のスニペット定義(Emmet編)

  • 18
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

2015/08/19 現在
Visual Studio Code (以下:vscode) はエディタです。

Emmet を標準で利用できます。
標準ではlang属性"en"になっています。
Sublime Textの様にlang属性のみを変更することができるのか?
マニュアルを見るとスニペットを定義できることが判明。
スニペット定義でMac用の解決策を記録します。

ただし、lang属性のみでなくHTMLテンプレートすべての記述になります。

バージョン
Code: 0.7.0
Mac OS X: 10.9.xx(10.10.xxがリリースされているが自分がインストしていないだけです。)

Visual Studio について

開発者向けに Microsoft が用意したツールです
Visual Studio」には以下3種類のツールがあります。

  • Visual Studio Code
  • Visual Studio Online
  • Visual Studio

それぞれの詳細はリンクから確認してください。

Emmetについて

Emmetという言葉を初めて聞いた方はドットインストールなどを参考にしてください。
なお、ドットインストールの動画中でプラグインと説明されているところがあります。Sublime Text, Atom などのエディタではプラグインとして導入し使われていることが多いのでこのような説明になっています。
vscodeの方針が分かりませんので今後どうなるかは不明です。

現状では、vscode では標準で利用できます。

Emmetの特徴

定義されたワードを、tabキーやCommand+Eのショートカットによりテンプレートを展開してくれるモノです。

HTMLの展開は!html:5とタイプの後、tabまたはCommand+EにてHTML5のテンプレートを展開します。
下記が標準のHTMLテンプレートになります。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

詳細は先程のドットインストールのリンクから参照ください。

vscodeのユーザー定義ルール

Emmetのlang="en"->lang="ja" にする方法準備

各言語毎にユーザー独自のスニペット定義(json形式)をUser Snippetsに記述します。

CodeからPreferences, User Snippetsを選択します。
Select Language for Snippetが表示されます。
HTMLを選択もしくはhtmlとタイプしても同様に下記のコードが表示されます。

{
/*
     // Place your snippets for HTML 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"
    }
*/
}

この様に表示されたら{}のなかに記述をしていきます。
/* */で囲われた中身は書き方のルールが記載されています。

記述ルールは、マニュアルを参照されるか、もしくは、こちらの日本語記事を参考にしてください。

bodyに展開されるコードやテキストを設定します。
このとき、コード、テキスト内に"ダブルクォーテーションを記述する場合は\"xxx\"この様に"の前に\を記述してエスケープしてください。

ユーザー定義 解決方法

HTML5の標準テンプレートを日本語設定にし再定義しました。
記述方法を2通り掲載しますので参考にしてください。

単に最初のコードはサンプルを含んだままhtmlの自前用に変更したテンプレートを記述。
次に、htmlテンプレートのみを記述したものです。

お好きな方を全選択、コピーしご自身のファイルにペーストしてください。

{
/*
     // Place your snippets for HTML 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"
    }
*/
    "html5": {
        "prefix": "html:5",
        "body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>${1:Document}</title>\n</head>\n<body>\n  $2\n</body>\n</html>"
    }
}

もしくは、下記のようにスッキリさせる方法でも利用できます。

{
    "html5": {
        "prefix": "html:5",
        "body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>${1:Document}</title>\n</head>\n<body>\n  $2\n</body>\n</html>"
    }
}

適用後のhtmlの展開テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

Googleの検索エンジン最適化ガイドに従い、インデントは2スペースにしました。
標準と同様にtabでtitleタグのDocumentbody直下へ移動できるようになっています。

使用するときの注意

vscode 右下の言語をPlain TextからHTMLに変更して操作を行ってください。
また、Emmetの別名で定義されている!マークではHTMLテンプレートを展開できません。

htmlと入力すると変換候補が現れます。
enterもしくはreturnでテンプレートが展開されます。

tabにより決められた場所への移動ができます。
移動モードから編集モードにする場合はenterにより移動モードが解除され編集ができます。

emmetの短縮コードを打ち込み、展開してみてください。

参考

windows版