Connexion aux fichiers du site via VSCode

Pour se connecter via SSH et FTP/SFTP, Visual Studio Code utilise une extension qui offre un accès pratique aux fichiers distants.

SSH

Installer l’extension

Ouvrez Visual Studio Code. Cliquez sur l’icône "Extensions" dans la barre latérale (icône carrée), puis, dans la vue Extensions, recherchez SSH.
Cliquez sur "Install" pour l’extension nommée "Remote - SSH" de Microsoft.

Configurer les clés SSH

Pour vous connecter via SSH sans mot de passe, veuillez configurer votre clé SSH dans FASTPANEL à l’aide de cet article.

remarque

Vous pouvez trouver l’utilisateur du site dans la fiche du site, champ "Site user". Pour modifier le mot de passe de l’utilisateur du site, accédez à la section "Management" → "Users" dans FASTPANEL^®.

Configurer SSH dans VSCode

Appuyez sur F1 sous Windows/Linux ou sur Cmd+Shift+P sur Mac pour ouvrir la palette de commandes, tapez et sélectionnez Remote-SSH: Add New SSH Host, puis saisissez la chaîne de connexion SSH au format suivant :

ssh site_user@11.22.33.44

Remplacez site_user et 11.22.33.44 par les valeurs appropriées. À la place de site_user, vous devez indiquer l’utilisateur du site, et à la place de 11.22.33.44, l’adresse IP de votre serveur. Après avoir saisi la commande, choisissez le fichier de configuration dans lequel enregistrer la configuration SSH (généralement ~/.ssh/config).

Se connecter au serveur distant

Appuyez sur F1 sous Windows/Linux ou sur Cmd+Shift+P sur Mac pour ouvrir la palette de commandes, tapez et sélectionnez Remote-SSH: Connect to Host, choisissez l’hôte ajouté précédemment, acceptez l’empreinte du serveur et saisissez la phrase secrète de votre clé SSH si c’est la première connexion, et, si cela vous est demandé, saisissez votre mot de passe.

Une fois connecté, allez dans "Explorer" → "Open Folder" pour ouvrir un dossier sur l’hôte.
Par exemple, /var/www/site_user/data/www/example.com.

Ouvrir des fichiers et commencer à coder

Une fois connecté, VSCode se rechargera et vous pourrez parcourir directement dans VSCode les fichiers du serveur distant. Vous pouvez ouvrir, modifier et enregistrer des fichiers comme vous le feriez sur votre machine locale.

Pour plus d’informations, veuillez consulter la documentation de l’extension.

FTP/SFTP

Installer l’extension

Ouvrez Visual Studio Code. Cliquez sur l’icône "Extensions" dans la barre latérale (icône carrée). Saisissez SFTP dans la barre de recherche. Cliquez sur "Install" pour installer l’extension sélectionnée.

Configurer la connexion

Ouvrez la palette de commandes en appuyant sur F1 sous Windows/Linux ou sur Cmd+Shift+P sur Mac, tapez SFTP: Config, puis modifiez les paramètres de configuration avec les informations de votre serveur distant dans le fichier sftp.json situé dans le répertoire .vscode. Par exemple :

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

remarque

Vous pouvez en apprendre davantage sur la création de comptes FTP dans FASTPANEL® dans cet article et sur les comptes SFTP dans celui-ci.

• "host" : adresse IP de votre serveur.
• "protocol" : indiquez ftp ou sftp.
• "port" : 21 pour FTP ou 2222 pour SFTP.
• "username" et "password" : identifiant et mot de passe du compte FTP/SFTP.
• "remotePath" : indiquez le répertoire du serveur avec lequel vous souhaitez travailler.
• "uploadOnSave" : option de téléversement automatique lors de l’enregistrement du fichier.

Le paramètre de mot de passe dans sftp.json est facultatif ; s’il est omis, il vous sera demandé lors de la synchronisation. Enregistrez et fermez le fichier sftp.json.

Travailler avec les fichiers

Ouvrez la palette de commandes, appuyez sur F1 sous Windows/Linux ou sur Cmd+Shift+P sur Mac. Ensuite, saisissez SFTP pour voir un certain nombre de commandes disponibles, auxquelles vous pouvez également accéder depuis les menus contextuels de l’explorateur de fichiers du projet.
Pour synchroniser avec un dossier distant, utilisez la commande SFTP: Download Project, qui téléchargera dans votre répertoire local ouvert le répertoire spécifié dans le paramètre remotePath de sftp.json.

Explorateur distant

L’explorateur distant vous permet de parcourir les fichiers distants. Vous pouvez ouvrir l’explorateur distant en exécutant la commande View: Show SFTP. Cliquez ensuite sur la vue SFTP dans la barre d’activité.

Vous pouvez uniquement afficher le contenu d’un fichier avec l’explorateur distant. Utilisez SFTP: Edit in Local pour le modifier localement.