Características y compatibilidad mejorada con TypeScript - AWS Cloud9

AWS Cloud9 ya no está disponible para los nuevos clientes. Los clientes existentes de AWS Cloud9 pueden seguir utilizando el servicio con normalidad. Más información

Características y compatibilidad mejorada con TypeScript

El IDE de AWS Cloud9 le permite utilizar proyectos de lenguaje para acceder a características de productividad mejoradas para TypeScript. Un proyecto de lenguaje es un conjunto de carpetas, opciones de configuración y archivos relacionados del IDE de un entorno de desarrollo de AWS Cloud9.

Para utilizar el IDE para crear un proyecto de lenguaje en su entorno, consulte Creación de un proyecto de lenguaje.

Características de productividad de proyectos disponibles

El IDE de AWS Cloud9 proporciona las siguientes características de productividad de proyectos para TypeScript.

Autocompletar

A medida que escribe en un archivo en el editor, se muestra una lista de símbolos en el punto de inserción para ese contexto, si hay símbolos disponibles.

Para insertar un símbolo de la lista en el punto de inserción, si aún no se ha elegido un símbolo, use la flecha arriba o abajo para seleccionarlo y, a continuación, pulse Tab.

Antes de pulsar Tab, puede que vea una sugerencia en pantalla con información acerca del símbolo elegido, si hay información disponible.

Para cerrar la lista sin insertar un símbolo, pulse Esc.

Iconos de margen interior

Podrían aparecer iconos en el margen interior del archivo activo. Estos iconos resaltan posibles problemas como advertencias y errores en el código antes de ejecutarlo.

Para obtener más información acerca de un problema, detenga el puntero sobre el icono del problema.

Soluciones rápidas

En el archivo activo en el editor, puede mostrar información sobre errores y advertencias de codificación, con posibles correcciones que se aplicará automáticamente a dicho código. Para mostrar información de errores o advertencias y sus posibles correcciones, elija cualquier parte del código subrayado con una línea roja discontinua (para errores) o una línea gris discontinua (para advertencias). O bien, con el cursor sobre el código que tiene una línea roja o gris discontinua, pulse Option-Enter (para macOS) o Alt-Enter (para Linux o Windows). Para aplicar una solución propuesta, elija la solución en la lista o utilice las teclas de flecha para seleccionar la solución y, a continuación, pulse Enter. Para activar o desactivar la selección de soluciones rápidas mediante clics con el ratón, elija AWS Cloud9, Preferences (Preferencias), User Settings (Configuración del usuario), Language (Lenguaje), Hints & Warnings (Consejos y advertencias), Show Available Quick Fixes on Click (Mostrar las soluciones rápidas disponibles al hacer clic).

Buscar referencias

En el archivo activo en el editor, puede mostrar todas las referencias al símbolo en el punto de inserción, si el IDE tiene acceso a dichas referencias.

Para ello, en el punto de inserción en cualquier lugar dentro del símbolo, ejecute el comando Find References (Buscar referencias). Por ejemplo:

  • Haga clic con el botón derecho en el punto de inserción y, a continuación, elija Find References (Buscar referencias).

  • En la barra de menús, elija Go, Find References (Ir, Buscar referencias).

  • De forma predeterminada, pulse Shift-F3 para macOS, Windows o Linux.

Si hay referencias disponibles, se abrirá un panel en la parte superior del archivo activo, junto a ese símbolo. El panel contiene una lista de archivos en los que se hace referencia al símbolo. El panel muestra la primera referencia de la lista. Para mostrar otra referencia, elija esa referencia de la lista.

Para cerrar el panel, elija el icono de cierre (X) en el panel o pulse Esc.

El comando Find References (Buscar referencias) podría estar deshabilitado, o podría no funcionar según lo previsto, bajo las siguientes condiciones:

  • No hay ninguna referencia a ese símbolo en el proyecto del archivo activo.

  • El IDE no puede encontrar algunas o ninguna de las referencias de ese símbolo en el proyecto del archivo activo.

  • El IDE no tiene acceso a una o más ubicaciones donde se hace referencia al símbolo en el proyecto del archivo activo.

Ir a definición

En el archivo activo en el editor, puede ir de un símbolo al lugar donde se define el símbolo, si el IDE tiene acceso a dicha definición.

