この記事ではVisual Studio Codeで最低限入れておくべきプラグイン、プロジェクトファイルの開き方とファイルに記述できる状態になるまでの操作方法について解説します。
インストール方法についてはこちらの記事を参考にしてください。
Visual Studio Codeのインストール方法
最低限入れておくべきプラグイン
実際に使って行く前に、最低限のプラグインを入れていきましょう。
おすすめのプラグインはたくさんありますが、ここでは最低限入れておくべきものだけ紹介します。
・Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
これを入れると、いちいちブラウザをリロードしなくても、コードを編集したタイミングで内容がブラウザに反映されます。
・Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
HTMLの開始タグを編集すると終了タグも一緒に変わってくれます。デフォルトの設定だと開始タグをpからdivに変えても、終了タグはpのままです。ミスの原因になるのでこのプラグインで自動で変わるようにしておきましょう。
どちらもVisual Studio Code左側にある拡張機能アイコンをクリックしたときに出てくる検索窓で検索すると出てきます。
基本的な使い方
ここまででVisual Studio Codeの最低限の準備は完了しました。
それでは使い方を最初から確認していきましょう。
起動
まずDockにあるVisual Studio Codeのアイコンをクリックするか、アプリケーションフォルダ内にあるVisual Studio Codeのアイコンをダブルクリックして起動しましょう。DockにVisual Studio Codeのアイコンが無い方はここでDockに追加してしまいましょう。アプリケーションフォルダのVisual Studio CodeのアイコンをDockにドラッグアンドドロップすればオーケーです。
プロジェクトフォルダを開く
まず、新しいプロジェクトフォルダを作成します。既存のプロジェクトフォルダがある方はFinderウィンドウでプロジェクトフォルダを格納しているところをひらいておきます。
今回フォルダ名を「プロジェクトファイル」としていますが、自分がこれから取り組むプロジェクト名を付けましょう。
作成したプロジェクトフォルダをDockにあるVisual Studio Codeのアイコンまでドラッグ&ドロップしてください。
よくやってしまいがちなのが、プロジェクトフォルダ内のhtmlファイルだけ開いてしまうことです。
その開き方だと、Live Serverが効かなくなったりと色々問題が出てきますので、必ずプロジェクトフォルダを開くようにしましょう。
ファイルの作成
プロジェクトフォルダ内にファイルを作成するにはVisual Studio Codeのでホバーすると「新しいファイル」と表示される部分があるのでそこをクリックしましょう。
表示された入力欄にファイル名を記述していきます。ここではindex.htmlとします。
同じような要領で今度はcssフォルダとjsフォルダを作成します。
フォルダを作成するにはフォルダマークをクリックしてフォルダ名を入力します。
cssフォルダにはstyle.css、jsフォルダにはscript.jsを作成します。
以下のような構成になります。
ファイルの保存方法
⌘ + sか上部メニューのファイル→保存と選択することで作業中のファイルを保存することができます。
ですが、毎回⌘ + sを押すのは面倒ですので自動保存されるようにしておきましょう。
上部のメニューのファイル→自動保存にチェックが入っていればオッケーです。これでファイルを保存したかどうかを気にせずにコードを編集することができます。
ここまでで基本的な使い方の解説は終了です。あとは好きなコードを書いていきましょう。Visual Studio Codeは非常に多機能なエディタです。エメットやスニペット、ターミナルなどあげていったらきりがないほど便利な機能があります。それらはまた別記事で解説していきます。