angular
ionic
VSCode

AngularやIonicでVSCodeでの開発効率をあげるAngular Switchの使い方

はじめに

Xcodeでヘッダファイルとソースコードを切り替えるのにショートカットがありますね。
Cmd + Ctrl + or

それをVSCodeでソースコードの.ts.htmlをささっと切り替えを行いたいですね。

インストール

https://marketplace.visualstudio.com/items?itemName=shinriyo.ionic-switch

ここへ遷移し、Installボタンを押下してインストールをしましょう。

設定

インストールをしたらcommand + Shift + P を押下すると、上方に枠が出てきますので、

Screen Shot 2018-03-29 at 1.43.46.png

>keybを入力すると、上に出て行きます。

以下のコマンドをキーバインドに設定しましょう。

 { "key": "cmd+ctrl+up", "command": "extension.ionSwitchHTML", "when": "editorTextFocus" },
    { "key": "cmd+ctrl+down", "command": "extension.ionSwitchTS", "when": "editorTextFocus" },

Screen Shot 2018-03-29 at 1.43.36.png

使用方法

例えばlist.htmlのファイルを開いた状態。

Screen Shot 2018-03-29 at 1.46.32.png

この状態で、
Cmd + Ctrl + を押下します。

するとパッとlist.tsのファイルにスイッチします。

Screen Shot 2018-03-29 at 1.46.37.png

逆にこの状態で、Cmd + Ctrl + を押下します。
すると、list.htmlにいけます。