普段「IntelliJ」を利用しているのですが、フロントでVSCodeを利用したくなり、基本的な使い方についてまとめました。作業環境のOSはMacです。
ダウンロード
下記ページからダウンロードできます。
https://code.visualstudio.com/download
フォルダを開く
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-1_1-1024x785.png)
Open folder...
をクリックして、該当のフォルダを選択します。
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-1_2-1024x785.png)
EXPLORERに選択したフォルダが追加されました。
画面構成
全体
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-2_1-1024x755.png)
1. Activity Bar
Side Barの内容を切り替えることができます。
2. Side Bar
Activity Barの選択状態によって内容が異なります。
3. Editor
ファイルの編集を行うためのスペースです。
4. Panel
ターミナルやDebug情報が表示されます。
5. Status Bar
開いているプロジェクトとファイルに関する情報を表示します。
Activity Bar
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-2_2.png)
Explorer
ファイルやフォルダの管理をします。
Search
検索、置換を行うことができます。
Git
Gitによるソース管理をすることができます。
Debug
「VARIABLES」「WATCH」「CALL STACK」「BREAKPOINTS」など表示されます。
Extensions
拡張機能のインストール、アンインストールを行うことができます。
Explorer
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-2_3-1024x906.png)
3つのセクションで構成されています。
参考
Quick OpenとCommand Palette
IntelliJとの比較
IntelliJを利用されたことのある方であれば、以下のような対応関係でイメージしやすいかと思います。
VSCode | IntelliJ |
---|---|
Quick Open | Search Everywhere |
Command Palette | Find Action |
完全に一致はしませんが、機能的に近い役割をしています。
Quick Open
⌘P
で Quick Open
が開きます。
ここで「目的のファイルを開く」「目的の行に移動」といった操作を行うことができます。
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-3_1.gif)
?
と入力するとhelpが表示され、どういった操作ができるのか確認できます。
参考
Command Palette
⇧⌘P
でCommand Palette
が開きます。
( Quick Open
を開いた後に >
を入力したのと同じです。)
VSCodeの各種コマンドを実行できます。
![](http://www.wakuwakubank.com/wp-content/uploads/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を導入
![](http://www.wakuwakubank.com/wp-content/uploads/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
カスタマイズ
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-5_0.jpg)
Settings
でVSCodeの基本設定を行えます。Keyboard Shortcuts
でショートカットの設定を行えます。
Settings
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-5_1.png)
User Settings
VSCode全体に適用される設定です。
Workspace Settings
Workspaceを開いたときにだけ適用される設定です。設定変更すると自動的に.vscodeフォルダ
が作成されて、そこに設定情報が格納されます。
設定情報は、他の人と同期することも可能です。
Settings Sync
参考
- settingsについて
- 設定ファイルの格納位置
- 言語固有の設定
Keyboard Shortcuts
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-5_2.png)
ショートカット割り当ての確認、変更、削除ができます。
参考
Git操作方法
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-git_1.png)
変更のあったファイルを確認できます。stageへ追加
commit
などの操作を行うことができます。
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-git_2-600x1024.jpg)
基本的な操作ができるようです。
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-git_3.gif)
Side Bar以外にもCommand Paletteから操作することもできます。
以下の操作をしています。
1. Command Paletteを開く
2. developブランチを作成する
3. Status Barのブランチをクリック
4. masterブランチに変更する
参考
- https://code.visualstudio.com/docs/introvideos/versioncontrol
- https://code.visualstudio.com/docs/editor/versioncontrol
自動保存の設定
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-6_1.png)
デフォルトだと自動保存されません。保存されていないファイルがある場合、ExplorerにてUNSAVED
と表示されます。
![](http://www.wakuwakubank.com/wp-content/uploads/494-tool-vscode-6_2.jpg)
自動保存するようにするには、[File] - [Auto Save]
にチェックをつけます。
参考
入門用の動画(https://code.visualstudio.com/docs/getstarted/introvideos)など役に立ちました。