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 Autoguardado (Auto Save si está en inglés) y actívalo.

2.3. Ajustar la apariencia

Presiona Ctrl+Shift+P y escribe Tema de color y Tema de icono

• 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:

{
  //... contenido anterior del 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
}

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

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

No funciona con el autoguardado, debe hacerse el guardado manual para que se aplique el formateo.

5. Crear snippets personalizados

5.1. Cómo crear un snippet

1. Pulsa Ctrl+Shift+P
2. Escribe “Fragmentos de código: 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.