3. Editor y extensiones

Se recomienda altamente instalar el editor de texto Visual Studio Code (VSCode) para poder editar archivos y programar de una manera cómoda.

Instalación

En Windows

Ve al sitio oficial y descarga el archivo con extensión .exe:

https://code.visualstudio.com

Si usas WSL, instala VSCode en Windows

No lo instales dentro de Ubuntu. VSCode se instala en Windows y se conecta a WSL mediante la extensión WSL (Microsoft). Así editas archivos de Linux con la interfaz gráfica de Windows y la terminal integrada te abre directamente Ubuntu.

Con esa extensión instalada, desde la terminal de Ubuntu basta con escribir code . dentro de una carpeta para abrirla en VSCode.

En Linux

Descarga desde la página oficial el mismo archivo, pero con extensión .deb, y desde la terminal:

1. Abre la terminal.
2. Ve a la carpeta donde está el archivo descargado.
3. Ejecuta:

   sudo apt install ./<nombre-del-archivo-descargado>.deb

4. Verifica la instalación:

   code --version

El ./ no sobra

apt install archivo.deb busca un paquete llamado así en los repositorios y falla. El ./ le indica que es una ruta a un archivo local.

Extensiones de VSCode

Algunas de las extensiones que se recomiendan instalar para hacer más llevadera la programación de páginas web:

Extensión	Para qué sirve	Se usa desde
Live Server	Levanta el HTML local en el navegador y recarga al guardar	Unidad 1
Prettier	Formatea el código y aplica orden automáticamente	Unidad 1
Auto Rename Tag	Al cambiar una etiqueta de apertura, también cambia la de cierre	Unidad 1
Auto Close Tag	Cierra automáticamente las etiquetas de HTML	Unidad 1
Path Intellisense	Autocompleta rutas de archivos	Unidad 1
Error Lens	Muestra los errores semánticos sobre la línea afectada	Todo el curso
PHP Intelephense	Ayuda a utilizar funciones de PHP	Unidad 2
PostgreSQL	Cliente visual de base de datos PostgreSQL	Unidad 3
Tailwind CSS IntelliSense	Autocompleta y previsualiza las clases de Tailwind	Unidad 1

Cómo instalarlas

En VSCode, abre el panel de extensiones con Ctrl + Shift + X, busca el nombre y presiona Install.

Instálalas dentro de WSL

Si trabajas con WSL, VSCode distingue entre extensiones instaladas en Windows y en WSL. Cuando estés conectado a Ubuntu, el botón dirá “Install in WSL”: esa es la opción correcta para las extensiones de PHP y PostgreSQL.

Checkpoint

Intenta responder antes de desplegar cada pregunta.

¿Dónde se instala VSCode si trabajas con WSL, en Windows o en Ubuntu?

En Windows. Luego se conecta a WSL mediante la extensión WSL de Microsoft. Así editas archivos de Linux con la interfaz gráfica de Windows y la terminal integrada te abre directamente Ubuntu.

¿Qué comando abre la carpeta actual en VSCode desde la terminal?

code .

El punto significa la carpeta actual.

¿Para qué sirve Live Server?

Levanta el HTML local en el navegador y lo recarga automáticamente cada vez que guardas, así no tienes que apretar F5 tras cada cambio. Solo sirve para archivos estáticos: desde la Unidad 2, con PHP, se usa php -S en su lugar.

¿Por qué apt install archivo.deb falla sin el ./?

Porque sin el ./, apt interpreta el texto como el nombre de un paquete y lo busca en los repositorios de internet, donde no existe. El ./ le indica que es una ruta a un archivo que está en la carpeta actual.