VSCodeの使い方を図解！画面説明からよくある質問・操作方法まで解説

VSCodeの使い方

VSCodeをインストールしたものの、具体的な使い方がまだ分からないという方も多いのではないでしょうか。VSCodeはさまざまな機能を提供しているエディターではありますが、使い慣れるまでに操作を覚える必要があります。

そうはいっても、VSCodeの基本的な操作方法はそれほど難しくありません。本記事では画面の説明から、ワークスペースを追加しコードを実行するまでの流れを、図解でまとめました。

これからVSCodeの使い方を身に着けようと検討されている方は、ぜひ一緒に手を動かして使い方を覚えましょう。

VSCodeの基本操作

では早速、VSCodeの基本操作を確認しましょう。流れとしては、まず画面の中にある各エリアやアイコンの説明をします。次に実際にワークスペースを追加し、コードを記載し実行するところまで行います。

まずはVSCodeの画面の中のエリアを確認しましょう。 画面左側のアクティビティバーにはアイコンが並んでいることを確認してください。（①）ここには拡張機能の検索・ソースの検索・管理・実行・デバッグなどがあります。

また、アクティビティバーのアイコンの上にカーソルを合わせると、アイコンの意味も表示されますので、時間のあるときに各アイコンを確認してください。

その1つ右隣にはサイドバーがあります。（②）こちらは現在開いているワークスペースやファイルの名前が表示されています。画面の右側は編集エリアで（③）、コードを記述する場所です。

さらに編集エリアの下にあるのが、ターミナルなどを表示するパネルエリアで（④）、タブで切り替えることが可能です。ここではターミナルやデバッグの情報、エラーの確認などができます。

1番下の青い部分はステータスバーといいます。（⑤）ここは現在開いているワークスペースの通知を表示したり、エンコードなどを表示してくれるエリアです。

【図】：画面の解説 

【参考】：ユーザーインターフェース

画面の確認ができたところで、早速ファイルを作成してみましょう。画面左上の「ファイル」から「フォルダを開く」を選択してください。 ここで開くフォルダは任意のもので結構です。

フォルダを開いたら、VSCodeの左側にフォルダ名が表示されます。ちなみに本記事では、「sample」という名前のフォルダを設定しています。 フォルダ名にカーソルを当てると、アイコンがいくつか出てきます。

このアイコンの1番左側にある「新しいファイル」というアイコンをクリックしましょう。そうするとファイル名を入力できますので、好きなファイル名を設定してください。本記事ではファイル名を「test.js」としています。

【図】：フォルダーを開く

ここからは、コードを記述してみましょう。先ほどご紹介したエディタエリアに、コードを記述してください。本記事では例として以下のコードを記述します。図も参考にしつつ、同様に入力して下さい。

• var msg = "Hello World";
• console.log(msg);

またコードを入力する際は、コードのインテリセンス機能を使うとより簡単に入力ができます。今回は非常に短いコードしか記述しませんが、実際の開発では非常に役に立つ機能です。積極的に使用して、使い慣れていきましょう。

コードを記述した後は、必ず保存をしましょう。ファイル名の右横に、白い丸印（①）が表示されている時は、最後にファイルを保存した時から変更箇所がある状態です。

保存が必要ですので、メニューバーから保存を行うか、「Ctrl」＋「S」キーまたは「Command」＋「S」キーで保存を行いましょう。ファイル名の横の白い丸印が消えれば、保存完了です。

【図】：コードの記述画面

また、VSCodeではソースを自動保存に設定することも可能です。画面左上の「ファイル」から「自動保存」を選択すれば、自動保存ができるようになります。

【図】：自動保存の設定

【参考】：Visual Studio Code でのコード編集

ここからは記述したコードを、実行してみましょう。ターミナルが表示されていない場合には、画面上部のメニューバーの「ターミナル」を選択しパネルエリアを表示します。

ちなみにターミナルは、パネルエリア右上のアイコンを使用すれば、ターミナルの分割やターミナルの強制終了が可能です。

【図】：ターミナルの表示

