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 Angular y TypeScript. Ideal para seguir al inicio del curso.

---

1. Instalación de las herramientas base

1.1. Instalar Node.js y npm

Se abre una terminal (Ctrl+Alt+T) y se ejecuta:

sudo apt update
sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

Se verifica que se haya instalado correctamente:

node -v
npm -v

Se deberían ver números de versión (por ejemplo v23.x.x y 11.x.x).

---

1.2. Instalar Angular CLI y entorno ts

Para poder ejecutar archivos ts independientes es necesario instalar un paquete de npm:

npm install -g tsx

Para poder ejecutar los archivos es necesario ejecutar:

npx tsx mostrarRecursos.ts

Para lanzar Angular no es necesario.

Angular se gestiona principalmente mediante su CLI oficial:

npm install -g @angular/cli

Verifica la instalación:

ng version

---

1.3. Instalar Visual Studio Code

Se puede descargar el paquete de la web oficial o bien se deben ejecutar los siguientes comandos en la terminal:

sudo apt update
sudo apt install -y wget gpg
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /usr/share/keyrings/
sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install -y code

Después se podrá abrir VS Code desde el menú o con:

code .

Este comando abre VS Code en la carpeta desde la que se ejecuta.

---

2. Configuración inicial de VS 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.
3. Instálalo.
4. Reinicia VS Code.

---

2.2. Activar el guardado automático

• 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
• Tema de iconos

Recomendaciones:

• Tema: Dark+ o One Dark Pro
• Iconos: Material Icon Theme

---

3. Extensiones recomendadas para Angular y TypeScript

Abre Extensiones (Ctrl+Shift+X) e instala:

Extensión	Descripción	Autor
Angular Language Service	Autocompletado y validación de templates Angular	Angular
TypeScript Importer	Autoimportaciones en TS	pmneo
ESLint	Análisis y corrección de código TypeScript	Microsoft
Prettier - Code formatter	Formateo automático	Prettier
Path Intellisense	Autocompletado de rutas	Christian Kohler
Angular Snippets	Snippets para componentes, servicios, módulos, etc.	John Papa
npm Intellisense	Autocompletado de dependencias npm	Christian Kohler
GitLens	Información avanzada de Git	GitKraken

---

4. Configuración recomendada (settings.json)

1. Ctrl+Shift+P
2. Preferencias: Abrir configuración (JSON)
3. Añade o ajusta el siguiente bloque:

{
  // ... configuración previa
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "onWindowChange",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "eslint.validate": [
    "typescript",
    "typescriptreact",
    "html"
  ],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.trailingComma": "es5",
  "prettier.tabWidth": 2
}

Si algún valor está duplicado, elimina uno de ellos para evitar advertencias.

---

Ejemplo de uso

Antes de guardar un archivo .ts:

const mensaje:string='Hola Mundo'
console.log(mensaje)

Después de guardar:

const mensaje: string = 'Hola Mundo'
console.log(mensaje)

El formateo se aplica solo al guardado manual, no con autoguardado.

---

5. Crear snippets personalizados para Angular

5.1. Crear un snippet

1. Ctrl+Shift+P
2. Fragmentos de código: Configurar fragmentos de usuario
3. Elige TypeScript
4. Añade el siguiente ejemplo:

{
  "ngcomp": {
    "prefix": "ngcomp",
    "body": [
      "import { Component } from '@angular/core';",
      "",
      "@Component({",
      "  selector: 'app-${1:nombre}',",
      "  templateUrl: './${1:nombre}.component.html',",
      "  styleUrls: ['./${1:nombre}.component.scss']",
      "})",
      "export class ${2:Nombre}Component {",
      "  constructor() {}",
      "}"
    ],
    "description": "Crea un componente Angular básico"
  }
}

Ejemplo de uso: En un archivo .ts, escribe ngcomp → Tab → se genera el componente.

---

6. Atajos de teclado esenciales (Cheat Sheet)

Acción	Atajo (Windows / Linux)
Paleta de comandos	Ctrl+Shift+P
Atajos de teclado	Ctrl+K Ctrl+S
Abrir terminal integrada	Ctrl+`
Formatear documento	Ctrl+Shift+I
Ir a definición	F12
Buscar archivos	Ctrl+P
Múltiples cursores	Alt + Click
Seleccionar siguiente coincidencia	Ctrl+D
Comentar línea	Ctrl + /
Mover línea	Alt + ↑ / ↓
Abrir configuración	Ctrl + ,

---

7. Uso básico Angular CLI

Angular CLI + VS Code

• Crear componentes rápidamente:

  ng generate component usuarios

• Crear servicios:

  ng generate service auth

Integración con Git

• Vista de control de código fuente
• Commits directamente desde VS Code
• GitLens permite ver historial y autores por línea