Para ello, en el punto de inserción en cualquier lugar dentro del símbolo, ejecute el comando Jump to Definition (Buscar referencias). Por ejemplo:

  • Haga clic con el botón derecho en el punto de inserción y, a continuación, elija Jump to Definition (Saltar a la definición).

  • En la barra de menús, elija Go, Jump to Definition (Ir, Saltar a la definición).

  • De forma predeterminada, pulse F3 para macOS, Windows o Linux.

Si la definición está disponible, el punto de inserción cambia a esa definición, incluso aunque la definición esté en un archivo independiente.

El comando Jump to Definition (Buscar referencias) podría estar deshabilitado, o podría no funcionar según lo previsto, bajo las siguientes condiciones:

  • El símbolo es un símbolo primitivo para ese lenguaje.

  • El IDE no puede encontrar la ubicación de la definición en el proyecto del archivo activo.

  • El IDE no tiene acceso a la ubicación de la definición en el proyecto del archivo activo.

Ir a símbolo

Puede ir a un símbolo específico dentro de un proyecto, de la siguiente manera.

  1. Para activar uno de los archivos del proyecto, ábralo en el editor. Si el archivo ya está abierto, elija su pestaña en el editor para activarlo.

  2. Ejecute el comando Go to Symbol (Ir a símbolo). Por ejemplo:

    • Elija el botón de ventana Go (Ir) (icono de lupa). En el cuadro Goto Anything (Ir a cualquier punto), escriba @ y, a continuación, comience a escribir el símbolo.

    • En la barra de menús, elija Go, Go To Symbol (Ir, Ir a símbolo). En la ventana Go (Ir), empiece a escribir el símbolo después de @.

    • Pulse Command-2 o, de forma predeterminada, Command-Shift-O para sistemas operativos macOS o, de forma predeterminada, Ctrl-Shift-O para Windows o Linux. En la ventana Go (Ir), empiece a escribir el símbolo después de @.

    Por ejemplo, para buscar todos los símbolos del proyecto denominados toString, comience a escribir @toString (o comience a escribir toString después de @, si @ ya se muestra).

  3. Si ve el símbolo que desea en la lista Symbols (Símbolos), haga clic en él para seleccionarlo. O bien use las flechas arriba o abajo para seleccionarlo y, a continuación, pulse Enter (Entrar). A continuación, el punto de inserción cambia a ese símbolo.

Si el símbolo al que desea ir no está en el proyecto del archivo activo, es posible que este procedimiento no funcione correctamente.

Creación de un proyecto de lenguaje

Utilice el siguiente procedimiento para crear un proyecto de lenguaje que funcionará con las características compatibles de productividad del proyecto en el IDE de AWS Cloud9.

nota

Le recomendamos que utilice características compatibles de productividad del proyecto en los archivos que forman parte de un proyecto de lenguaje. Aunque puede utilizar algunas características de productividad de proyecto en un archivo que no forma parte de un proyecto, las características podrían tener un comportamiento actuar con resultados inesperados.

Por ejemplo, puede utilizar el IDE para buscar las referencias y definiciones en un archivo en el nivel raíz de un entorno que no forma parte de un proyecto. Es posible que el IDE solo busque en los archivos situados en ese mismo nivel raíz. Esto podría provocar que no se encuentre ninguna referencia o definición, aunque esas referencias o definiciones existan realmente en proyectos de lenguaje en otros lugares del mismo entorno.

Creación de un proyecto de lenguaje de TypeScript

  1. Asegúrese de que tiene TypeScript instalado en el entorno. Para obtener más información, consulte Paso 1: Instalar las herramientas necesarias en la Tutorial de TypeScript para AWS Cloud9.

  2. Desde una sesión de terminal en el IDE del entorno, cambie al directorio en el que desea crear el proyecto. Si el directorio no existe, créelo y acceda a él. Por ejemplo, los siguientes comandos crean un directorio denominado my-demo-project en la raíz del entorno (en ~/environment) y, a continuación, cambia a dicho directorio.

    mkdir ~/environment/my-demo-project cd ~/environment/my-demo-project
  3. En la raíz del directorio en el que desea crear el proyecto, ejecute el compilador TypeScript con la opción --init.

    tsc --init

    Si este comando se realiza correctamente, el compilador TypeScript crea un archivo tsconfig.json en la raíz del directorio para el proyecto. Puede utilizar este archivo para definir varias configuración del proyecto, como, por ejemplo, las opciones del compilador TypeScript y archivos específicos que incluir o excluir del proyecto.

    Para obtener más información sobre el archivo tsconfig.json, consulte los siguientes temas: