[Sy] Visual Studio Code で Emmet の展開コードを変更する方法（html5のlang属性の例）

2018/02/12

Visual Studio Code ではデフォルトで Emmet が有効になっています。「html:5」で展開されるコードは lang属性が en になっているので、それを ja に変えてみます。

1. Preferences（設定）から User Snippets を選択

以下の場所に [User Snippets] というメニューがあるので、選択します。

するとエディタ上部に以下のような入力ボックスが表示されるので、「html」と入力して候補に表示される「HTML」を選択します。（画像は「ht」まで入力した段階です。この時点で絞られているので、ここで選択してOKです。）

Visual Studio Code - User Snippets (HTML)

エディタの編集エリアに、 html.json という以下のファイルが表示されます。

(html.json)

{
/*
	// 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, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
*/
}

2. html.json を編集して保存する

この html.json を次のように書き換えると・・・

(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>"
	}
}

HTMLファイルを編集している際に、「html:5」と入力して Tabキーを押すと、以下のコードが展開されます。

<!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 Snippets として html.json などの各ファイル形式に対応した JSONファイルに良く使うコードを登録しておくことで、効率よくコーディングできるようになります。