まなび

Visual Studio Codeで感動した機能!ビギナーの方必見!?

こんにちは、アヤカルです。

プログラミングの学校に通い始めて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回は「あれ?」って言ってます笑

 

今後も引き続き「ええ!そんな機能があったんかー!!」というものに遭遇したらシェアしたいと思います。

一緒に「ええ!そんな機能が…!!」と感動をわかちあえたら嬉しいです。

また、「ええ!そんなことも知らなかったのー!!」と逆に驚かれた方は、こんな私にコメントでいろいろ教えていただけますと嬉しいです。

ではまた〜

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です