VSCodeのインストールとプラグインの導入

Visual Studio Codeとは?


プログラミングに特化したテキストエディタ。(つまりは、メモ帳)
「パッケージ」と呼ばれるプラグインを導入することで、プログラミング支援機能を追加することが出来ます。

【Mac】Visual Studio Codeのダウンロード


下記のサイトにアクセスし、「Download for Mac」をクリック
https://code.visualstudio.com/

画面が移動したら自動でダウンロードが始まり、ダウンロードフォルダにアプリがダウンロードされます。

画面右下の①のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の②をクリックしてください。

ダウンロードフォルダにそれらしいアイコンが表示されたかと思いますが、まだ開かないでください。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

この画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。
(人によっては表示されないので、スキップして構いません。)

サイドメニューの「アプリケーション」をクリックし、VSCodeを見つけ、ダブルクリックで開いてください。

「開発元が未確認のため開けません」という警告ダイアログが表示された場合
Mac App Storeで配布していないアプリ全般に表示されるので、これは必ずしもアプリケーションに問題がある訳ではありません。
※ただ不正なコードが含まれる可能性があるアプリも存在します。

このアプリにだけ、例外的にセキュリティ設定を無効化してこのままアプリケーションを開くには、次の手順に従います。
①MacのFinderで、開きたいアプリケーションを検索します
Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません
②Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択します
③「開く」をクリックします。

【Windows】Visual Studio Codeのダウンロード


下記のサイトにアクセスし、「Download for Windows」をクリック
※左側のダウンロードボタンどちらでもダウンロード可能
https://code.visualstudio.com/

ダウンロードしたインストーラをダブルクリックで開く
※通常ブラウザからダウンロードされたファイルはC:\Users\”個々のユーザ名”\Downloadsにあります

インストーラが起動したら内容を確認し「次へ(N)>」をクリックする

利用規約に関しての同意を問われるので内容を確認し問題がなければ「同意する(A)」を選択し「次へ(N)>」をクリックする

インストール先を問われるのでお好みの場所を選び「次へ(N)>」をクリック
※起動が速くなるのでSSDドライブにインストールをするのがおすすめ

Visual Studio Codeのショートカットをスタートメニューに作成するか問われるのでお好みで指定し「次へ(N)>」をクリック
※作成したくない場合は左下の「プログラムグループを作成しない(D)」にチェックを入れ「次へ(N)>」をクリック

デスクトップにアイコンを作成するかなどを問われるのでお好みでチェックを入れて「次へ(N)>」をクリック

デスクトップ上にアイコンを作成する(D)
→文字通りデスクトップ上にVisual Studio Codeのアイコンを作るかの選択
エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
→エクスプローラー上の任意のファイルを右クリックし開くとき、「Codeで開く」が現れるようにするかの選択
エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する
→エクスプローラー上の任意のフォルダを右クリックし開くとき、「Codeで開く」が現れるようにするかの選択
サポートされているファイルの種類のエディターとしてCodeを登録する
→ファイルに関連づけるアプリとしてVisual Studio Codeを登録するかの選択
PATHへの追加(再起動後に使用可能)
→Visual Studio CodeのexeファイルまでのファイルパスをWindowsの環境変数に追加するかの選択

インストール時の設定確認画面が表示される、設定した表示のままでインストールを開始するなら「インストール(I)」をクリックする、設定が気に入らないときは「<戻る(B)」をクリックし再設定を行う

インストール画面が現れ緑色のインストール進捗バーが表示されるのでしばらく待機する

正常にインストールが完了すると下記の画面が現れるので「Visual Studio Codeを実行する」のチェックボックスにチェックを入れ、「完了(F)」をクリックする

もっと便利になるような拡張機能をインストール


このままですと普通のメモ帳と変わらないので、これらを導入することで、文法チェックを行うなどのプログラミング支援機能が追加されます。

サイドメニューの■マークが並んだアイコンをクリックしてください。

赤枠の検索フォームに「Japanese Language Pack」と打ってみてください。
そうすると下に検索結果が表示されるので、同じ名前の拡張機能にある「Install」ボタンをクリックします。

他にも下記の拡張機能を同じようにインストールしてみてください。
下記のテキストをコピー・アンド・ペーストで検索したほうが確実です。

・Visual Studio IntelliCode
・Bracket Pair Colorizer
・Path Intellisense
・HTMLHint
・EvilInspector
・Material Icon Theme

ひととおりインストールしたらVSCodeを再起動しましょう。
VSCodeを開いた今の状態で、左上の「Code」から「Quit Visual Studio Code」をクリックすると閉じます。
そして再度アプリケーションフォルダからVSCodeを開いたら、インストールと準備は完了です。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami