VS Codeをちょこっとカスタマイズ

はじめに

VS Codeで作業する上で、ここ最近改善したコトをメモ。

<br>ってもう打ちたくない問題

コーディング時にデザイナの指示通りに<br>をひたすら挿入しなくてはいけない時がある。
これが地味に手間で、4cm<ここで改行>みたいな時だと、Emmetが効いているがゆえに4cmbrでtabを押すと<4cmbr></4cmbr>になってしまい、目も当てられない結果に。
最終的には<br>をコピペしまくって事なきを得るんだけれど、正直なんだかなと思っていた。

そこで、楽に<br>が挿入できるプラグインでもないかなーと探していたら、あった。

VS CodeでHTMLの<br>タグを[shift+enter]で入力するエクステンション作った

[shift + enter]でカーソル位置にスコスコと<br>が挿入できる。
これで一つ、小さな悩みから開放された。

scssでメディアクエリを毎回書くの、正直しんどい問題

scss(sass)のおかげで相当cssが書きやすくなった。また、Emmetを組み合わせることで、確かに爆速になった。だが、しかし、それでもまだメディアクエリについては改善の余地があると思う。
メディアクエリmixinふりかけをscssファイルに毎度毎度振りかける作業は、これがまた地味に手の筋に堪える。

あの手この手を考えて、なるべく環境依存しないやり方を取りたかったが…面倒くさくなったので、VS Codeのスニペットとして登録することで強引に解決した。

Visual Studio Codeで、ユーザー定義スニペットで楽をする

またひとつ、エディタ内に腐海を生んでしまった…。


"media query": {
    "prefix": "@",
    "body": [
        "@include media($1){",
        "}"
    ]
}

これで@ -> enterと入力するだけで、一発でメディアクエリがカーソル位置に展開されるようになった。なお、スニペット内に$1と記述することで、展開後のカーソル位置を指定できる。

おわりに

現場からは以上です。