Visual Studio CodeでEmmetのlang属性を変更する方法〜なぜか変更できなかったら試して!

HTML&CSS

Visual Studio CodeでEmmetを使って一発でHTML基本構文を書き出せますが、初期状態ではlang属性が「en」になっています。
この初期状態を「ja」にする方法はネットに多く出回っていますが、なぜか自分はうまくいかないと諦めていませんか?

実はうまくいっているのですが、落とし穴にはまっているだけです。
早速解説です。

スポンサーリンク

Emmetのlang属性を変更する方法ユーザースニペットから変更する方法

*Macでの例です。

  • メニューのPreferences(設定)からユーザースニペット(User Snippets)を選択
  • 入力ボックスが表示されたら、「html」と入力
  • html.jsonのエディタの編集エリアが出てきたら以下の内容になるようにコードを修正
{
	"html5": {
		"prefix": "html:5",
		"body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n  <title>${1:Document}</title>\n</head>\n<body>\n  $2\n</body>\n</html>"
	}
}

これでVisual Studio Codeを再起動すればlang属性がjaになるはずです。
新規ファイルを作成したらhtmlの拡張子で一旦保存します。
これでVSコードはこのファイルはHTML形式のファイルだと認識して、Emmetは「html:5」の入力でHTMLの基本構文を書き出してくれます。
そしてlang属性がjaになればOKです。

けれども、やっぱり「en」のままということもあると思います。

それでもlang属性が変わらない場合

原因:VS Codeのインテリセンス機能の問題があります。
例えば「html:5」をemmet入力すると最初の候補に「en」を書き出す構文があり、その次の候補に「ja」を書き出す構文が用意されていました。
つまり、一旦インテリセンス機能で候補を確認して別の候補を選択すると正しく書き出してくれます。

さらに html.json の編集内容で、「”prefix”: “html:5″」部分は、emmet記述内容になります。
つまりこの状態なら、新規ファイルに「html:5」と入力すると展開されて基本構文が書かれます。
ということは、ここの記述を「”prefix”: “!”」とすることで、「!」とするだけで展開することができます。
「!」で基本構文を展開することに慣れている方は試してください。

{
	"html5": {
		"prefix": "!",
		"body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n  <title>${1:Document}</title>\n</head>\n<body>\n  $2\n</body>\n</html>"
	}
}

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