VSCodeでemmetのHTMLテンプレート変更とenをjaにする！

# VSCodeのHTML使いの人々へ…
[@corone422](https://twitter.com/corone422)と申します。これを書いている現在、沖縄でプログラミングスクールを受講している感じです。

これにたどり着いた人は僕と同じく、emmetで出るHTMLのテンプレートに煩わしさを感じている…そうではないでしょうか？


# ユーザースニペットを編集する
VSCodeでHTMLを書く人で、このコードは普通に`!+Tab`で出てきますよね。

```html:index.html
<!DOCTYPE html>
<html lang="en">
<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>
```

この雛形の`lang="en"`を`lang="ja"`にしたいとか、`<link rel="stylesheet" type="text/css" href="./css/style.css">`は常に使うので追加したいといった人が少なからずいるのではないでしょうか。

見出しでも書きましたがスニペットの編集により追加可能です。自分が追加したいものを追加したいだけ追加できます。

### 1. まずjsonファイルを開く
Windowsなら`ファイル＞基本設定＞ユーザースニペット`を、Macなら`Code＞基本設定＞ユーザースニペット`を開きます。すると検索窓が開くので**html**と入力してください。すると**html.json**が候補に出てくるのでクリックして開きます。

ここまでは簡単ですね！

### 2. jsonファイルに書き足していこう
開かれたファイルはなにやら色々英語で書いてあるはずです。

```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"
	// }
}
```

これらはスニペットの書き方のルールです。

日本語の参考記事を置いておきますので、書き方など[**こちら**](https://dev.classmethod.jp/cloud/aws/how-to-add-your-own-code-snippets-of-visual-studio-code/)を参照してください。

ではここに書き足していきます。

ですが…見づらいですよね?
そのような方はコメントアウトされているところ全部消してもらっても問題ありません。

```json:html.json
{
}
```

ほら見やすい！

今度こそ書いていきましょう。
基本的には**emmet**のタグの出し方と同じですが、書くものはそもそも変わらないので、以下のコードをコピペしてもいいですし、自分でわかる方はカスタマイズして自分のテンプレートにしていきましょう。

**コピペしたら保存を忘れずに！**

```json:html.json
{
	"html5": {
		"prefix": "!",
		"body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n	<meta charset=\"UTF-8\">\n	<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n	<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n	<title>${1:Document}</title>\n	<link rel=\"stylesheet\" type=\"text/css\" href=\"${2:./css/style.css}\">\n</head>\n<body>\n	$0\n</body>\n</html>"
	}
}
```

`"prefix": "!"`は、Tabで出すときのトリガーとなる文字列の指定をしています。今回は`!`で出したいのでこのように記述します。

`body`は、`!+Tab`で出したときに自動で挿入する文字列の指定を行っています。JSの書き方でHTMLの構造を書き表しているようなものなのでややこしいですが、改行は`\n`、ダブルクォーテーションは`\"`、あとは半角スペースとTabの組み立てだけ意識しながら自分の欲しいものを追加していきましょう。

上記ユーザースニペットは以下のように挿入されます。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    
</body>
</html>
```

今回は私の欲しいものだけを挿入するようにしたので、先ほどの注意事項といっしょに見比べて自分の物も作ってみましょう！

# 最後に一つ
このように設定が完了しましたが、1つだけトラップが…

実は`!+Tab`をしても設定前の物が出てくることがあります。実はユーザースニペット、標準の物を書き換えているわけではなくカスタム設定を追加する機能なのです。ですので`!`を打ってすぐに`Tab`を押さずに、下に表示されるものから初めのうちの数回は自分で選択しなければいけません。

なのでちょっとだけ選びやすくしておきましょう。
Windowsの方は`ファイル＞基本設定＞設定`もしくは`Ctrl+,`、Macの方は`Code＞基本設定＞設定`もしくは`⌘+,`で設定を開いてください。

次に検索窓に`Snippet Suggestions`と入れてください。そうすると**Editor: Snippet Suggestions**と書かれた設定が出てきて、初期状態で**inline**になっていますので、これを`top`に変えましょう。

これによって、ユーザースニペットが**emmet**の一番上に表示されるようになりますので、初めてスニペットを使うときにマウスでクリックしてください。次からは、最後に使用されたものが`!+Tab`で自動で入力されます。

# 言語設定だけ変更したい人へ
余談なのですが、テンプレートはデフォルトのものでいいから、言語設定だけJapaneseにしたい！って方もいるでしょう。
ここで朗報です。
できます！
ちょっと上でお話しした、`基本設定＞設定`に進み、検索窓に`Variables`と入力してください。**Variables**の設定が出てくるので`settings.jsonで編集する`をクリックして、jsonファイルに以下のように追加してください。

```json:settings.json
{
    "emmet.variables": {
    "lang" : "ja"
    }
}
```

すでに何か書かれていた場合は、上記コードの一番上と一番下の`波括弧{}`を削除してコロンで区切って改行してからコピペしてね！
あと忘れずに上書き保存！

それでは良きコーディングライフを！