「スクリプちん」のサイトデザインをリニューアル作業中です…^^;

【超初心者】Visual Studio Codeのインストールと基本設定

当ページのリンクには広告が含まれています。
VSCode:インストール方法

MacにVisual Studio Code(VSCode)というエディタをインストールして基本設定をしていきます。

Visual Studio Codeと似たような名前で「Visual Studio」というのもありますが、Visual StudioはIDE(統合開発環境)です。

今回インストールするVisual Studio Codeはエディタなので、「Visual Studio」とは別物です。

目次

Visual Studio Codeのダウンロード&インストール

まずは、VSCodeのダウンロードサイトにアクセスしてzipファイルをダウンロードします。

VSCodeのダウンロードサイト
画面の左下の「Visual Studio Code」の無料ダウンロードをクリック

パソコン環境によっていくつか選択肢がありますが、Macは、IntelでもM1でも「macOS Universalパッケージ」を選べばOKです。

VSCodeダウンロードの種類
Macなら「macOS Universalパッケージ」

180MBほどのzipファイルがダウンロードされるので、そのzipファイルをダブルクリックで解凍すると、Visual Studio Code.appファイルが出来上がります。

このVisual Studio Code.appをアプリケーションフォルダに移動したら、インストール完了です。

Visual Studio Codeの起動

Visual Studio Code(以下VSCode)を最初に起動すると、確認メッセージが表示されるので「開く」で次へ進みます。

VSCodeを最初に起動するときの起動確認メッセージ
「開く」で起動します

日本語化:Japanese Language Pack for VS Code

VSCodeは、最初は英語モードになっているので、拡張機能を使って表示を日本語にします。

インストール直後の画面右下には、「表示言語を日本語に変更するには言語パックをインストールします」というメッセージが出るので、これをクリックします。

VSCodeを日本語化するメッセージ
メッセージ内の「インストールして再起動」をクリック
拡張機能のインストールで日本語表示
自動で再起動されて、日本語になっている

すぐにインストール&再起動が実行されて、表示が日本語になりました。

もし、上記のメッセージが消えちゃってたら、画面最下部の紫色の帯の一番右のベルをクリックすると、メッセージを再度表示することができます。

それでも「ナイ!」という人は、とりあえずこのまま読み進んでください。
次で解説します。

VSCodeの基本画面構成

アクティビティバー

VSCodeでよく使う機能は、画面左の「アクティビティバー」からアクセスできます。

VSCodeの画面左はアクティビティバー

一番上の黄色い丸で囲ったマークは「エクスプローラー」、一番下の四角いブロックのようなマークは「拡張機能(プラグイン)」の操作です。

VSCodeサイドバーの拡張機能を表示するボタン

先に操作した、日本語化の拡張機能のメッセージが出てこないときは、この拡張機能(プラグイン)からインストールしていきます。

VSCodeの拡張機能で表示を日本語にする
検索バーに「Japanese Language Pack for VS Code」と入れ、一覧に表示されたら「インストール」をクリック

サイドバー

アクティビティバーの右側のスペースが、「サイドバー」です。

アクティビティバーでの選択内容によって、フォルダやファイルが表示されたり、拡張機能(プラグイン)が表示されます。

VSCodeのサイドバー

エディターグループ

VSCodeの画面の大半を占めているのが「エディターグループ」です。コードはこのエリアに書いていきます。

VSCodeのエディターグループ、パネル、ステータスバー
「エディターグループ」も「パネル」もタブのクリックで表示を切り替える

その下が「パネル」のエリアです。
「問題」「出力」「ターミナル」「デバッグコンソール」のタブを切り替えて使います。
このパネルで内容を確認したり、コマンドを実行したりします。

画面下の紫の帯が「ステータスバー」です。
プログラムの行数など、ステータスが表示されます。

ターミナルの操作

プログラミングには、「ターミナル」が欠かせません。

パネルエリアの「ターミナルタブ」で表示することもできますが、メニューから実行することもできます。

VSCodeのターミナルをメニューから表示する
メニューからターミナルを起動する
VSCodeのパネルのタブからターミナルを表示する
「パネル」の「ターミナル」のタブをクリックしてターミナルを表示する

ターミナルでは、コマンドを入力することで、命令を実行することができます。
試しに、「ls」というフォルダ内容を表示するコマンドを実行してみます。

すると、ユーザー名フォルダの直下(ターミナルが、いま見ているフォルダ)にあるフォルダ名がズラッと表示されました。

VSCodeのターミナルで「ls」コマンドを実行
「ls」に続けて「Enter」で実行

ターミナル画面の右上のボタンでは、ターミナルで使っているシェルの種類や表示方法を設定できます。

VSCodeのターミナルのシェル

ここで使っているシェルは「zsh」です。

「+」マークをクリックするとbashなど他のシェルにも変えられますが、Mac OSのCatalina以降ではzshがデフォルトになりました。
bashは、Catalinaより前のMac OSでデフォルトで使われていたシェルです。


よかったらシェアしてね!
  • URLをコピーしました!
目次