ionic2
Visual StudioコードでのIonic 2のセットアップとデバッグ
サーチ…
前書き
Visual Studioは、Intellisenseとコードの編集機能を提供するオープンソースのIDEです。このIDEは、（Ionic、C、C＃、AngularJs、TypeScript、Androidなど）のような多くの言語をサポートしています。これらの言語は、VSCodeに拡張機能を追加することでコードを実行することができます。 VSCodeを使用することにより、異なる言語のコードを実行してデバッグすることができます。
VSCodeのインストール
まず、VSCodeをダウンロードしてインストールする必要があります。このVSCode最新バージョンは、 公式サイトでダウンロードできます。 VSCodeをダウンロードしたら、それをインストールして開く必要があります。
Introduction of Extensions in VSCode
VSCodeはオープンエディタなので、すべての言語のエディタを提供しますが、その特定の言語の拡張機能を追加するコードを実行します。イオンコードの実行と編集には、あなたのVSCodeにionic2-vscode Extensionを追加する必要があります。 VSCodeエディタの左側には、5つのアイコンがあり、アイコンのうち最も小さいアイコンが拡張機能のために使用されています。 ショートカットキー（ctrl + shift + X）を使用して取得できる拡張機能。
Add Extension for Ionic2 in VsCode
ctrl + shift + Xを押すと、上の3つのドットが表示される拡張部分が表示されます。これらのドットは、より多くのアイコンとして知られています。クリックすると、ダイアログが開き、選択するオプションの数が示されます。必要に応じてオプションを選択しますが、すべての拡張機能を取得するには、 推奨拡張機能を選択してください(ionic2-vscode),npm拡張機能(ionic2-vscode),npmインストールできるすべての拡張機能のリスト(ionic2-vscode),npm
VSCodeでIonicプロジェクトを作成して追加する
VsCodeはコードエディタであるため、イオンプロジェクトを作成できません.CLIまたはcmdを使用してイオンプロジェクトを作成できます。以下のコマンドでプロジェクトを作成する
$ ionic start appName blank
上のコマンドは空のテンプレートイオンアプリケーションを作成するために使用します。 Ionic2は3種類のテンプレートブランク、タブ、サイドメニューを提供します 。そう。空白のテンプレートは、必要に応じて他の2つのテンプレートと置き換えることができます。
今、あなたのIonicプロジェクトが作成されました。したがって、プロジェクトをVSCodeに追加して編集することができます。あなたのプロジェクトを追加するには以下の点に従ってください。
- VScodeのファイルメニューに移動します 。
- [ファイル内のフォルダを開く ]メニューをクリックします。
- プロジェクトフォルダを見つけて開きます。
ショートカットキーctrl + OまたはCtrl + kを使用してフォルダを直接開くことができます
`
実行し、あなたのイオンプロジェクトをデバッグする
> Chromeでの実行とデバッグ
イオンプロジェクトを実行するには、 ターミナルまたはcmdまたはCLIで以下のコマンドを使用します。
$ ionic serve
ionicプロジェクトをデバッグするには、まず、拡張機能（Debugger for chrome）を追加し、次にlaunch.jsonファイルをこのように設定する必要があります。
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Androidでの実行とデバッグ
AndroidでRun ionicプロジェクトを実行するには、端末またはcmdまたはCLIで以下のコマンドでAndroidプラットフォームを追加する必要があります：
$ ionic cordova platform add android
このコマンドでAndroidをビルドする
$ ionic cordova build android
アンドロイドプラットフォームのコマンドを実行する
$ ionic cordova run android
今、あなたのアプリケーションは、実際のAndroidデバイス上で実行されます。
Androidデバイスへのデバッグでは、VSCodeにCordovaまたはAndroid Extensionを追加する必要があります。このようなlaunch.jsonファイルを設定します。
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Android on device",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Run iOS on device",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "device",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Attach to running android on device",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Attach to running iOS on device",
"type": "cordova",
"request": "attach",
"platform": "ios",
"target": "device",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Run Android on emulator",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Run iOS on simulator",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "emulator",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Attach to running android on emulator",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Attach to running iOS on simulator",
"type": "cordova",
"request": "attach",
"platform": "ios",
"target": "emulator",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Serve to the browser (ionic serve)",
"type": "cordova",
"request": "launch",
"platform": "serve",
"cwd": "${workspaceRoot}",
"devServerAddress": "localhost",
"sourceMaps": true,
"ionicLiveReload": true
},
{
"name": "Simulate Android in browser",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "chrome",
"simulatePort": 8000,
"livereload": true,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Simulate iOS in browser",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "chrome",
"simulatePort": 8000,
"livereload": true,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
}
]
}
設定後、デバッグのために以下の手順またはショート・キーを実行します。
デバッグメニューに移動します。
[ デバッグ開始]をクリックします。
または
Short keys
デバッグ - F5
ステップオーバー - F10
ステップインとステップアウト - F11
デバッグを停止する - Shift + F5
デバッグを再開する-ctrl + shift_F5
