Syntax Error.

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


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

1. Preferences(設定)から User Snippets を選択

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

Visual Studio Code - User Snippets


Visual Studio Code - User Snippets (HTML)

エディタの編集エリアに、 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": [
		"description": "Log output to console"

2. 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">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">


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