Tema 11 · Edición Remota

Edición Remota en Vivo: Vincular FileZilla con Visual Studio Code

Aprende a configurar Visual Studio Code o Notepad++ como editor predeterminado en FileZilla para editar archivos directamente en el servidor con resubida automática.

Comparación de Directorios y Navegación Sincronizada Gestión de Permisos en Servidores: CHMOD 755 y 644

¿Cómo Funciona la Edición Remota en FileZilla?

Cuando necesitas corregir un error tipográfico urgente en un archivo .htaccess o un script PHP en el servidor, no es necesario descargarlo a tu escritorio, abrirlo a mano, editarlo y volver a arrastrarlo.

FileZilla cuenta con la función "Ver / Editar": descarga una copia temporal en tu máquina, abre tu editor preferido (como Visual Studio Code) y queda en segundo plano supervisando el archivo. Cada vez que pulsas Ctrl + S en tu editor, FileZilla detecta el cambio y te ofrece resubir el archivo actualizado al servidor de forma instantánea.

Configuración de Visual Studio Code en FileZilla

  1. En el menú superior de FileZilla, ve a: Edición ➔ Opciones...
  2. En el menú lateral izquierdo, haz clic en Edición de archivos.
  3. Selecciona la opción: "Usar editor personalizado".
  4. Haz clic en Examinar... y busca el ejecutable de VS Code en tu sistema Windows. Normalmente se encuentra en: 
    C:\Users\TuUsuario\AppData\Local\Programs\Microsoft VS Code\Code.exe
    (O si usas Notepad++: C:\Program Files\Notepad++\notepad++.exe).
  5. Marca la casilla: "Supervisar siempre los archivos editados localmente y solicitar resubirlos".
  6. Haz clic en Aceptar para guardar los cambios.

Uso Práctico en el Panel Remoto

Ahora, en el panel derecho (Sitio Remoto):

  • Haz clic derecho sobre cualquier archivo (ej. index.php) y selecciona "Ver / Editar".
  • Visual Studio Code se abrirá automáticamente con el contenido del servidor.
  • Modifica el código y presiona Ctrl + S.
  • Regresa a FileZilla: aparecerá una ventana preguntando "El archivo ha cambiado. ¿Desea transferirlo de vuelta al servidor?". Haz clic en Sí y ¡listo! Tu cambio ya está en vivo en internet.

⚡ Asociación de Tipos de Archivos Específicos

Configuración avanzada en FileZilla para asociar extensiones concretas con editores diferentes:

asociaciones-editores.txt
Solo lectura 
# En Edición > Opciones > Edición de archivos > Asociaciones de tipos de archivo:

# Abrir archivos de código web con Visual Studio Code
php "C:\Users\TuUsuario\AppData\Local\Programs\Microsoft VS Code\Code.exe"
html "C:\Users\TuUsuario\AppData\Local\Programs\Microsoft VS Code\Code.exe"
css "C:\Users\TuUsuario\AppData\Local\Programs\Microsoft VS Code\Code.exe"
js "C:\Users\TuUsuario\AppData\Local\Programs\Microsoft VS Code\Code.exe"
json "C:\Users\TuUsuario\AppData\Local\Programs\Microsoft VS Code\Code.exe"

# Abrir archivos de texto plano o logs con Bloc de notas o Notepad++
txt "C:\Program Files\Notepad++\notepad++.exe"
log "C:\Program Files\Notepad++\notepad++.exe"
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Qué ocurre en FileZilla cuando modificas y guardas un archivo abierto con la opción "Ver / Editar" en Visual Studio Code?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual de FileZilla: FTP, SFTP & Despliegue Web y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.