Visual Studio Codeで Emmet を使いやすく

Tabでコード補完を展開させる

VSCode1.27を使っていますが、Emmetがデフォルトで入っていて便利。ただしこのへんのバージョンは提案型といってHTMLタグなどを書いていくと勝手に候補がずらずらっと展開される方式。 Atomと同じように文字のEemmet省略記法をTabキーでも展開させたいので、設定をいじることにした。

画面左下の歯車アイコンから、[Settings] > [Extentions] のメニューを展開。
[Emmet] を選ぶと右側にEmmetの設定が出てくる。
「Trigger Expansion On Tab」の項目に、"When enabled, Emmet abbreviations are expanded when pressing TAB." (有効にすると、TABキーを押したときにEemmet省略記法が展開されます)とあるのでチェックを入れる。

これで、省略記法がTabキーでも展開される。

HTML5のテンプレートで lang="ja"にしたい

Emmetは ! とか html:5 と書いてEnterするだけでHTML5形式のスニペットがずらっと展開されて便利。ただ、デフォルトでは<html lang="en">になっている。これを<html lang="ja">にしたい。

画面左下の歯車アイコンから、[Settings] > [Extentions] のメニューを展開。
[Emmet] を選んで、出てきた設定項目の一番下 [Variables] にある Edit in settings.json のリンクをクリック。
画面が左右２つのペインに分かれて、左が読み取りオンリーのデフォルト設定、右がカスタマイズ項目。
右のペインはさらに、USER SETTINGS と WORKSPACE SETTINGS の２つのタブに分かれている。

USER SETTINGS が名前のとおりカスタマイズするユーザー設定でデフォルト設定を上書き変更する部分。 WORKSPACE SETTINGS は、特定のプロジェクトで使う設定を記述する場所らしいが、ユーザー設定を上書きできるようだ。

ここではとりあえずWORKSPACE SETTINGSで使ってみたが、デフォルトでは何も書かれていない空のJSONである。その WORKSPACE SETTINGS のJSONを下記のように修正。

{
    "emmet.variables": {
        "lang": "ja",
        "locale": "ja-JP",
        "charset": "UTF-8",
        "indentation": "\t",
        "newline": "\n"
    }
}

編集後タブを閉じようとすると保存するかどうか聞いてくるのでSave。

これでHTML5のスニペットは以下のようになる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

USER SETTINGSでも同じように記述すれば結果は同じだったので、カスタマイズしたい目的によって使い分けるとよいようだ。実際WORKSPACE SETTINGSでしばらく設定し使ってみたあと、lang="en"なHTMLを書きそうにないので、USER SETTINGSに移して設定してみたが、問題はない。

結果的に個人的にカスタマイズした他の設定（フォントサイズなど）も合わせて、USER SETTINGSは次のような感じになった。

{
    "editor.fontSize": 18,
    "terminal.integrated.fontSize": 18,
    "markdown-preview-enhanced.mathRenderingOption": "MathJax",
    "emmet.triggerExpansionOnTab": true,
    "emmet.variables": { 
        "lang": "ja",
        "locale": "ja-JP",
        "charset": "UTF-8",
        "indentation": "\t",
        "newline": "\n"    
    }
}

Tabでコード補完の項目で設定した内容もここに表れているのがわかる（"emmet.triggerExpansionOnTab": trueの部分）。

【参考URL】 http://128txt.blogspot.com/2012/12/sublime-text-2-emmet-html.html ただしここのは、Sublime Text 2での設定。VSCodeでどこをいじるかは、若干試行錯誤しました。