ionic2
Configuración y depuración de Ionic 2 en Visual Studio Code
Buscar..
Introducción
Visual Studio es un IDE de código abierto que proporciona una función inteligente y de edición para el código. Este IDE es compatible con muchos idiomas como (Ionic, C, C #, AngularJs, TypeScript, Android, etc.). Estos lenguajes pueden ejecutar código allí agregando sus Extensiones en VSCode. Al utilizar VSCode, podemos ejecutar y depurar el código de diferentes idiomas.
Instalación de VSCode
Primero necesitas descargar e instalar el VSCode. Esta última versión de VSCode está disponible para descargar en su sitio web oficial . Después de descargar el VSCode debes instalarlo y abrirlo.
Introduction of Extensions in VSCode
VSCode es un editor abierto, por lo que proporciona un editor para todos los idiomas, pero para ejecutar el código que necesita para agregar la Extensión para ese idioma en particular. Para ejecutar y editar su código iónico, debe agregar la Extensión ionic2-vscode en suVSCode. En el lado izquierdo de VSCode Editor hay 5 iconos en los que el icono más bajo se usa para la Extensión. Las Extensiones que puede obtener usando la tecla de acceso directo (ctrl + shift + X) .
Add Extension for Ionic2 in VsCode
Al presionar ctrl + shift + X, se muestra la parte de la extensión donde se muestran los tres puntos superiores ... estos puntos se conocen como más ícono. Al hacer clic, se abre un cuadro de diálogo que muestra el número de opciones a elegir. elija la opción según su necesidad, pero para obtener toda la extensión, debe seleccionar la Extensión recomendada mostrada. En la lista de todas las eXtensiones puede instalar su Extensión (ionic2-vscode),npm
Crea y agrega tu proyecto jónico en VSCode
VsCode no puede crear el proyecto iónico porque es un editor de código. Por lo tanto, puede crear su proyecto iónico mediante CLI o cmd . Crea tu proyecto por debajo del comando
$ ionic start appName blank
El comando anterior se usa para crear una aplicación iónica de plantilla en blanco. Ionic2 proporciona tres tipos de plantillas en blanco, pestañas y sidemenu . Asi que. puede reemplazar la plantilla en blanco por cualquiera de las otras dos plantillas según su necesidad.
Ahora, tu proyecto jónico ha sido creado. Por lo tanto, puedes agregar tu proyecto en VSCode para editarlo. Para agregar su proyecto siga los puntos a continuación.
- Ir al menú Archivo en VScode.
- Haga clic en el menú Abrir carpeta dentro de archivo.
- Encuentra y abre la carpeta de tu proyecto.
Puede abrir la carpeta directamente usando la tecla de acceso directo Ctrl + O o Ctrl + K
`
Ejecuta y depura tu proyecto jónico
> Ejecutar y depurar en Chrome
Para ejecutar el proyecto iónico, utilice el comando siguiente en terminal o cmd o CLI
$ ionic serve
Para depurar el proyecto iónico, primero debe agregar la extensión (Debugger for chrome) y luego configurar el archivo launch.json como este.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Ejecutar y depurar en Android
Para ejecutar el proyecto iónico en Android, debe agregar la plataforma Android mediante el comando siguiente en terminal o cmd o CLI:
$ ionic cordova platform add android
Construye Android con este comando
$ ionic cordova build android
Ejecutar el comando para la plataforma Android
$ ionic cordova run android
Ahora, su aplicación se ejecuta en un dispositivo Android real.
Para la depuración en el dispositivo Android, debe agregar Cordova o la extensión de Android en VSCode. y configurar el archivo launch.json como este.
{
"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}"
}
]
}
Después de la configuración, siga los siguientes pasos o claves breves para la depuración:
Ir al menú de depuración .
Haga clic en iniciar depuración .
o
Short keys
Depuración - F5
Paso a paso - F10
Entrar y salir - F11
Detener depuración - Shift + F5
Reinicie la depuración -ctrl + shift_F5