ionic2
Instalacja i debugowanie Ionic 2 w Visual Studio Code
Szukaj…
Wprowadzenie
Visual Studio jest otwartym środowiskiem IDE, które zapewnia inteligentne narzędzie do edycji i edycji kodu. IDE obsługuje wiele języków, takich jak (Ionic, C, C #, AngularJs, TypeScript, Android i tak dalej). Te języki są w stanie wykonać tam kod, dodając jego rozszerzenia w VSCode. Korzystając z VSCode, możemy uruchamiać i debugować kod różnych języków.
Instalacja VSCode
Najpierw musisz pobrać i zainstalować VSCode. Ta najnowsza wersja VSCode jest dostępna do pobrania na swojej oficjalnej stronie internetowej . Po pobraniu VSCode powinieneś go zainstalować i otworzyć.
Introduction of Extensions in VSCode
VSCode jest otwartym edytorem, więc zapewnia edytor dla wszystkich języków, ale aby wykonać kod, musisz dodać rozszerzenie dla tego konkretnego języka. Do uruchamiania i edycji kodu jonowego należy dodać rozszerzenie ionic2-vscode do kodu VSCode. Po lewej stronie edytora VSCode znajduje się 5 ikon, w których dla rozszerzenia używana jest najniższa ikona. Rozszerzenia, które możesz uzyskać za pomocą klawisza skrótu (ctrl + shift + X) .
Add Extension for Ionic2 in VsCode
Naciskając klawisze Ctrl + Shift + X pokazałeś część rozszerzenia, w której u góry pokazano trzy kropki ... kropki te są znane jako więcej ikon. Po kliknięciu tego okna dialogowego jest otwarte i pokazuje liczbę opcji do wyboru. Możesz wybierz opcję zgodnie z potrzebą, ale aby uzyskać wszystkie rozszerzenia, wybierz Pokaż zalecane rozszerzenie. Na liście wszystkich rozszerzeń, w których możesz zainstalować swoje rozszerzenie (ionic2-vscode),npm
Utwórz i dodaj swój projekt jonowy w VSCode
VsCode nie może utworzyć projektu jonowego, ponieważ jest to edytor kodu, więc możesz utworzyć swój projekt jonowy za pomocą CLI lub cmd . utwórz projekt za pomocą poniższego polecenia
$ ionic start appName blank
Powyższe polecenie służy do tworzenia pustego szablonu aplikacji jonowej. Ionic2 zapewnia trzy typy pustych szablonów , tabulatory i sidemenu . Więc. możesz zastąpić pusty szablon dowolnymi dwoma innymi szablonami zgodnie z potrzebami.
Teraz Twój projekt Ionic został utworzony. Możesz więc dodać swój projekt w VSCode do edycji. Aby dodać swój projekt, postępuj zgodnie z poniższymi punktami.
- Przejdź do menu Plik w VScode.
- Kliknij menu Otwórz folder w menu Plik.
- Znajdź i otwórz folder projektu.
Możesz bezpośrednio otworzyć folder za pomocą klawisza skrótu ctrl + O lub ctrl + k
`
Uruchom i debuguj swój projekt Ionic
> Uruchom i debuguj w Chrome
Aby uruchomić projekt jonowy, użyj poniższej komendy w terminalu, cmd lub CLI
$ ionic serve
W celu debugowania projektu jonowego Najpierw należy dodać rozszerzenie (Debugger dla chrome), a następnie skonfigurować plik launch.json w ten sposób.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Uruchom i debuguj w Androidzie
W przypadku projektu Run ionic w systemie Android należy dodać platformę Android, wykonując poniższe polecenie w terminalu, cmd lub CLI:
$ ionic cordova platform add android
Zbuduj Androida za pomocą tego polecenia
$ ionic cordova build android
Uruchom polecenie dla platformy Android
$ ionic cordova run android
Teraz Twoja aplikacja działa na prawdziwym urządzeniu z Androidem.
W celu debugowania na urządzeniu z Androidem musisz dodać Cordova lub rozszerzenie Android w VSCode. i skonfiguruj plik launch.json w ten sposób.
{
"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}"
}
]
}
Po konfiguracji wykonaj następujące kroki lub krótkie klawisze do debugowania:
Przejdź do menu debugowania .
Kliknij rozpocznij debugowanie .
lub
Short keys
Debugowanie - F5
StepOver - F10
Wejdź i wyjdź - F11
Zatrzymaj debugowanie - Shift + F5
Uruchom ponownie debugowanie -ctrl + shift_F5