Instalación de VS Code y ajustes útiles

01Qué es VS Code y por qué elegirlo

Visual Studio Code es un editor de código gratuito y de código abierto desarrollado por Microsoft. Es ligero, funciona igual en Windows, macOS y Linux y, con miles de extensiones, se adapta a casi cualquier lenguaje, de HTML a Python.

Terminal integrado, integración con Git, autocompletado inteligente de código y depurador vienen en una sola ventana. Por eso se ha convertido en el editor por defecto de desarrolladores web, estudiantes y propietarios de negocios que hacen ellos mismos pequeñas modificaciones en su sitio.

Aunque el nombre se parezca, no es el mismo producto que Visual Studio. Visual Studio es un entorno de desarrollo mucho más pesado, orientado a grandes proyectos .NET; VS Code, en cambio, es un editor de arranque rápido que crece con extensiones.

Si está en un ordenador en el que no puede instalar programas, puede hacer pequeñas ediciones con la versión que funciona en el navegador, vscode.dev. Sin embargo, el terminal y la mayoría de las extensiones solo funcionan por completo en la versión de escritorio; los pasos de esta guía corresponden a la instalación de escritorio.

02Instalación en Windows, macOS y Linux

La dirección oficial de descarga es el sitio code.visualstudio.com; no descargue el instalador de otros sitios. Elija la vía adecuada para su sistema operativo.

Windows

El User Installer instala solo para su cuenta sin pedir permisos de administrador y es la opción recomendada para la mayoría de los usuarios. Durante la instalación, marque Add to PATH y las opciones «Open with Code» del menú contextual del Explorador; así podrá hacer clic con el botón derecho en una carpeta y abrirla directamente en el editor.

winget install -e --id Microsoft.VisualStudioCode

macOS

Mueva la aplicación descargada a la carpeta Aplicaciones. Para poder usar el comando code desde el terminal, abra la paleta de comandos del editor con Cmd+Shift+P y ejecute Shell Command: Install 'code' command in PATH.

brew install --cask visual-studio-code

Linux

En sistemas basados en Debian y Ubuntu puede instalar el paquete .deb del sitio, y en sistemas como Fedora, el paquete .rpm. El paquete .deb añade al sistema el repositorio de Microsoft para las actualizaciones. En las distribuciones con Snap basta un solo comando.

# Con el paquete .deb descargado (Ubuntu / Debian)
sudo apt install ./code_*.deb

# Snap ile
sudo snap install code --classic

03Cómo cambiar el idioma de VS Code

Para cambiar el idioma de la interfaz basta instalar la extensión oficial de Microsoft, el paquete de idioma correspondiente (para el español, Spanish Language Pack). En el panel de extensiones (Ctrl+Shift+X) escriba «Spanish» e instálela; cuando el editor sugiera reiniciar, acepte.

Para cambiar el idioma más adelante, ejecute en la paleta de comandos Configure Display Language y elija el idioma de la lista. Como la mayoría de los ejemplos de internet están escritos con los nombres de menú en inglés, algunos desarrolladores prefieren quedarse deliberadamente con la interfaz en inglés; es una elección totalmente personal.

code --install-extension MS-CEINTL.vscode-language-pack-tr

04Extensiones útiles para empezar

Hay muchísimas extensiones, pero pocas y bien elegidas son mejor: cada extensión aumenta el tiempo de arranque y el consumo de memoria. Para el desarrollo web le recomendamos esta lista inicial; también puede instalarlas desde la línea de comandos con los identificadores de extensión.

• Antes de instalar una extensión, compruebe el nombre del editor y el número de descargas; tenga cuidado con las extensiones falsas de nombre parecido.
• Desinstale las extensiones que no use o actívelas solo en el espacio de trabajo correspondiente.

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension EditorConfig.EditorConfig

# Kurulu eklentileri listele
code --list-extensions

05Ajustes recomendados de VS Code

