Visual Studio CodeのEmmetでlang=”en”をlang=”ja”にする方法

最近はHTMLやJavaScriptのコードを書くときには、Visual Studio Codeというエディタを利用しています(自分の利用している環境は、Windowsのv1.6.1です)。

前はBracketsを利用していたのですが、Visual Studio Codeのほうが軽くて多機能な感じがするので、気に入っています。

そのVisual Studio Codeに標準でついているのが、Emmetという機能。短縮記法でHTMLを書くことができ、例えば、『ul>li*4』と入力してタブキーを押すと、下記のようなHTMLが出力されます。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

そんな中でも基本的なのは、『html:5』もしくは『!』(多分、こっちのほうがよく使う)を書いた後にタブキーを押して出力される、HTMLの基本的なテンプレート。簡単なサンプルページ的なものを作るときはまずこの記法を使うことが多いのですが、一つ問題があって、デフォルトでは下記のようにlang属性がenとなってしまっています。

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

これをjaにしたいと思って調べてみたら、snippets.jsonというファイルを編集したらいいということが分かりました(参考:Visual Studio Code for Windows、HTML ファイルで使う Emmet のスニペットを変更する – Browser)。ただ、ここに書いてあるフォルダが自分の環境には無く、いろいろ探してみるとVisual Studio Codeをインストールしたフォルダ内にありました。

C:\Program Files (x86)\Microsoft VS Code\resources\app\node_modules\emmet\lib\snippets.json

多分、32ビット環境なら、『Program Files (x86)』ではなく、『Proguram Files』フォルダの下にあると思います。

このファイルを編集すれば、lang=”en”から、lang=”ja”に変更できます。ただし、場合によってはこの場所にあるファイルは編集できなくなっていると思うので、ファイルを右クリックしてプロパティを選び、セキュリティからUsersの変更権限を与えて起きましょう(フルコントロールでもいいと思います)。

開くと、3行目に”lang”というキーに”en”という値が設定されています。予想できる通り、ここの”en”の値を”ja”にすれば、lang=”en”が、lang=”ja”に置き換わります(ついでにその下の”locale”の値も”en-US”から”ja-JP”にしといてもいいかもしれません)。

と、ここまで書いてVisual Studio Codeが更新を促してきたので更新したら、このファイルまで更新されちゃいました……(なので、lang=”en”に戻る)。

Emmetの機能ではないですが、Visual Studio Codeの機能として提供されているユーザー定義スニペットを用いて、追加しなきゃいけないのかもしれません(参考:Visual Studio Code for Mac ユーザー独自のスニペット定義(Emmet編) – Qiita

日本語環境だと、メニューの『ファイル』→『基本設定』→『ユーザースニペット」→HTMLと入力してエンターキーを押すことで、スニペットの設定ファイルが開きます。そこに全体を囲む波括弧({})の中に、下記のようにスニペットの設定を追加します。

    "html5": {
        "prefix": "html",
        "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>"
    }

こうすると、prefixの値に指定している『html』と入力した後にタブキーを押すと、lang属性がjaとなっているテンプレート文字列が出力されました(残念ながら、『!』ではダメでした)。

ただやっぱり、Visual Studio Codeを更新してもsnippets.jsonの内容を保持する方法があればそれが一番いいと思います。もし、やり方を知っているかたがいたら教えてください。

コメント

  1. 匿名 より:

    設定の”emmet.variables”:を {“lang” : “ja”},としてやればいいみたいです~

タイトルとURLをコピーしました