Saltar al contenido principal

Conexión a los archivos del sitio a través de VSCode

Para conectarse mediante SSH y FTP/SFTP, Visual Studio Code usa una extensión que proporciona un acceso cómodo a los archivos remotos.

SSH​

Instalar la extensión​

Abra Visual Studio Code. Haga clic en el icono "Extensions" en la barra lateral (icono cuadrado); en la vista de Extensions, busque SSH.
Haga clic en "Install" en la extensión llamada "Remote - SSH" de Microsoft.

Instalar extensión

Configurar claves SSH​

Para conectarse mediante SSH sin contraseña, configure su clave SSH en FASTPANEL usando este artículo.

nota

Puede encontrar el usuario del sitio en la tarjeta del sitio, en el campo "Site user". Para cambiar la contraseña del usuario del sitio, vaya a la sección "Management" → "Users" en FASTPANEL®.

Configurar SSH en VSCode​

Presione F1 en Windows/Linux o Cmd+Shift+P en Mac para abrir la Paleta de comandos, escriba y seleccione Remote-SSH: Add New SSH Host, y luego introduzca la cadena de conexión SSH con el formato:

ssh site_user@11.22.33.44

Agregar nuevo host SSH

Sustituya site_user y 11.22.33.44 por los valores correspondientes. En lugar de site_user debe especificar el usuario del sitio, y en lugar de 11.22.33.44 la dirección IP de su servidor. Después de introducir el comando, elija el archivo de configuración para guardar la configuración SSH (normalmente ~/.ssh/config).

Conectarse al servidor remoto​

Presione F1 en Windows/Linux o Cmd+Shift+P en Mac para abrir la Paleta de comandos, escriba y seleccione Remote-SSH: Connect to Host, elija el host agregado previamente, acepte la huella digital del servidor e introduzca la frase de contraseña de su clave SSH si es la primera vez que se conecta y, si se le solicita, introduzca su contraseña.

Después de conectarse, vaya a "Explorer" → "Open Folder" para abrir una carpeta en el host.
Por ejemplo, /var/www/site_user/data/www/example.com.

Conectarse al servidor remoto

Abrir archivos y empezar a programar​

Una vez conectado, VSCode se recargará y podrá explorar archivos en el servidor remoto directamente en VSCode. Puede abrir, editar y guardar archivos igual que lo haría en su equipo local.

Para obtener más información, consulte la documentación de la extensión.

FTP/SFTP​

Instalar la extensión​

Abra Visual Studio Code. Haga clic en el icono "Extensions" en la barra lateral (icono cuadrado). Escriba SFTP en la barra de búsqueda. Haga clic en "Install" para instalar la extensión seleccionada.

Instalar extensión

Configurar la conexión​

Abra la Paleta de comandos presionando F1 en Windows/Linux o Cmd+Shift+P en Mac, escriba SFTP: Config y luego edite los parámetros de configuración con la información de su servidor remoto en el archivo sftp.json dentro del directorio .vscode. Por ejemplo:

{  
    "name": "My Server",  
    "host": "11.22.33.44",  
    "protocol": "ftp",  
    "password": "password",  
    "port": 21,  
    "username": "ftp_user",  
    "remotePath": "/",  
    "uploadOnSave": false,  
    "useTempFile": false,  
    "openSsh": false  
}
nota

Puede obtener información sobre la creación de cuentas FTP en FASTPANEL® en este artículo y sobre cuentas SFTP en este.

  • "host": dirección IP de su servidor.
  • "protocol": Especifique ftp o sftp.
  • "port": 21 para FTP o 2222 para SFTP.
  • "username" y "password": inicio de sesión y contraseña de la cuenta FTP/SFTP.
  • "remotePath": Especifique el directorio del servidor con el que desea trabajar.
  • "uploadOnSave": Opción para la carga automática al guardar el archivo.

El parámetro de contraseña en sftp.json es opcional; si se omite, se le solicitará una contraseña durante la sincronización. Guarde y cierre el archivo sftp.json .

Trabajar con archivos​

Abra la Paleta de comandos; presione F1 en Windows/Linux o Cmd+Shift+P en Mac. Luego, escriba SFTP para ver varios comandos disponibles, a los que también puede acceder desde los menús contextuales del explorador de archivos del proyecto.
Para sincronizar con una carpeta remota, use el comando SFTP: Download Project, que descargará el directorio especificado en la configuración remotePath de sftp.json a su directorio local abierto.

Explorador remoto​

Remote Explorer le permite explorar archivos remotos. Puede abrir Remote Explorer ejecutando el comando View: Show SFTP. Después, haga clic en la vista SFTP en la barra de actividad.

Con Remote Explorer solo puede ver el contenido de un archivo. Use SFTP: Edit in Local para editarlo localmente.

Instalar extensión