A medida que vamos adquiriendo conocimientos en el mundo del desarrollo de páginas web, nos pueden surgir diferentes inconvenientes que deberíamos subsanar. Uno de ellos podría ser cómo editar código interno de WordPress, es decir, modificar nuestra aplicación web de manera más avanzada sin la utilización de ningún plugin.
WordPress, una de las aplicaciones más utilizadas para la creación y gestión de aplicaciones web, dispone de un amplio mercado de plugins, muchos de ellos desarrollados por la comunidad. Pero en ocasiones, estos complementos no son suficientes, o debemos modificarlos para ajustarlos a nuestras necesidades. De aquí surge un problema bastante común. ¿De cuál hablamos?
Hoy vamos a dedicarle el artículo a Visual Studio Code y a una de las utilidades que integra esta aplicación en su ‘Marketplace’. Es un software open source, es decir, de código abierto; disponible para Windows, Linux, y Mac OS; desarrollado por Microsoft.
Visual Studio Code (de manera abreviada VS code) dispone de una terminal integrada, control de versiones con Git, resaltado de sintaxis, snippets, refactorización de código y muchas otras utilidades. En su Marketplace podemos encontrar multitud de complementos y utilidades de manera gratuita con las que personalizar y mejorar nuestro VS code.
Daremos a conocer el complemento SFTP, el cual nos facilitará la tarea del desarrollo web con los ficheros ubicados en un servidor remoto.
Usando esta extensión, al mismo tiempo que estamos desarrollando nuestro código, este se puede ir sincronizando con el contenido del servidor, con lo que podemos estar visualizando los cambios remotos en tiempo real.
Características del plugin SFTP:
• Explorador de archivos remoto
• Diff local y remoto, es decir comparación de ficheros
• Directorio de sincronización
• Subida/Descarga
• Subida automática al guardar progres
1. Cómo instalar SFTP en Visual Studio Code:
Una vez instalado Visual Studio Code, lo ejecutamos y nos dirigimos al icono de extensiones en la parte superior izquierda del programa. En la barra de búsqueda escribe: ‘sftp’, con lo que podrás visualizar las coincidencias de búsqueda.
En la lista que nos aparece, seleccionamos la primera opción, desarrollada por el autor liximomo, donde haremos clic en el botón de instalar.
2. Como usar la extensión SFTP en Visual Studio Code:
Después de instalar la extensión, a continuación, veremos como configurarla correctamente para poder sacarle el máximo partido. Abre el directorio del proyecto desde el menú archivo de Visual Studio Code.
Presiona Ctrl+Shift+P si utilizas Windows/Linux ó Cmd+Shift+P si estás usando Mac, lo que abrirá la paleta de comandos. Escribe SFTP y selecciona la opción ‘SFTP:config’.
Esto abrirá el archivo sftp.json en el editor. Podrás visualizar un contenido similar al que te mostramos a continuación:
Debes sustituir los campos que vienen ya definidos como demostración por los parámetros de configuración de tu servidor. Nombre, host, nombre de usuario, remotePath ó ubicación, etc. El puerto por defecto es el 22. Puedes cambiarlo si estás utilizando otro puerto.
Te recomiendo dejar la opción “uploadOnSave” con el valor true, lo que permitirá a la aplicación sincronizar automáticamente los archivos modificados nada más guardar el progreso. Es importante que revises si el proyecto local y el remoto tiene la misma estructura de ficheros y directorios, para evitar posibles errores en la sincronización.
Una vez hayas modificado los campos necesarios puedes guardar el archivo, sin modificar la ubicación por defecto. Este fichero de configuración es para cada proyecto, es decir, si necesitas configurar otro directorio remoto, tendrías que crear otro fichero como éste.
A continuación, la extensión nos solicita la contraseña de FTP, si no has configurado ninguna puedes dejarlo en blanco. La contraseña solamente será solicitada la primera vez que intentemos acceder al servidor.
Comenzamos abriendo uno de los archivos situados en nuestro servidor remoto. Con el clic derecho podremos ver la opción ‘Subir archivos’ y ‘Descargar’, haz clic en cualquiera de las dos y la aplicación nos solicitará la contraseña.
Introduce la contraseña y presiona Enter. La extensión sftp guardará de manera segura tu contraseña y no será requerida de nuevo mientras el editor siga abierto. Si no deseas que el plugin te solicite la contraseña cada vez que lo inicies puedes añadir la siguiente línea al archivo sftp.json.
Esta extensión dispone de un explorador remoto de archivos, con el que podemos visualizar la estructura de archivos y directorios de nuestro servidor.
Otra característica propia de la extensión es la Sincronización local a remota y vice-versa. Para hacer esto necesitas abrir la paleta de comandos e introducir ‘Sync’, con lo que podrás ver: “Sincronización Local -> Remota” and “Sincronización Remota -> Local”.
Espero que sirva os de ayuda. Si tenéis alguna duda, poneros en contacto con nosotros.