Le site est en ligne depuis 432 jours. 29 articles sont publiés / 39 commentaires au total.

Autosave vos modifications via FTP, découverte d’un plugin VS Code

Même si de prime abord autosave des modifications sur un FTP sonne comme une mauvaise pratique (c’est d’ailleurs pour ça que le fameux projet Filezilla ne le propose pas).

Synchroniser automatiquement vos modifications avec un serveur distant reste tout de même un besoin que certains développeurs expriment (dont moi), pour des projets particuliers :

  • ceux avec des contraintes client pour développement non local vers un serveur de dev,
  • pour des modifications mineures dans un projet (CSS …),

Découvrons aujourd’hui la pépite de la pépite des plugins, qui répondra parfaitement à ce besoin : SFTP (un plugin VSCode, développé par un Français en plus)

Installation et configuration du plugin SFTP

Pour commencer il faudra vous rendre sur VS Code, dans la partie « Extensions, et rechercher « SFTP » (par l’éditeur Natizyskunk).

Une fois l’extension installée, vous allez pouvoir créer un répertoire vierge, qui recevra le contenu de votre serveur distant.

Dès que ce répertoire est créé, ouvrez la commande palette dans VS Code (CTRL+SHIFT+P), et tapez SFTP Config.

En cliquant sur SFTP : Config, un fichier JSON de configuration va s’ouvrir, il sera de cette forme :

Vous allez devoir renseigner vos identifiants de connexion, et afin d’éviter d’avoir à retaper votre mot de passe à chaque ouverture de VS Code, vous pouvez ajouter la propriété « password » : « votre mot de passe » (attention à bien ajouter ce fichier dans votre .gitignore si vous créez par la suite un repo).

Une fois que vous avez renseigné toutes ces informations, nous allons passer la propriété « uploadOnSave » à true. C’est cette option miracle qui synchronisera automatiquement toutes vos modifications automatiquement avec le serveur distant !

Dès que tout est fait, sauvegardez le fichier, et passons à la dernière étape : le rapatriement des données de votre serveur dans le répertoire local.

Rapatriement des données de votre serveur

Nous allons de nouveau utiliser la palette de commande VS Code (CTRL+SHIFT+P) pour rapatrier toutes les fichiers de votre serveur distant.

Une fois la palette ouverte, tapez « Sync remote« , puis sélectionnez l’option « SFTP : Sync Remote -> Local« 

Tada, tous les fichiers / répertoires de votre serveur vont automatiquement être téléchargés vers votre dossier local !

Conclusion et suite

Hoplà ! Votre répertoire de développement est maintenant 100% synchronisé, vous pouvez développez directement depuis VS Code, tout en appliquant vos modifications en direct vers votre serveur distant sans effort !

Toutefois, quelques précautions sont à prendre avant d’utiliser ce plugin dans votre vie de développeur :

  • Si vous renseignez le mot de passe en clair dans le fichier de configuration SFTP, il est important de vous assurer que vous êtes dans un espace sécurisé,
  • Je vous conseille de désactiver l’autosave natif de VS Code pour ce projet, afin d’éviter de surcharger votre serveur de requêtes FTP, et prévenir les erreurs,
  • Évitez d’utiliser cette extension sur un projet en production, sauf si vous n’avez pas forcément de mesure de tests en amont, ou d’environnement de développement attitré.

J’espère que cet article vous a plu, et que cette petite astuce vous fera gagner du temps ! Bon dev à tous !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nouvel outil en ligne : Pomodoro Timer, optimisez votre temps et votre productivité
This is default text for notification bar