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.

  1. Ir al menú Archivo en VScode.
  2. Haga clic en el menú Abrir carpeta dentro de archivo.
  3. 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:

  1. Ir al menú de depuración .

  2. 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



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow