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:

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:

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:

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:

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:

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:

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

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

Después de guardar:

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:

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

7. Tips de productividad

Emmet en Vue

Puedes usar abreviaturas HTML dentro de archivos .vue gracias a esta línea en settings.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.