Visual Studio Codeの基本的な使い方を学ぶ。

関連リンク

Documentation for Visual Studio Code

Script

Webサイト制作では、単一のファイルではなく、複数のファイルがお互いに関連しあっていることが多いです。なので、VS Code上でそれら複数のファイルを制御した方が、効率的に作業を進めることができます。

メニューバーの「ファイル」から「フォルダーを開く」を選択します。もしくは、サイドバーにフォルダをドラッグします。

アラートが表示されますが、悪意のないファイルなので「ファイルの作成者を信頼する」を選んでください。

フォルダ内にあるすべてのファイルが読み込まれたので、このサイドバーからファイルを開くことができます。ダブルクリックか、エディタにドラッグします。サイドバーのボタンから新規ファイル、新規フォルダの作成ができます。あるはずのファイルが表示されていない場合は、再読み込みボタンを押してみてください。

複数のタブを開いた状態で「⌃Control + + Tab」でタブの切り替えができます。タブを掴んでドラッグして、左右か上下に分割することもできます。

テキスト量が多いファイルの場合、この「MiniMap」でファイル全体を確認できるので便利です。「エディタを右に分割ボタン」をクリックすると、いまアクティブになっているファイルがもうひとつ、右に分割されて開きます。同じファイルを左右で開いて編集することができます。

もしくは、異なるファイルを左右に分割して開くこともできます。エクスプローラービューからドラッグするか、タブで開いているファイルをドラッグすると左右に分割して開くことができます。たとえば左にHTML、右にCSSのファイルを開いて作業を行うことができます。

メニューバーの「表示」の「外観」に「Zen Mode」がありますが、これは書くことに集中できるモードです。VS Code以外でも、よくエディタ界隈にはこんな「Zen Mode」のカルチャーがあります。