自宅で学べるオンラインのプログラミングスクール TechAcademy
HTML/CSSコーディングを省略記法で効率的に行えるEmmet。
Emmetは、テキストエディタ「VS Code」でも使うことができます。
VS Code Emmet
VS Codeでは、Emmet記法が使えます。
VS Code Emmet
- id：
# - class：
. - タグを表すための
<と>は不要 - 入れ子にする場合：
A>Bのように>を使う - 展開した時に連番にする：
$ - 属性を表すとき：
[属性名=値]値に"は不要
VS Code Emmetを使う例
html5の雛形
html:5 または ! と入力し return または tab を押すと、
html:5
次のように展開されます。
<!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>展開される時の言語 <html lang="en"> ではなく<html lang="ja">にするには、settings.jsonファイルを編集します。
「基本設定」>「設定（ショートカットキー：command + ,）」から「emmet」で検索し、「settings.jsonで編集」を開きます。
以下を追記し、保存します。
{// emmetの言語設定を日本語に
"emmet.variables": {"lang" : "ja"},}
