神戸学院大学 経営学部 林坂ゼミ

HTML 入門トップページ

« 戻る 次へ »

Visual Studio Code

Visual Studio Code の使い方

フォルダを開く

Visual Studio Code では「開く」という機能が2種類あります.「ファイルを開く」と「フォルダ」を開くという機能です.MS-Word やメモ帳など多くのソフトウェアでは特定のファイルを開くという操作を行いますが,Visual Studio Code ではフォルダを開くという操作が基本になります.

「フォルダーを開く」ボタンをクリックして編集したいプロジェクトのフォルダ(たとえば,Webページを作成する場合はユーザのフォルダの中にある「public_html」フォルダ)を開きます.あるいは,エクスプローラからフォルダをドラッグ・アンド・ドロップする事もできます.

vscode2023-16

さらに,エクスプローラから「public_html」フォルダを右クリックして表示されるメニューから「Open with Code」を実行してフォルダを開く方法もあります.なお,この方法はインストール時にコンテキストメニューのチェックを入れた場合のみ利用できます.

vscode2023-17

プロジェクトのフォルダが開かれたので,画面の左にある「エクスプローラー」から「index.html」ファイルをダブルクリックして開きます.もちろん複数のファイルを同時に開いてタブで切り替えながら作業することも可能です.さらにファイルをシングルクリックすると,ファイルをプレビューすることもできます.

vscode2023-18

目次に戻る

インテリセンス

Visual Studio Code が便利である理由は,高度なインテリセンス (IntelliSense) が搭載されていることです.たとえば HTML 文書にタグを入力しようと,<p まで入力した時点で,ヒント(スニペット)が表示されます.

vscode2023-19

さらに,<p> まで入力すると閉じタグ </p> が自動的に入力されます.もしも自動的に入力された閉じタグが不要であれば,Ctrl + Z (macOS では + Z)で元に戻す操作をすると良いでしょう.

vscode2023-20

なお,言語モードはファイルの拡張子から自動的に設定され,選択された言語モードがステータスバーに表示されます.

目次に戻る

検索

ファイル内の文字列を検索するためには Ctrl + F (macOS では + F)を押します.画面の右上に検索ボックスが表示されるのでそこに検索したい文字列を入力します.

vscode2023-21

たとえば「見出し」で検索すると5件見つかり,検索された文字列がハイライトされます.

vscode2023-22

ファルダ内のすべてのファイルからまとめて検索することも可能です.画面左端にある「アクティビティバー」から「検索」ボタンをクリックします.「見出し」で検索すると,3個のファイルから13件が検索されました.さらに,置換機能を使うと一気に別の文字列に置き換えることも可能です.

vscode2023-23

目次に戻る

マルチカーソル

Visual Studio Code ではマルチカーソルが利用できます.たとえば16行目の「す」と「。」の間にカーソルを置きます.

vscode2023-24

その後,Alt キー(macOS ではoptionキー)を押しながら,別の箇所を順にクリックします.これでマルチカーソルが設定できました.

vscode2023-25

マルチカーソルを設定した状態で Backspaceキー(macOSでは deleteキー)を押すと,マルチカーソルが設定されたすべての箇所を同時に編集できます.

vscode2023-26

さらに,「した」と入力します.

vscode2023-27

続けてカーソルキー () で移動したあと「ホーム」を消して「Web」に書き換えてみます.

vscode2023-28

目次に戻る

矩形選択

Visual Studio Code では矩形(ボックス)で領域を選択してコピーや削除などの作業を行うことができます.カーソルを始点になる位置(左上)に置き,Alt + Shift キー(macOS では option + shift)を押しながら,マウスで範囲をドラッグします.たとえば下の画面では「段落です。」を4行分選択しています.その後 Ctrl + C(macOSでは + C)を押してコピーします.

vscode2023-29

選択した矩形の範囲を別の箇所に貼り付けるには,貼り付け先をAlt + Shift キー(macOS では option + shift)を押しながら,マウスで範囲をドラッグ(あるいはマルチカーソルの要領で順にクリック)します.

vscode2023-30

貼り付け先の指定ができれば Ctrl + V(macOSでは + V)を押して貼り付けます.

vscode2023-31

目次に戻る

折りたたみ

行番号の右にマウスカーソルを移動すると,v のような折りたたみのアイコンが表示されます.これをクリックするとコードのブロックを折りたたむことができます.

vscode2023-32

15行目から21行目のブロックが折りたたまれました.さらに22行目からのブロックも折りたたみます.

vscode2023-33

2つのブロックが折りたたまれた状態になりました.

vscode2023-34