imunnic · bd3be2ea
Hide whitespace changes
Inline Side-by-side

Showing with 117 additions and 96 deletions

Modulo-0.md Modulo-0.md +117 -96

No files found.
--- a/Modulo-0.md
+++ b/Modulo-0.md
-# Configuración de Visual Studio Code para trabajar con **JavaScript y Vue 3**
+# Configuración de Visual Studio Code para trabajar con **TypeScript y Angular**
-> Guía paso a paso para preparar tu entorno de desarrollo y trabajar de forma ágil con **Vue 3** y **JavaScript moderno**.
+> Guía paso a paso para preparar tu entorno de desarrollo y trabajar de forma ágil con **Angular** y **TypeScript**.
 > Ideal para seguir al inicio del curso.
 ---
@@ -9,7 +9,7 @@
 ### 1.1. Instalar Node.js y npm
-Abrimos una **terminal** (`Ctrl+Alt+T`) y ejecutamos:
+Se abre una **terminal** (`Ctrl+Alt+T`) y se ejecuta:
 ```bash
 sudo apt update
@@ -18,20 +18,36 @@ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
 sudo apt install -y nodejs
 ```
-Verificamos que se haya instalado correctamente:
+Se verifica que se haya instalado correctamente:
 ```bash
 node -v
 npm -v
 ```
-Deberías ver números de versión (por ejemplo `v20.x.x` y `9.x.x`).
+Se deberían ver números de versión (por ejemplo `v23.x.x` y `11.x.x`).
 ---
