プログラミング入門ナビ編集部TweetPocketこの記事では、VSCodeを使用する上で必須となるプロジェクトフォルダ機能の設定方法について解説します。プログラミングをはじめて学び創れる人へ!」とProglus「新HTML入門」のサポート記事です。アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。Codeの略で、Microsoft社が開発しているエディタを指します。VSCodeは様々な言語やOSに対応しており、拡張機能も豊富で効率的に開発を進めることができるため、人気が集まっています。VSCodeのプロジェクトフォルダ設定プロジェクトフォルダとは、プログラムを作成する際の作業フォルダを指します。プロジェクトフォルダを設定することでコーディングを効率的に進めることができます。GUIでの設定ここでは、デスクトップに配置した「web」という名前のフォルダをプロジェクトフォルダに設定する想定で、手順について説明します。VSCodeを起動します。VSCodeを起動すると、デフォルトではプロジェクトフォルダは設定されていない状態です。左のカラムの一番上が「Explorer」のアイコンです。Folder」ボタンをクリックします。VSCodeの左上の「File」をクリックして、「Open...」を選択しても同じ操作が可能です。Folder...」を選択)Finderまたはファイルエクスプローラーが表示されるので、プロジェクトフォルダを選択します。プロジェクトフォルダを設定すると、Exploerのカラムにプロジェクトフォルダの中身が表示されます。今回は、「web」フォルダの中に「html-basic」という名前のフォルダが存在するので、その中身が一覧表示されています。プロジェクトフォルダを設定すると、フォルダ内のファイル構成が一目で分かるようになるので便利です。ファイル名をクリックすると、ファイルが右側のタブで表示されます。コマンドラインでの設定プロジェクトフォルダはコマンドラインからも設定できます。VSCodeをダウンロードするとコマンドラインでcodeコマンドが有効になります。フォルダ名とすることで、該当フォルダをプロジェクトフォルダとしたウィンドウが立ち上がります。WindowsではPowerShellまたはコマンドプロンプト、Macではターミナルから起動可能です。webVSCodeで画像をプレビュー表示ここでは、インターネットからダウンロードした画像をプロジェクトフォルダに追加し、VSCodeでプレビュー表示する方法ついて説明します。1画像のダウンロードWebサイトなどで表示されている画像をダウンロードして利用したい場合について解説します。画像を右クリックして、「名前をつけて画像を保存」をクリックします。ドロップすることも可能です。3VSCodeでプロジェクトフォルダを開くVSCodeのプロジェクトフォルダにダウンロードした画像が追加されています。画像ファイル名をクリックすると、右側のタブに画像が表示されます。・About・プライバシーポリシ。