VSCodeの基本的な使い方

普段「IntelliJ」を利用しているのですが、フロントでVSCodeを利用したくなり、基本的な使い方についてまとめました。作業環境のOSはMacです。

ダウンロード

下記ページからダウンロードできます。

https://code.visualstudio.com/download

フォルダを開く

494-tool-vscode-1_1.png

Open folder...をクリックして、該当のフォルダを選択します。

494-tool-vscode-1_2.png

EXPLORERに選択したフォルダが追加されました。

画面構成

全体

494-tool-vscode-2_1.png

1. Activity Bar
Side Barの内容を切り替えることができます。

2. Side Bar
Activity Barの選択状態によって内容が異なります。

3. Editor
ファイルの編集を行うためのスペースです。

4. Panel
ターミナルやDebug情報が表示されます。

5. Status Bar
開いているプロジェクトとファイルに関する情報を表示します。

Activity Bar

494-tool-vscode-2_2.png

Explorer
ファイルやフォルダの管理をします。

Search
検索、置換を行うことができます。

Git
Gitによるソース管理をすることができます。

Debug
「VARIABLES」「WATCH」「CALL STACK」「BREAKPOINTS」など表示されます。

Extensions
拡張機能のインストール、アンインストールを行うことができます。

Explorer

494-tool-vscode-2_3.png

3つのセクションで構成されています。

参考

Quick OpenとCommand Palette

IntelliJとの比較

IntelliJを利用されたことのある方であれば、以下のような対応関係でイメージしやすいかと思います。

VSCode IntelliJ
Quick Open Search Everywhere
Command Palette Find Action

完全に一致はしませんが、機能的に近い役割をしています。

Quick Open

⌘PQuick Open が開きます。ここで「目的のファイルを開く」「目的の行に移動」といった操作を行うことができます。

494-tool-vscode-3_1.gif

?と入力するとhelpが表示され、どういった操作ができるのか確認できます。

参考

Command Palette

⇧⌘PCommand Palette が開きます。
( Quick Open を開いた後に > を入力したのと同じです。)

VSCodeの各種コマンドを実行できます。

494-tool-vscode-3_2.gif

例として、>View: Zoom In を実行しています。

参考

ショートカット

Cheat Sheet

下記ページで確認できます。
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Macの記号の意味をよく忘れるので記述しておきます。

キー 記号
command
shift
option
control

他ツールのKeymapを導入

494-tool-vscode-4_1.png

Extensionsで @recommended:keymaps と入力します。
IntelliJ Atom などのkeymapが利用できます。

IntelliJのKeymapを導入した場合

私は IntelliJ も利用するので、IntelliJのKeymapにしています。

下記操作を IntelliJと同じ操作で実行できます。

  • フォーマット
  • 現在の行削除
  • 現在の行をコピーして下の行に挿入
  • コメントアウト
  • 検索 & 置換
    • 現在の編集ファイル
    • 複数ファイル

ただし、先述した Command Palette を表示するショートカットなども変わります。
以下、IntelliJ に変更した場合に注意が必要な操作です。

ショートカット 説明 VSCodeのデフォルト
command + P Quick Openを表示 同じ
shift + command + A Command Paletteを表示 異なる
Control + Tab 開いているファイルの中で表示切り替え 同じ
option + fn + f12 ターミナルの表示/非表示の切り替え 異なる
option + shift を押しながら範囲選択 矩形選択 同じ

矩形選択ですが、VSCodeでは Multi-cursor editing と呼び、矩形選択以上の操作をすることができます。

下記リンク先でわかりやすい解説がされていました。
http://mugi1.hateblo.jp/entry/2018/12/11/215808

カスタマイズ

494-tool-vscode-5_0.png

SettingsでVSCodeの基本設定を行えます。
Keyboard Shortcutsでショートカットの設定を行えます。

Settings

494-tool-vscode-5_1.png

User Settings
VSCode全体に適用される設定です。

Workspace Settings
Workspaceを開いたときにだけ適用される設定です。設定変更すると自動的に.vscodeフォルダが作成されて、そこに設定情報が格納されます。

設定情報は、他の人と同期することも可能です。Settings Sync

参考

Keyboard Shortcuts

494-tool-vscode-5_2.png

ショートカット割り当ての確認、変更、削除ができます。

参考

Git操作方法

494-tool-vscode-git_1.png

変更のあったファイルを確認できます。stageへ追加 commitなどの操作を行うことができます。

494-tool-vscode-git_2.png

基本的な操作ができるようです。

494-tool-vscode-git_3.gif

Side Bar以外にもCommand Paletteから操作することもできます。

以下の操作をしています。
1. Command Paletteを開く
2. developブランチを作成する
3. Status Barのブランチをクリック
4. masterブランチに変更する

参考

自動保存の設定

494-tool-vscode-6_1.png

デフォルトだと自動保存されません。保存されていないファイルがある場合、ExplorerにてUNSAVEDと表示されます。

494-tool-vscode-6_2.png

自動保存するようにするには、[File] - [Auto Save]にチェックをつけます。

参考

入門用の動画(https://code.visualstudio.com/docs/getstarted/introvideos)など役に立ちました。

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。