Skip to content

GitLab

Modulo 0 · Changes

Page history
adaptacion sin revision a typescript authored by imunnic's avatar imunnic
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 96 deletions
Modulo-0.md
View page @ bd3be2ea
# 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”**
- Iconos recomendados: **Material Icon Theme**
Recomendaciones:
* 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)**
y busca las siguientes:
Abre **Extensiones (Ctrl+Shift+X)** e instala:
| Extensión | Descripción | Autor |
| ---------------------------------- | ------------------------------------------ | --------------------- |
| **Vue (Official)** | Soporte completo para Vue 3 | Vue |
| **ESLint** | Detecta y corrige errores de estilo JS/Vue | Microsoft |
| **Prettier-Code formatter** | Formateador automático | Prettier |
| **Path Intellisense** | Autocompletado de rutas de archivos | Christian Kohler |
| **JavaScript (ES6) code snippets** | Snippets de JS moderno | charalampos karypidis |
| **Vue VSCode Snippets** | Snippets específicos para Vue 3 | hollowtree |
| **Auto Import - ES6 & TS** | Autocompletado de importaciones | Martin Oppitz |
| **npm Intellisense** | Autocompleta paquetes instalados | Christian Kohler |
| 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. Abre la paleta de comandos (`Ctrl+Shift+P`).
2. Escribe **“Preferencias: Abrir configuración (JSON)”**.
3. Copia y pega el siguiente bloque:
1. `Ctrl+Shift+P`
2. **Preferencias: Abrir configuración (JSON)**
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",
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
},
"eslint.validate": ["javascript", "javascriptreact", "vue"],
"typescript.updateImportsOnFileMove.enabled": "always",
"eslint.validate": [
"typescript",
"typescriptreact",
"html"
],
"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.
Por ejemplo:
### Ejemplo de uso
Antes de guardar:
Antes de guardar un archivo `.ts`:
```js
const mensaje='Hola Mundo'
```ts
const mensaje:string='Hola Mundo'
console.log(mensaje)
```
Después de guardar:
```js
const mensaje = 'Hola Mundo';
console.log(mensaje);
```ts
const mensaje: string = 'Hola Mundo'
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`
2. Escribe **“Fragmentos de código: Configurar fragmentos de usuario”**
3. Elige **JavaScript** o **Vue**
1. `Ctrl+Shift+P`
2. **Fragmentos de código: Configurar fragmentos de usuario**
3. Elige **TypeScript**
4. Añade el siguiente ejemplo:
```json
"Componente Vue 3 setup": {
"prefix": "vue3comp",
{
"prefix": "ngcomp",
"body": [
"<template>",
" <div class=\"${1:contenedor}\">$2</div>",
"</template>",
"",
"<script setup>",
"import { ref } from 'vue'",
"import { Component } from '@angular/core';",
"",
"const mensaje = ref('Hola desde ${1:contenedor}')",
"</script>",
"",
"<style scoped>",
".$1 {",
" padding: 1rem;",
"}",
"</style>"
"@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 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) |
| --------------------------------------- | ----------------------- |
| Paleta de comandos | `Ctrl+Shift+P` |
| Shortcuts | `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` |
| Selección múltiple hacia arriba o abajo | `Shift + Alt + ↓` |
| Comentar línea | `Ctrl + /` |
| Copiar línea | `Ctrl + c` |
| Mover línea | `Alt + ↑ / ↓` |
| Abrir configuración | `Ctrl + ,` |
| 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. 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
"emmet.includeLanguages": { "vue": "html" }
```
```bash
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)**.
- Crea commits directamente desde VS Code.
- Instala la extensión **GitLens** para ver quién modificó cada línea.
* Vista de control de código fuente
* Commits directamente desde VS Code
* **GitLens** permite ver historial y autores por línea
\ No newline at end of file