-### 1.2. Instalar Visual Studio Code
+### 1.2. Instalar Angular CLI
-Ejecuta los siguientes comandos en la terminal:
+Angular se gestiona principalmente mediante su **CLI oficial**:
+```bash
+npm install -g @angular/cli
+```
+Verifica la instalación:
+```bash
+ng version
+```
+---
+### 1.3. Instalar Visual Studio Code
+Se puede descargar el paquete de la [web oficial](https://go.microsoft.com/fwlink/?LinkID=760868) o bien se deben ejecutar los siguientes comandos en la terminal:
 ```bash
 sudo apt update
@@ -43,11 +59,12 @@ sudo apt update
 sudo apt install -y code
 ```
-Después podrás abrir VS Code desde el menú o con:
+Después se podrá abrir VS Code desde el menú o con:
 ```bash
 code .
 ```
+Este comando abre VS Code en la carpeta desde la que se ejecuta.
 ---
@@ -56,60 +73,69 @@ code .
 ### 2.1. Cambiar idioma a español
 1. Abre el **Marketplace de Extensiones (Ctrl+Shift+X)**.
-2. Busca **“Spanish Language Pack for Visual Studio Code”**.
+2. Busca **Spanish Language Pack for Visual Studio Code**.
 3. Instálalo.
-4. Reinicia VS Code y el idioma estará en español.
+4. Reinicia VS Code.
+---
 ### 2.2. Activar el guardado automático
- Abre **Archivo → Guardado automático**, o presiona `Ctrl+Shift+P` → escribe `Autoguardado` (`Auto Save` si está en inglés) y actívalo.
+* Menú **Archivo → Guardado automático**, o
+* `Ctrl+Shift+P` → escribe **Autoguardado** y actívalo.
+---
 ### 2.3. Ajustar la apariencia
-Presiona `Ctrl+Shift+P` y escribe `Tema de color` y `Tema de icono`
+Presiona `Ctrl+Shift+P` y escribe:
+* **Tema de color**
+* **Tema de iconos**
- Tema recomendado: **“Dark+”** o **“One Dark Pro”**
+Recomendaciones:
- Iconos recomendados: **Material Icon Theme**
+* Tema: **Dark+** o **One Dark Pro**
+* Iconos: **Material Icon Theme**
 ---
-## 3. Extensiones recomendadas
+## 3. Extensiones recomendadas para Angular y TypeScript
-Abre la **barra lateral izquierda → Extensiones (Ctrl+Shift+X)**
+Abre **Extensiones (Ctrl+Shift+X)** e instala:
-y busca las siguientes:
-| Extensión                          | Descripción                                | Autor                 |
+| Extensión                     | Descripción                                         | Autor            |
-| ---------------------------------- | ------------------------------------------ | --------------------- |
+| ----------------------------- | --------------------------------------------------- | ---------------- |
-| **Vue (Official)**                 | Soporte completo para Vue 3                | Vue                   |
+| **Angular Language Service**  | Autocompletado y validación de templates Angular    | Angular          |
-| **ESLint**                         | Detecta y corrige errores de estilo JS/Vue | Microsoft             |
+| **TypeScript Importer**       | Autoimportaciones en TS                             | pmneo            |
-| **Prettier-Code formatter**        | Formateador automático                     | Prettier              |
+| **ESLint**                    | Análisis y corrección de código TypeScript          | Microsoft        |
-| **Path Intellisense**              | Autocompletado de rutas de archivos        | Christian Kohler      |
+| **Prettier - Code formatter** | Formateo automático                                 | Prettier         |
-| **JavaScript (ES6) code snippets** | Snippets de JS moderno                     | charalampos karypidis |
+| **Path Intellisense**         | Autocompletado de rutas                             | Christian Kohler |
-| **Vue VSCode Snippets**            | Snippets específicos para Vue 3            | hollowtree            |
+| **Angular Snippets**          | Snippets para componentes, servicios, módulos, etc. | John Papa        |
-| **Auto Import - ES6 & TS**         | Autocompletado de importaciones            | Martin Oppitz         |
+| **npm Intellisense**          | Autocompletado de dependencias npm                  | Christian Kohler |
-| **npm Intellisense**               | Autocompleta paquetes instalados           | Christian Kohler      |
+| **GitLens**                   | Información avanzada de Git                         | GitKraken        |
 ---
 ## 4. Configuración recomendada (`settings.json`)
-1. Abre la paleta de comandos (`Ctrl+Shift+P`).
+1. `Ctrl+Shift+P`
-2. Escribe **“Preferencias: Abrir configuración (JSON)”**.
+2. **Preferencias: Abrir configuración (JSON)**
-3. Copia y pega el siguiente bloque:
+3. Añade o ajusta el siguiente bloque:
 ```json
 {
-  //... contenido anterior del json
+  // ... configuración previa
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "onWindowChange",
-  "javascript.updateImportsOnFileMove.enabled": "always",
+  "typescript.updateImportsOnFileMove.enabled": "always",
-  "emmet.includeLanguages": {
+  "eslint.validate": [
-    "vue-html": "html",
+    "typescript",
-    "vue": "html"
+    "typescriptreact",
-  },
+    "html"
-  "eslint.validate": ["javascript", "javascriptreact", "vue"],
+  ],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.trailingComma": "es5",
@@ -117,103 +143,98 @@ y busca las siguientes:
 }
 ```
-Si hay algún elemento repetido, lo habitual es que se muestre con un _warn_, se debe eliminar uno de los elementos (el que estuviera previamente).
+Si algún valor está duplicado, elimina uno de ellos para evitar advertencias.
-### Ejemplo de uso
+---
-Cuando guardes un archivo `.vue` o `.js`, el código se **formateará automáticamente** según las reglas de Prettier y ESLint.
+### Ejemplo de uso
-Por ejemplo:
-Antes de guardar:
+Antes de guardar un archivo `.ts`:
-```js
+```ts
-const mensaje='Hola Mundo'
+const mensaje:string='Hola Mundo'
 console.log(mensaje)
 ```
 Después de guardar:
-```js
+```ts
-const mensaje = 'Hola Mundo';
+const mensaje: string = 'Hola Mundo'
-console.log(mensaje);
+console.log(mensaje)
 ```
-No funciona con el autoguardado, debe hacerse el guardado manual para que se aplique el formateo.
+El formateo se aplica **solo al guardado manual**, no con autoguardado.
 ---
-## 5. Crear snippets personalizados
+## 5. Crear snippets personalizados para Angular
-### 5.1. Cómo crear un snippet
+### 5.1. Crear un snippet
-1. Pulsa `Ctrl+Shift+P`
+1. `Ctrl+Shift+P`
-2. Escribe **“Fragmentos de código: Configurar fragmentos de usuario”**
+2. **Fragmentos de código: Configurar fragmentos de usuario**
-3. Elige **JavaScript** o **Vue**
+3. Elige **TypeScript**
 4. Añade el siguiente ejemplo:
 ```json
-"Componente Vue 3 setup": {
+{
-  "prefix": "vue3comp",
+  "prefix": "ngcomp",
  "body": [
-    "<template>",
+    "import { Component } from '@angular/core';",
-    "  <div class=\"${1:contenedor}\">$2</div>",
-    "</template>",
-    "",
-    "<script setup>",
-    "import { ref } from 'vue'",
    "",
-    "const mensaje = ref('Hola desde ${1:contenedor}')",
+    "@Component({",
-    "</script>",
+    "  selector: 'app-${1:nombre}',",
-    "",
+    "  templateUrl: './${1:nombre}.component.html',",
-    "<style scoped>",
+    "  styleUrls: ['./${1:nombre}.component.scss']",
-    ".$1 {",
+    "})",
-    "  padding: 1rem;",
+    "export class ${2:Nombre}Component {",
-    "}",
+    "  constructor() {}",
-    "</style>"
+    "}"
  ],
-  "description": "Crea un componente base de Vue 3 con setup()"
+  "description": "Crea un componente Angular básico"
 }
 ```
 **Ejemplo de uso:**
-En un archivo nuevo `.vue`, escribe `vue3comp` → presiona **Tab**, y se generará automáticamente la plantilla del componente.
+En un archivo `.ts`, escribe `ngcomp` → **Tab** → se genera el componente.
 ---
 ## 6. Atajos de teclado esenciales (Cheat Sheet)
-| Acción                                  | Atajo (Windows / Linux) |
+| Acción                             | Atajo (Windows / Linux) |
-| --------------------------------------- | ----------------------- |
+| ---------------------------------- | ----------------------- |
-| Paleta de comandos                      | `Ctrl+Shift+P`          |
+| Paleta de comandos                 | `Ctrl+Shift+P`          |
-| Shortcuts                               | `Ctrl + k Ctrl S`       |
+| Atajos de teclado                  | `Ctrl+K Ctrl+S`         |
-| Abrir terminal integrada                | `` Ctrl+` ``            |
+| Abrir terminal integrada           | ``Ctrl+` ``             |
-| Formatear documento                     | `Ctrl+Shift+I`          |
+| Formatear documento                | `Ctrl+Shift+I`          |
-| Ir a definición                         | `F12`                   |
+| Ir a definición                    | `F12`                   |
-| Buscar archivos                         | `Ctrl+P`                |
+| Buscar archivos                    | `Ctrl+P`                |
-| Múltiples cursores                      | `Alt+Click`             |
+| Múltiples cursores                 | `Alt + Click`           |
-| Seleccionar siguiente coincidencia      | `Ctrl+d`                |
+| Seleccionar siguiente coincidencia | `Ctrl+D`                |
-| Selección múltiple hacia arriba o abajo | `Shift + Alt + ↓`       |
+| Comentar línea                     | `Ctrl + /`              |
-| Comentar línea                          | `Ctrl + /`              |
+| Mover línea                        | `Alt + ↑ / ↓`           |
-| Copiar línea                            | `Ctrl + c`              |
+| Abrir configuración                | `Ctrl + ,`              |
-| Mover línea                             | `Alt + ↑ / ↓`           |
-| Abrir configuración                     | `Ctrl + ,`              |
 ---
-## 7. Tips de productividad
+## 7. Uso básico Angular CLI
-### Emmet en Vue
+### Angular CLI + VS Code
-Puedes usar abreviaturas HTML dentro de archivos `.vue` gracias a esta línea en `settings.json`:
+* Crear componentes rápidamente:
-```json
+  ```bash
-"emmet.includeLanguages": { "vue": "html" }
+  ng generate component usuarios
-```
+  ```
+* Crear servicios:
-Escribe `ul>li*3` + **Tab** → genera una lista automáticamente.
+  ```bash
+  ng generate service auth
+  ```
 ### Integración con Git
- Abre la **vista de control de código fuente (Ctrl+Shift+G)**.
+* Vista de control de código fuente
- Crea commits directamente desde VS Code.
+* Commits directamente desde VS Code
- Instala la extensión **GitLens** para ver quién modificó cada línea.
+* **GitLens** permite ver historial y autores por línea
\ No newline at end of file