Puede cambiar los ajustes desde la interfaz (Ctrl+,) o editar directamente el archivo settings.json desde la paleta de comandos con Preferences: Open User Settings (JSON). Los ajustes siguientes son un buen punto de partida para la mayoría de los proyectos web.

El ajuste más eficaz es el formato al guardar: cada vez que guarda el archivo, Prettier ordena el código y desaparecen las discusiones sobre la sangría.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n"
}

Ajustes por proyecto

Si las reglas cambian de un proyecto a otro, escriba los ajustes en el archivo .vscode/settings.json de la carpeta del proyecto. Cuando este archivo se añade al repositorio, todo el equipo trabaja con las mismas reglas de formato.

Organizarse con perfiles

Si utiliza conjuntos de extensiones distintos para trabajos distintos, la función de perfiles le facilita el trabajo. Por ejemplo, en un perfil «Web» están activos Prettier y ESLint, y en un perfil «Python» solo las extensiones de Python. Los perfiles se crean desde el menú Profiles del icono de engranaje de la esquina inferior izquierda y se pueden cambiar por carpeta. Así, en cada proyecto solo se cargan las extensiones que necesita y el editor se abre más rápido.

WSL y conexión remota

Si en Windows trabaja con herramientas de Linux, la extensión WSL de Microsoft conecta VS Code directamente con los archivos del entorno Linux; el terminal, las extensiones y Git funcionan en el lado de Linux. La extensión Remote - SSH, de la misma familia, le permite editar los archivos de un servidor como si estuvieran en su ordenador local.

Sincronizar los ajustes

Si usa varios ordenadores, active la función Settings Sync desde el icono de cuenta de la esquina inferior izquierda. Con su cuenta de Microsoft o de GitHub, los ajustes, las extensiones y los atajos se sincronizan automáticamente.

06Integración con Git y terminal integrado

VS Code detecta automáticamente el Git instalado en su ordenador. En el panel de control de código fuente de la izquierda (Ctrl+Shift+G) ve los archivos modificados, revisa las diferencias línea a línea, escribe el mensaje del commit y lo guarda con un clic. Explicamos con detalle cómo subir el repositorio a GitHub en nuestra guía para subir un proyecto a GitHub.

El terminal integrado se abre con el atajo Ctrl+` y arranca directamente en la carpeta del proyecto. Si en Windows prefiere Git Bash como shell por defecto en lugar de PowerShell, use la opción Select Default Profile del menú desplegable del panel de terminal.

• Si Git no está instalado, el panel muestra un aviso; instale primero Git y reinicie el editor.
• En proyectos de JavaScript, una vez completada la instalación de Node.js, puede ejecutar los comandos de npm desde este terminal.
• Para empezar un proyecto nuevo de React, nuestra guía de instalación de React con Vite es un buen siguiente paso.

07Atajos que ahorran tiempo

Memorizar unos pocos atajos reduce notablemente las veces que alarga la mano al ratón. En macOS se usa Cmd en lugar de Ctrl y Option en lugar de Alt.

08Problemas frecuentes y soluciones

VS Code suele funcionar sin problemas; la mayoría de los fallos proceden de las extensiones o del ajuste del PATH. Si el editor se ha vuelto lento, puede ver qué extensión genera carga desde la paleta de comandos con Developer: Show Running Extensions.

Si el comando code no se reconoce en el terminal, vuelva a ejecutar el instalador en Windows con la opción Add to PATH y, en macOS, repita el comando Shell Command. Si el formato al guardar no funciona, normalmente es porque no se ha elegido el formateador por defecto; haga clic con el botón derecho en el archivo y, en el menú Format Document With, establezca Prettier como predeterminado.

En un proyecto web importa tanto el resultado como los ajustes del editor: un código limpio y coherente facilita también el mantenimiento del trabajo de velocidad y rendimiento y de diseño UI/UX. En los proyectos de diseño web de Aurora Yazılım trabajamos con el mismo orden.