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

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:

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:

{
  "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)

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