Trabajo con WebStorm

6.1 Desglose del IDE

Vamos a ver qué es lo que tenemos aquí.

1. Árbol de carpetas y archivos de tu proyecto:

Aquí se muestra el contenido de la carpeta de nuestro proyecto — web-storm-10.

He creado un archivo a propósito, para que sea más claro cómo está organizado todo. En la siguiente lección también harás todo esto.

2. Archivo actualmente abierto:

Es simplemente el contenido del archivo index.html, donde la sintaxis del código está resaltada.

3. Arriba ves el menú principal:

Botones útiles arriba a la derecha:

• «Triángulo verde» — botón para iniciar el proyecto
• «Escarabajo» — botón para iniciar el modo de depuración
• «Lupa» — búsqueda en el proyecto
• «Engranaje» — ajustes

4. A la izquierda ves el menú lateral:

Hay varios botones útiles aquí. Nos interesa especialmente el botón Terminal.

5. Barra de estado:

A la izquierda en la barra de estado se muestra la ruta del archivo actualmente abierto. A la derecha su codificación: CRLF, UTF-8. Pronto serás un experto en todo esto.

6.2 Desglose del proyecto

1. Archivos HTML.

Estos archivos tienen la extensión .html, y WebStorm los marca con un ícono verde de dos flechas. Aquí solo hay un archivo de este tipo — index.html

Estos archivos tienen la extensión .js, y WebStorm los marca con un ícono amarillo. Actualmente no hay archivos de este tipo en la imagen.

2. Archivos CSS con estilos.

Estos archivos tienen la extensión .css, y WebStorm los marca con un ícono azul. Actualmente no hay archivos de este tipo en la imagen.

3. Archivos de medios estáticos. Así se llaman los archivos que contienen datos, pero no código. Pueden ser archivos de texto, imágenes, archivos de medios, etc. Actualmente no hay archivos de media en nuestro proyecto.

4. Librerías externas (External libraries). Actualmente no hay librerías en nuestro proyecto, pero cuando las descargues, WebStorm las mostrará aquí.

6.3 Trabajo con el terminal

En WebStorm puedes trabajar con la línea de comandos del SO directamente. En Linux y MacOS la línea de comandos comúnmente se llama Terminal, por eso en WebStorm se llama así también. Aunque en realidad no es un capricho de WebStorm, sino un término establecido entre programadores.

Para abrir el Terminal, tienes que hacer clic en el botón del terminal en el menú lateral:

Deberías ver una ventana como esta:

En esta ventana puedes escribir comandos para tu sistema operativo. Nos interesa uno de ellos.

Vamos a ver la versión actual de Windows. Para ello necesitas escribir:

    
      ver
    
  

Esto es lo que obtuve:

Si tienes un error, primero escribe el comando «cmd», y luego el comando «ver».

6.4 ¿Qué es el plugin CodeGym y para qué sirve?

Es una aplicación, un módulo especial que se integra en el entorno de desarrollo Intellij IDEA o WebStorm y te permite trabajar en él con las tareas del curso CodeGym. Por ejemplo, escribir código de solución, enviarlo a verificación, comparar tu solución con la "por defecto" y mucho más. El progreso en la resolución de tareas en el plugin se sincroniza con tu cuenta en CodeGym, por lo que se verá igual tanto en el sitio web como en el entorno de desarrollo.

Puedes descargar el plugin CodeGym desde el marketplace de Jetbrains, directamente en tu entorno de desarrollo. A continuación, te mostraremos los pasos usando WebStorm como ejemplo, pero los mismos pasos se aplican también a Intellij IDEA.

1. Ve a la sección "Configuración", Windows/Linux File - Settings, MacOS WebStorm - Preferences. Si no hay sección de configuración, abre cualquier proyecto o crea uno nuevo.

2. En la ventana que aparece, en el menú lateral, elige la sección Plugins y abre la pestaña Marketplace. En la barra de búsqueda escribe codegym

3. Selecciona el plugin y haz clic en el botón Install.
4. Reinicia (Restart IDE) WebStorm para comenzar a trabajar con el plugin.
5. Verás una interfaz ligeramente modificada y un botón Iniciar sesión en la barra horizontal superior.

Al hacer clic se abrirá una ventana para iniciar sesión en tu cuenta, donde debes introducir tu clave secreta:

Recordemos que puedes encontrar tu clave secreta en la sección “Configuración” → “Seguridad e inicio de sesión”.

Después de iniciar sesión, comenzará la carga del proyecto y el Codegym SDK (no cambies a otra versión).

6. Para abrir una nueva tarea, haz clic en Tasks en el panel vertical izquierdo, luego en la tarjeta de tarea en el panel lateral izquierdo, y en la ventana emergente haz clic en Abrir:

7. Se abrió una ventana con dos pestañas frente a ti. Una con la condición, otra para ingresar el código.
8. Ahora escribe la solución del problema y haz clic en el botón Comprobar

Instalación manual del plugin

1. Descargar plugin
2. Ve a la sección "Configuración", Windows/Linux File - Settings, MacOS WebStorm - Preferences.
3. En la ventana que aparece, en el menú lateral, elige la sección Plugins y haz clic en el engranaje (⚙️) y elige «Install Plugins from disk»
4. Abre la carpeta donde está el plugin. Selecciónalo (archivo) y haz clic en OK Restart IDE).

¡El plugin está instalado! Ahora puedes resolver tareas.

Sincronización de tareas sitio — plugin

La lista de tareas y sus estados se actualiza automáticamente, cada cinco minutos o después de enviar cualquier tarea para verificación (servidor codegym).

Por lo tanto, si resuelves una tarea en el sitio, en el plugin también aparecerá en la lista de tareas resueltas. Si necesitas actualizar la información sobre los estados de las tareas ahora mismo, haz clic en tu avatar (arriba a la derecha), y en el menú desplegable elige Sincronizar tareas:

Modo principiante en el plugin

Es una versión simplificada para aquellos usuarios que no tienen (o tienen poca) experiencia trabajando con WebStorm y otros entornos de desarrollo. Oculta algunas funciones de WebStorm. Para desactivar este modo, haz clic en tu avatar (arriba a la derecha), y en el menú desplegable selecciona Configuraciones:

Cómo ocultar el panel de navegación del plugin en el modo PRO

Haz clic en Configuraciones (⚙️) y desmarca la opción "Mostrar panel de navegación del plugin":