ionic2
Installazione e debug di Ionic 2 in Visual Studio Code
Ricerca…
introduzione
Visual Studio è un IDE open source che fornisce funzionalità intellisense e di modifica per il codice. Questo IDE supporta molti linguaggi come (Ionic, C, C #, AngularJs, TypeScript, Android e così via). Questi linguaggi sono in grado di eseguire tale codice aggiungendo le sue estensioni in VSCode. Usando VSCode siamo in grado di eseguire ed eseguire il debug del codice di diverse lingue diverse.
Installazione di VSCode
In primo luogo è necessario scaricare e installare il VSCode. Questa ultima versione di VSCode è disponibile per il download nel suo sito Web ufficiale . Dopo aver scaricato il VSCode, devi installarlo e aprirlo.
Introduction of Extensions in VSCode
VSCode è un editor aperto in modo da fornire l'editor per tutte le lingue, ma per eseguire un codice è necessario aggiungere l'estensione per quella particolare lingua. Per eseguire e modificare il tuo codice ionico devi aggiungere l'estensione ionic2-vscode nel tuo VSCode. Nella parte sinistra di VSCode Editor ci sono 5 icone in cui viene utilizzata l'icona più bassa per l'estensione. Le estensioni che potresti ottenere usando il tasto di scelta rapida (ctrl + maiusc + X) .
Add Extension for Ionic2 in VsCode
Premendo ctrl + MAIUSC + X hai mostrato la parte dell'estensione in cui sono indicati i primi tre punti ... questi punti sono noti come più icone. Cliccando su di esso si apre una finestra di dialogo che mostra il numero di opzioni da scegliere. scegli l'opzione secondo le tue necessità ma per ottenere tutta l'estensione dovresti selezionare Mostra l'estensione consigliata .iN l'elenco di tutte le estensioni che potresti installare Extension (ionic2-vscode),npm
Crea e aggiungi il tuo progetto Ionic in VSCode
VsCode non è in grado di creare il progetto ionico perché è un editor di codice. Puoi creare il tuo progetto ionico tramite CLI o cmd . crea il tuo progetto con il comando di sotto
$ ionic start appName blank
Sopra comando utilizzare per creare un'applicazione ionica modello vuoto. Ionic2 fornisce tre tipi di modelli vuoti, tab e sidemenu . Così. puoi sostituire il modello vuoto con altri due modelli secondo le tue necessità.
Ora, il tuo progetto Ionic è stato creato. Quindi, puoi aggiungere il tuo progetto in VSCode per modificarlo. Per aggiungere il tuo progetto segui i seguenti punti.
- Vai al menu File in VScode.
- Fare clic sulla cartella Apri nel menu File.
- Trova e apri la cartella del tuo progetto.
È possibile aprire direttamente la cartella utilizzando il tasto di scelta rapida ctrl + O o ctrl + k
`
Esegui e fai il debug del tuo progetto ionico
> Esegui ed esegui il debug in Chrome
Per eseguire il progetto ionico utilizzare sotto il comando in terminale o cmd o CLI
$ ionic serve
Per eseguire il debug del progetto ionico, in primo luogo è necessario aggiungere un'estensione (Debugger per Chrome) e quindi configurare il file launch.json in questo modo.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Esegui ed esegui il debug in Android
Per il progetto Run ionic in Android è necessario aggiungere la piattaforma Android tramite il comando di sotto nel terminale o cmd o CLI:
$ ionic cordova platform add android
Costruisci Android con questo comando
$ ionic cordova build android
Esegui il comando per la piattaforma Android
$ ionic cordova run android
Ora, la tua applicazione funziona su un vero dispositivo Android.
Per eseguire il debug nel dispositivo Android è necessario aggiungere Cordova o Android Extension in VSCode. e configura il file launch.json in questo modo.
{
"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}"
}
]
}
Dopo la configurazione si seguono i seguenti passi o i tasti di scelta rapida per il debug:
Vai al menu di debug .
Fai clic su Avvia debug .
o
Short keys
Debugging - F5
StepOver - F10
Entrate e uscite - F11
Arresta il debugging - Maiusc + F5
Riavvia debug -ctrl + shift_F5