はじめに
ここでは、Visual Studio Code(以下VSCode)の導入方法と設定や便利なコマンドなどについて紹介していきます。
VSCodeとは
高性能なテキストエディタです。
テキストエディタとはWindowsについているメモ帳だと思ってもらって良いです。
動作が非常に軽量でHTMLのコード補完や拡張機能などが便利なためよく使われます。
IDEとの違い
EclipseなどのIDE(Integrated Development Environment:統合開発環境)はソフトウェアを開発するために色々なソフトが入っています。
・テキストエディタ
・コンパイラ
・デバッガなど
そのため動作が重くなりがちです。
ダウンロードとインストール
こちらからダウンロードします
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
WindowsのUserInstller 64bitで良いと思います。
セットアップは基本的に「次へ」で進めていきます。
途中でデスクトップアイコンを作っておきたい方はチェックを入れておきます。
この画面が表示されれば、ダウンロードとインストールは完了です。
テーマの設定と基本操作
1. テーマの選択
画面右側の方にあるカスタマイズの配色とテーマをクリックし、テーマ(ソフトの配色)を選んでおくと良いと思います。
2. プロジェクトを入れるためのフォルダを作る
場所はどこでも良いのでプロジェクトを入れるためのフォルダを作成しておきます。
3. プロジェクトを作成する
プロジェクトといってもこの場合はただソースファイルを入れるフォルダです。
VSCodeのファイル>フォルダを開くで、2で作成したフォルダを選択します。
画面左のエクスプローラーバーのアイコンからフォルダの作成を選択し、名前をつけます。
プロジェクトとなるフォルダを選択された状態でファイルを作成します。
4. ワークスペースの保存
ワークスペースは、色々なプロジェクトが入っているフォルダを扱いやすくするイメージで良いと思います。本来は1つのフォルダを開くのに1つのウィンドウが必要だったものが1つの窓で複数のフォルダが扱えるようになります。
ファイル>名前を付けてワークスペースを保存で2で作成したフォルダの中に名前を付けて保存します。今後は、VSCodeを開いた後にワークスペースがない場合はファイル>ワークスペースを開くでフォルダの中にあるプロジェクトが全て扱えるようになります。
便利な機能の紹介
HTMLファイルを扱う際に便利な機能を紹介しておきます。
今は何をやっているか理解できなくても良いのですが頭の片隅に入れておきましょう。
Emmet
Emmetは主にhtml、cssを効率よく早く記述することができる。
htmlで、!と打つだけでmetaタグ等の、htmlの書き始めに必要な情報を一瞬で書いてくれる。他にも色々書き方があるので是非調べてみてください。
https://haniwaman.com/emmet/
