こんにちは、アヤカルです。
プログラミングの学校に通い始めて2週間がたちました。いやぁ、みんなで机を並べて勉強するのって楽しいですね。
これまでに学校で習ったことで「なんと便利な!!」と思った機能やツールをぼちぼちまとめていきたいと思います。
今回はVisual Studio Code編です!
こんな方に向けて書きました
- 私と同じようにスタートラインに立つ方
- 今HTML & CSS を勉強している方
- 初心を思い出したいプログラマーの方
- プログラミングの学校で何を習うのか興味のある方
Visual Studio Code とは?
Visual Studio Code(以下VSCと略します)とは、テキストエディターです。コードを書くだけなら「メモ帳」でもかけるのですが、テキストエィターを使うと補助機能が豊富なので、めちゃめちゃコードが書きやすくなります!しかも無料!
インターネットで「Visual Studio Code」と検索するとダウンロードページが見つかりますよ。

秒で基本コードが書ける!


[html]形式で保存したファイル「!」と入力すると基本コードが出現!マジックかよ!?『html:5」と入力するとコードが現れるのは知っていましたが、さらに短くなるとは!
VSC 同じ要素(エレメント)を複数入力するとき…

リストを作成するときとか、いくつも同じ要素を入力するのは面倒ですよね。私なんて、何個入力したか忘れるし、後から数えても間違えてるし…(小学校から出直すべき)
そんな私のこともVSCさんは見捨てません!
たとえば <li></li> を5個入力したい時、ただ li*5 と入力するだけであら不思議!

マジックかよ!?

こんな無駄リストも作りたい放題です。
ローカル環境をサクッと構築
Live serverとはVSCの拡張機能で、簡易ローカルサーバーを起動してくれるツールです。
記述したコードの動作をサクッと確認できるので、便利です!

下準備として、Visual Studio Codeのマーケットプレイスで「live server」を検索しインストールします。

起動するときはVSCの画面の右下の方にある「live」をクリックします。
Macの場合は「command」+「shift(⇧)」+「P」でも起動しますよ〜。
ちなみに
あれ?変更したのに更新されてない…
というときは大抵ファイルを保存し忘れている時だったりします。
私は1日1回は「あれ?」って言ってます笑
今後も引き続き「ええ!そんな機能があったんかー!!」というものに遭遇したらシェアしたいと思います。
一緒に「ええ!そんな機能が…!!」と感動をわかちあえたら嬉しいです。
また、「ええ!そんなことも知らなかったのー!!」と逆に驚かれた方は、こんな私にコメントでいろいろ教えていただけますと嬉しいです。
ではまた〜