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.

  1. Przejdź do menu Plik w VScode.
  2. Kliknij menu Otwórz folder w menu Plik.
  3. 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:

  1. Przejdź do menu debugowania .

  2. Kliknij rozpocznij debugowanie .

    lub

Short keys
  • Debugowanie - F5

  • StepOver - F10

  • Wejdź i wyjdź - F11

  • Zatrzymaj debugowanie - Shift + F5

  • Uruchom ponownie debugowanie -ctrl + shift_F5



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow