VScodeの「Emmet」が鬼早い

coding

2020.01.172020.01.18

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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

はい。

学び始めたばかりの自分は毎回毎回「これも修行ぞ！」と思って入力しておりましたさ。

んでソラで入力できないと「まだまだ甘い！」とか無意味に自分を叱っておりました。

Emmetとは？
1. Emmetの概要
2. VScodeには標準装備
補足

Emmetとは？

Emmetの概要

Emmet（旧：Zen Coding）は既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグインである。 2008年にVadim Makeevが開発を始め^[1]、Sergey Chikuyonokと利用者によりMIT Licenseのオープンソースとして継続して開発されている^[2]。多くの著名なエディタに実装されているが、特定のソフトウェアに特化して開発されておらず、どのテキストエディタにも偏向していない^[3]。
Wikipediaより引用

うーんどうもコーディング関連の記事は小難しくていけませんね。もっと口語体で書いてくれ…

要はプラグインの一種で、毎度毎度入力すると面倒な同じ文句をパパッと入力できるようにしてくれる便利機能ということか。

VScodeには標準装備

我らがVScodeには嬉しいことに標準で搭載済み！ありがてぇ！

白紙の状態で「!」（＝半角のビックリマーク）をいれ、「TABキー」押下。

すると一瞬で上記の基本構造のコードが…

今までの苦労は無駄だった！涙

デフォルトではlang=enなので、ここはjaに変更しておきましょう。

補足

meta name=”veiwport” content=”width=device-width”, initial-scale=1.0″

とはなんぞや？

どうやらスマホやタブレットで表示する際に推奨されているタグのようです。

参考URL→ https://seolaboratory.jp/48581/

meta http-equiv=”X-UA-Compatible” content=”ie=edge”

とはなんぞ？

どうやらInternet Explorerを使用している人のバージョンを指定する、という意味だそうですが…

参考URL→ https://www.creativevillage.ne.jp/2819

レスポンシブデザインに関する重要な値の様だが、考察は次回に譲る（わからんので）。