html,cssの入力に慣れてくると、早く入力したい、もっと楽に入力ができたらと感じることがあると思います。
特に似たようなコードを入力するときは、面倒だと感じるこがあるのではないでしょうか。
そんな面倒な作業を解決してくれる方法があります。
スニペットです。
html,cssにはEmmetという、入力を支援してくれる機能があります。ただ、事前に用意されている記述で入力しなくてはならないという欠点があります。
こちらのスニペットは自分でカスタマイズして使う方法ですので、Emmetでできないことをスニペットを使って補完するのが、おすすめの使い方になります。
例えば、スニペットに登録しておくと、
<div class="">
<a href=""></a>
</div>
こういったコードが少ない文字で入力が可能になります。
よく使うコードをスニペットに登録しておけば、爆速で入力ができますので、大変便利です。
また、スニペットと似たような機能で、Emmetというものがあります。以下のような特長を持っています。
・Emmetは、事前に用意されている記述で入力しなくてはいけない。
・スニペットは、自分で好きなようにカスタマイズできる。
このような特徴を持っていますので、Emmetでできないことをスニペットを使って補完するのが、おすすめの使い方になります。
Emmetはこちらで詳しく解説しています。
emmetを使ってhtmlを効率的にコーデイングする方法
スニペットの設定ファイルを開く
ファイル>ユーザー設定>ユーザースニペットを選択します。
スニペットファイルの選択もしくはスニペットファイルの作成に「html.json」を入力します。html.jsonが開きます。
コメントアウトされているファイルが表示されます。（コメントアウトされている行は削除しても問題ありません）
ここにコードを登録していきます。
この例では、html.jsonを開きましたが、cssのスニペットの登録をしたい場合は、css.jsonを腹きます。
スニペットに登録する
html.jsonを以下のように登録して保存します。
{
"diva": {
"prefix": "diva",
"body": [
"<div class=\"$1\">",
" <a href=\"$2\"></a>",
"</div>"
],
}
スニペットを使いたいhtmlファイルを開きます。
以下のようにのように入力し、tabキーかエンターキーを入力します。
diva自動で以下のように展開されます。
<div class="">
<a href=""></a>
</div>
スニペットには、ただ展開されるだけでなく、カーソルの移動も自動でやってくれる便利な機能があります。
・展開後に、カーソルがclassに移動します。
・その後で、tabキーを入力すると、hrefに移動します。
class名やhrefは入力するごとに変えなければいけない値ですので、カーソルを自分で移動する手間が省略できます。
スニペットに登録の方法
html.jsonの登録方法ですが、以下のように登録します。
{
"スニペットの名前1": {
"prefix": "入力する文字列",
"body": [
"1行目",
"2行目",
],
},
"スニペットの名前2": {
"prefix": "入力する文字列",
"body": [
"1行目",
"2行目",
],
},
}
スニペットの名前:好きな名称で入力可能
prefix:展開する前に入力する文字列
body:展開したいコードをここに記述する。行が複数ある場合は、上記のように「,」で行をつなげる
カーソルの移動は、$1,$2・・・のように付けます。
最初が$1で次のtabキーの入力で$2とカーソルが移動します。
"body": [
"$1",
"$2",
],
prefixで入力したい文字列を指定し、bodyで展開したいコードを指定するだけなので、登録は難しくないと思います。
スニペットに登録の注意点
スニペットを登録するjsonファイルですが、入力するときに一つだけ注意点があります。
「"」を使用する場合、エスケープする必要があります。
ですので、「"」をそのまま使用するとエラーになって不具合を起こします。
例えば、
<div class=""></div>このようにclassの名称を指定する場合、「"」を使用しています。
この場合は、「"」を「\"」に置き換えます。
ですので、最終的に以下のようにbodyを置き換える必要があります。
<div class=\"\"></div>cssのスニペットに登録する
cssもhtmlと同様にファイル以外は方法はかわりません。
css.jsonを以下のように編集します。
{
"center": {
"prefix": "c",
"body": [
"bottom: 0;",
"left: 0;",
"margin: auto;",
"position: absolute;",
"right: 0;",
"top: 0;",
],
},
}
スニペットを使いたいcssファイルを開きます。
以下ののように入力し、tabキーかエンターキーを入力します。
c自動で以下のように展開されます。
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
これは上下左右を中央寄せしてくれるcssになります。
このように目的をもったcssをスニペットに登録しておくと、入力がとても楽になります。
最後に
スニペットは、繰り返し入力するようなコードがある場合、効率的に入力ができるようになります。
スニペットを使うには事前に登録をしなければなりませんが、使えるようになるとかなり強力な機能です。
大変便利な機能ですので、ぜひ使ってみてください。
スニペットの他に、htmlの入力を支援してくれる機能があります。詳しくはこちらで解説しています。
emmetを使ってhtmlを効率的にコーデイングする方法
