【VSCode】概要（画面構成、コマンドパレット、クイックオープンなど）、開発する上で入れたいパッケージ

VSCodeとは？

「Visual Studio Code」の略でMicrosoftが開発を行っているマルチプラットフォームで動作するエディタでGitHubでもソースが公開されています。2015年にリリースされました。

VSCodeの特徴

• 扱える言語はマイクロソフトが力を入れている言語だけではない。
• 各種外部ツールやクラウドサービスとの連携ができる。
• マルチプラットフォーム対応（Windows、Mac、Linux)

機能

デフォルトで比較機能があります。

バージョンの種類

下記の2バージョンあります。どちらのバージョンもインストールして共存させることも可能です。

• Insidersバージョン
• Stableバージョン

Insidersバージョン

機能の追加やバグの修正は先にこちらにて行われます。

Stableバージョン

1ヶ月に1度更新されてInsidersバージョンによって動作確認した内容が取り込まれます。

アップデートについて

アップデートは自動更新になっています。どのようなアップデートが行われたかは下記のURLにて確認することができます。

https://code.visualstudio.com/updates

画面構成

アクティビティバー

一番左のバーを指します。初期状態では6つのアイコンがあります。

エクスプローラビュー

下記の機能があります。

• ファイル一覧表示
• ファイル同士の差分比較（右クリック）
• ファイル内のアウトラインを表示する。

検索ビュー

ワークスペース全体の検索や置換をすることができます。

ソース管理ビュー

Gitに関する機能をVS Code上で行うことができます。拡張機能次第ではGit以外のバージョン管理システムも扱えます。

デバッグビュー

デバッガと連携してステップ実行が可能です。変数の表示やコールスタックの表示も可能です。

Extensionsビュー

拡張機能のインストールや管理を行うことができます。

サイドバー

アクティビティバーの一つ隣のエリアのことでアクティビティバーでクリックしたアイコンの詳細が出力されます。

エディタグループ

右の一番広いエリア全体です。下記のようなことができます。

• 複数のファイルを分割して画面に表示できる。（Commandキーを押しながら開く）
• ミニマップ機能（ファイルの右側に俯瞰したファイル内容が表示されます。クリックすればジャンプできます。）
• 高速スクロール（Altキーを押しながらスクロールする。）

パネル

ターミナルや出力パネルを切り替えて表示します。

問題パネル

ソースコード内のエラーや警告を表示します。ただ、警告を表示するためには適切な拡張機能をインストールしている必要があります。C言語であれば「C/C++等」

出力パネル

「Gitのログ」や「タスクのログ」等の出力を確認できます。

デバッグコンソール

デバッグしている際のコンソールになります。

統合ターミナル

ターミナルをVS Code内で開けます。npmやdockerコマンド等もここで使うことができたりします。

ステータスバー

言語やタブサイズ、開いているファイルやプロジェクト名が表示されます。

また、下記のような機能もあります。

• また、その場でエンコード方式やインデントの変換等も行うことができます。
• Gitの管理下にある場合はGitのブランチ名を表示する。

コマンドパレットを開くには？

Command + Shift + Pもしくは「表示 → コマンドパレット」から呼び出せます。

例えば下記のようなコマンドで素早く管理機能を開けたりします。

• cdl(表示言語を構成する）
• ous(ユーザー設定を開く）
• Markdown:Open Preview to the Side(Markdownプレビューを横に表示）

クイックオープン

「Command + P」で開くことができます。直近開いていたファイルの履歴が出るので再度開きたい場合等に便利です。

任意行に飛ぶ

「:行数」とすれば任意の行数の行にジャンプすることが可能です。

プロセスエクスプローラ

「ヘルプ→プロセスエクスプローラ」にてVSCodeで使用しているプロセスの一覧を表示させることができます。

開発する上で入れたいパッケージ

Japanese Language Pack for Visual Studio Code

日本語化する場合は最初に入れましょう。

フロントエンド開発

Emmet

HTMLの雛形を自動で作成するスニペット機能があります。

Live Server

HTMLをリアルタイムプレビューで実装することができます。

JavaScript standardjs styled snippets

JavaScriptコードを素早く入力できるスニペットです。

Ruby開発(Ruby on Rails)

Ruby Solargaph

コースコードの自動補完してくれます。