また、今回はnode.jsを使用してJavaScriptのコードを実行します。node.jsをインストールしていない場合には、node.jsの公式サイトからダウンロードとインストールをしましょう。

node.jsのインストールが完了した方は、次のステップに進みます。ターミナルに「node --version」（①）と入力し「Enter」キーを押しましょう。バージョンの値が返ってくれば、正しくインストールがされています。

バージョンの確認ができたら、早速コードを実行してみましょう。ターミナルに「node test.js」（②）と入力し、「Enter」キーを押します。ファイル名を違う名称にしている人は「test.js」を任意のファイル名に読み替えてください。

無事「Hello World」がターミナルに表示されたら、実行完了です。この後ターミナルを閉じたい場合は、パネル右上のバツ印を押します。

【図】：実行画面

【参考】：ダウンロード 【参考】：Visual Studio Code でのコード編集

Node.jsとは？JavaScriptとの違いや使い所を解説

VSCodeでよくある問題や疑問

ここからは、VSCodeを使う上でよくある疑問やトラブルをまとめました。こちらもぜひ参考にしてください。

基本的にインストール時に、間違えてPATHの追加を忘れてしまったと言う方もいるのではないでしょうか。本来VSCodeのPATHの設定は、インストール時にチェックを入れておけば設定は必要ありません。忘れてしまった場合は、手動で環境変数にPATHを追加しましょう。

VSCodeがサポートしている言語は、JavaScript・TypeScript・Node.jsです。しかしJavaやPythonなど他の言語に関しては、拡張機能をインストールすると使うことができます。

拡張機能をインストールすれば、インテリセンスやワークスペース内の自動インポートも可能です。各言語の詳しい設定方法が気になる方は、公式サイトを参考にしてください。

また拡張機能のインストール方法は非常に簡単なので、下図のように、VSCodeのアクティビティバーから対象の拡張機能を検索し、インストールして下さい。検索窓で言語名を入力（①）すると、候補がでてきますので、そこから簡単にインストールできます。（②）

【図】：拡張機能の検索画面 【参考】：Visual Studio Code の拡張機能 【参考】：VS Code での Java 入門 【参考】：Visual Studio Code での Python の編集

TypeScriptはJavaScriptの上位互換？違いは開発規模や機能面にアリ

コードを保存して作業完了のタイミングで、そのままVSCodeを閉じていいのか迷うこともあると思います。VSCodeはアプリケーションを閉じても、再度起動すると最後に閉じた状態で開きます。

また、前回起動していた時に開いていたファイルや、レイアウトなども同じ状態で起動します。

VSCodeはmacでも使用可能です。Microfoftの公式サイトからmac版のVSCodeをダウンロードできます。また、基本的な使い方もWindowsとmacでそれほど変わりませんので、ぜひ本記事を参考にしてVSCodeを使ってみて下さい。

【参考】：Visual Studio コードをダウンロード

VSCodeはマークアップ言語にも対応しているので、HTMLやCSSなどにも対応しています。

またマークアップ言語を使用されている方の中には、Emmetを使われる方も多いと思いのではないでしょうか。VSCodeはEmmetにも対応しているので、よりスピーディーにコーディング作業も可能です。

ファイルを作成し、コードを編集すると自動的にEmmetの入力候補が表示されますので使うまでに煩雑な設定なども特に必要ありません。詳細が気になる方は、公式サイトを参照してください。

【参考】：Visual Studio Code での Emmet

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

VSCodeを上手に活用して効率的に開発しよう

VSCodeの基本的な使い方を学びましたが、一緒に作業をした方は、比較的簡単に実行までできたのではないでしょうか。またコードの編集を通して、インテリセンス機能をはじめとしたVSCodeの便利な機能を体感いただけたと思います。

VSCodeはカスタマイズも柔軟にできるツールですので、実際に開発をする中でご自身の使いやすいようにカスタマイズをすることも可能です。またVSCodeは無料で提供されていますので、個人でも気軽に使えるのが魅力です。

本記事や公式サイトのドキュメントなどを活用し、ぜひVSCodeを使いこなして開発効率の向上を目指しましょう。

VSCodeのショートカット一覧！開発作業を効率化する秘訣を解説

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介