Skip to content

GitLab

Modulo 0 · Changes

Page history
instalaciones iniciales authored by imunnic's avatar imunnic
Show whitespace changes
Inline Side-by-side
Showing with 214 additions and 0 deletions
Modulo-0.md 0 → 100644
View page @ 48e5c8af
# Configuración de Visual Studio Code para trabajar con **JavaScript y Vue 3**
> Guía paso a paso para preparar tu entorno de desarrollo y trabajar de forma ágil con **Vue 3** y **JavaScript moderno**.
> Ideal para seguir al inicio del curso.
---
## 1. Instalación de las herramientas base
### 1.1. Instalar Node.js y npm
Abrimos una **terminal** (`Ctrl+Alt+T`) y ejecutamos:
```bash
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
```
Verificamos 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`).
---
### 1.2. Instalar Visual Studio Code
Ejecuta los siguientes comandos en la terminal:
```bash
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 podrás abrir VS Code desde el menú o con:
```bash
code .
```
---
## 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 y el idioma estará en español.
### 2.2. Activar el guardado automático
- Abre **Archivo → Guardado automático**, o presiona `Ctrl+Shift+P` → escribe `Guardado automático` (`Auto Save` si está en inglés) y actívalo.
### 2.3. Ajustar la apariencia
Presiona `Ctrl+Shift+P` y escribe `Preferences: color theme` y `Preferences: file icon theme`
- Tema recomendado: **“Dark+”** o **“One Dark Pro”**
- Iconos recomendados: **Material Icon Theme**
---
## 3. Extensiones recomendadas
Abre la **barra lateral izquierda → Extensiones (Ctrl+Shift+X)**
y busca las siguientes:
| 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 |
---
## 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:
```json
{
"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"],
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.trailingComma": "es5",
"prettier.tabWidth": 2
}
```
### 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:
Antes de guardar:
```js
const mensaje = 'Hola Mundo'
console.log(mensaje)
```
Después de guardar:
```js
const mensaje = 'Hola Mundo'
console.log(mensaje)
```
---
## 5. Crear snippets personalizados
### 5.1. Cómo crear un snippet
1. Pulsa `Ctrl+Shift+P`
2. Escribe **“Snippets: Configurar fragmentos de usuario”**
3. Elige **JavaScript** o **Vue**
4. Añade el siguiente ejemplo:
```json
"Componente Vue 3 setup": {
"prefix": "vue3comp",
"body": [
"<template>",
" <div class=\"${1:contenedor}\">$2</div>",
"</template>",
"",
"<script setup>",
"import { ref } from 'vue'",
"",
"const mensaje = ref('Hola desde ${1:contenedor}')",
"</script>",
"",
"<style scoped>",
".$1 {",
" padding: 1rem;",
"}",
"</style>"
],
"description": "Crea un componente base de Vue 3 con setup()"
}
```
**Ejemplo de uso:**
En un archivo nuevo `.vue`, escribe `vue3comp` → presiona **Tab**, y se generará automáticamente la plantilla del 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 + ,` |
---
## 7. Tips de productividad
### Emmet en Vue
Puedes usar abreviaturas HTML dentro de archivos `.vue` gracias a esta línea en `settings.json`:
```json
"emmet.includeLanguages": { "vue": "html" }
```
Escribe `ul>li*3` + **Tab** → genera una lista automáticamente.
### 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.