One place for hosting & domains

      Studio

      Code Formatting with Prettier in Visual Studio Code


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      Formatting code consistently is a pain, especially when working on a team. The beauty of modern day web development is that the tooling has gotten so much better! In this article, we will look at setting up Prettier to automatically format your code in Visual Studio Code.

      Sample Code

      For demo purposes, here’s the sample code we will be formatting. If you’re picky about code formatting, you’ll pick up on some obvious misteps immediately.

      • mix of single vs double quotes
      • the first property of the person object should be on it’s own line
      • the console statement inside of the function should be indented
      • you may or may not like the optional parenthesis surrounding the parameter of the arrow function

      Installing the Prettier Extension

      To work with Prettier in Visual Studio Code, you’ll need to install the extension. Search for Prettier – Code Formatter. You can see the extension below. If you’re installing it for the first time, you’ll see an “install” button instead of the “uninstall” button you see on mine.

      The Format Document Command

      With the Prettier extension installed, we can now leverage it to format our code. We’ll work more on this later, but to start, we can use the Format Document command.

      To open the command pallette, you can use Command **+ Shift + P** on Mac or Control **+ Shift + P** on Windows. In the command pallette search format, then choose** Format Document**.

      You may then be prompted by to choose which formatter to use. To do so, click the Configure button.

      Then choose Prettier **- Code Formatter**.

      And the VOILA! Your code is nice and formatted. Notice all the fancy improvements!

      • spacing
      • line wrappings
      • consistent quotes

      Prettier also works with CSS files!

      The awesome thing is that this also works on CSS files!

      From this…

      To this!

      Automatically Format on Save

      So far, we have had to manually run a command to format our code. Instead, you can choose a setting in VS Code to have your files automatically formatted when you save. This has some great benefits.

      You never have to manually format your code again!

      • ensure code is formatted without having to think about it
      • code doesn’t get checked in that’s not formatted

      To change this setting, use** Command + , on Mac or Control + , ** on Windows to open the settings menu. Then search for Editor: Format on Save and make sure it is checked.

      With this setting in place, you can go about your business writing sloppily formatted code like we all do knowing that it will all be taken care of automatically for you!

      Prettier Configuration in VS Code Settings

      Prettier does a lot of things for you by default, but you can also customize the settings. Here are a few of the most common settings.

      • Single Quote – choose between single and double quotes
      • Semi – choose whether or not to include semi colons at the end of lines
      • Tab Width – how many spaces you want a tab to consist of

      Open the settings menu as above. Then, search for Prettier. This will bring up all of the settings that you can change right there in your editor.

      For example, what if I change the tab width to 10.

      Then save my file.

      Pretty easy right?! This is probably not the tab width size you want to keep, but it’s all up to you!

      Creating a Prettier Configuration File

      The downside to using the buit in settings menu in VS Code is that it doesn’t ensure consistency across developers on your team. If you change settings in your VS Code, someone else could have an entirely different set of settings in theirs.

      Establish consistent formatting across your team by creating a configuration file!

      To solve this, you can create a Prettier configuration file. It has to be titled .prettierrc.(ext) with one of the following extensions.

      • yml, yaml, or json
      • js
      • toml
      • include in package.json file (alternate option)

      I typically prefer JSON configuration files where you can define key **-> value** pairs for your settings. VS Code will even provide some intellisense for you as you type.

      Here’s an example of a simple configuration file.

      For more specifics on the configuration files, check out the Prettier Docs. After creating one of these and checking it in to your project, you can ensure that every team member follows the same formatting rules.

      Conclusion

      Don’t waste your time manually formatting your code. It takes time that can be better spent writing more code. Take advantage of the amazing modern tools out there and set up Prettier!



      Source link

      Verwenden von Visual Studio Code für die Remoteentwicklung über das Remote-SSH-Plugin


      Einführung

      Visual Studio Code ist eine beliebte Integrated Developer Environment (IDE) für Entwickler. Dank ihres großen Spektrums an Plugins, eines Minimaldesigns und plattformübergreifender Unterstützung eignet sie sich perfekt für Entwickler aller Kenntnisstufen. In diesem Tutorial geht es um die Verwendung des Remote-SSH-Plugins, das eine Remoteentwicklung von Software ermöglicht. Mit diesem Plugin können Sie Dateien auf Ihrer lokalen Workstation bearbeiten, Entwicklungsaufgaben wie Programmausführung, Komponententests oder statische Analysen aber auf einem Remoteserver ausführen.

      Es gibt viele Gründe, warum dies hilfreich sein kann. Möglicherweise verfügen Sie zum Beispiel über eine Windows-Workstation und möchten unter Windows entwickeln, während der Code später in Linux ausgeführt werden soll. Vielleicht benötigen Sie mehr RAM- oder Verarbeitungsleistung, als Ihr aktueller Rechner hat, oder wollen aufgrund einer Unternehmensrichtlinie Code fern von Ihrem persönlichen Rechner halten, oder Ihre Workstation unberührt lassen.

      In diesem Tutorial aktivieren Sie das Remote-SSH-Plugin, konfigurieren Visual Studio Code so, dass Code auf dem Remoteserver ausgeführt wird, und führen Code von Ihrer lokalen Visual Studio Code-Installation auf dem Remoteserver aus.

      Voraussetzungen

      Um mit diesem Leitfaden fortfahren zu können, benötigen Sie:

      • Einen lokalen Entwicklungscomputer, auf dem Windows, MacOSX oder Linux ausgeführt wird. Dieses Tutorial funktioniert nicht auf ChromeOS-Geräten.
      • Visual Studio Code, das Sie von der offiziellen Website herunterladen und installieren können.
      • Ein generiertes SSH-Schlüsselpaar:
      • Einen Ubuntu 18.04-Server, der gemäß der Anleitung zur Einrichtung des Ubuntu 18.04-Servers eingerichtet wurde, einschließlich eines sudo-fähigen non-root users und einer Firewall.

      Schritt 1 — Installieren des Remote-SSH-Plugins

      Im Extensions Marketplace können Sie für verschiedene Tools und Programmiersprachen unterstützte Erweiterungen und Erweiterungen von Drittanbietern herunterladen. Hier suchen Sie nach dem Remote-SSH-Plugin und installieren es.

      Auf der linken Seite der IDE befindet sich eine vertikale Reihe mit fünf Symbolen. Das unterste Symbol, das wie vier Quadrate in einem Kästchen aussieht, dessen oberes rechtes Quadrat nach außen ragt, ist das Symbol für den Extensions Marketplace:

      Stelle des Extensions Marketplace-Symbols

      Sie können auch auf diesen Abschnitt zugreifen, indem Sie Strg+Umschalttaste+X drücken. Wenn Sie diese Seite öffnen, sehen Sie zum Herunterladen und Installieren vorgeschlagene Plugins.

      Wenn der Extensions Marketplace geöffnet ist, geben Sie Remote-SSH in die Suchleiste Extensions in Marketplace durchsuchen ein. Wenn Sie das Plugin finden, wählen Sie es aus und klicken Sie dann auf die grüne Schaltfläche Installieren, um die Erweiterung zu installieren.

      Suchen nach dem Remote-SSH-Plugin

      Die Erweiterung ist nun installiert. Als Nächstes konfigurieren Sie die Erweiterung, damit Sie sich mit Ihrem Server verbinden können.

      Schritt 2 — Konfigurieren des Remote-SSH-Plugins und Verbinden mit Ihrem Server

      Nachdem Sie das Plugin installiert haben, können Sie es nun konfigurieren, um eine Verbindung mit einem Server herzustellen. Dazu benötigen Sie folgende Informationen:

      • Die IP-Adresse oder den Hostnamen des Servers.
      • Den Benutzernamen, mit dem Sie sich verbinden.
      • Den privaten Schlüssel, den Sie zur Authentifizierung Ihres Benutzers verwenden werden.

      Sie verwenden diese Informationen zum Erstellen einer SSH-Konfigurationsdatei, die Visual Studio Code zur Herstellung einer SSH-Verbindung mit dem Server verwenden kann, um Dateien zu synchronisieren und Code in Ihrem Namen auszuführen. Diese Konfiguration erstellen Sie mit Visual Studio Code.

      Nachdem Sie das Remote-SSH-Plugin installiert haben, sehen Sie nun ein kleines grünes Feld in der unteren linken Ecke der Benutzeroberfläche von Visual Studio Code. Wenn Sie mit dem Mauszeiger über das Feld fahren, steht im Popup Remotefenster öffnen. Die Schaltfläche sieht ungefähr wie ein Größer-als-Zeichen unter einem Kleiner-als-Zeichen >< aus, wie im folgenden Bild dargestellt:

      Grüne Schaltfläche zum Öffnen eines Remotefensters

      Klicken Sie auf die Schaltfläche, woraufhin oben in der Mitte ein Dialogfeld erscheint. Wählen Sie Remote-SSH: Konfigurationsdatei öffnen… aus der Liste:

      Auswählen von "SSH konfigurieren" in der Benutzeroberfläche

      In der nächsten Eingabeaufforderung werden Sie gefragt, welche Konfigurationsdatei Sie öffnen möchten. Wenn Sie Windows verwenden, sehen Sie zwei Speicherorte: einen in Ihrem persönlichen Benutzerverzeichnis und einen am Installationsspeicherort für SSH. Zum Konfigurieren des Servers sollten Sie die Datei in Ihrem Benutzerverzeichnis verwenden.

      Wählen Sie die Datei aus, woraufhin Ihr Editor die config-Datei öffnet. Fügen Sie der Datei folgenden Code hinzu, um die Verbindung mit Ihrem Server festzulegen, indem Sie die hervorgehobenen Abschnitte durch die Informationen für Ihren Server ersetzen:

      config

      Host my_remote_server
          HostName your_server_ip_or_hostname
          User sammy
          IdentityFile /location/of/your/private/key
      

      So funktioniert diese Konfigurationsdatei:

      • Host: Gibt einen Namen für Ihren Host an. Damit können Sie beim Herstellen einer Verbindung mit dem Server einen kurzen Namen oder eine Abkürzung anstelle der vollständigen IP-Adresse oder des Hostnamens verwenden.
      • HostName: Der tatsächliche Hostname des Servers, der entweder eine IP-Adresse oder ein vollqualifizierter Domänenname ist.
      • User: Der Benutzer, mit dem Sie eine Verbindung herstellen möchten.
      • IdentityFile: Der Pfad zu Ihrem privaten SSH-Schlüssel. In Mac- und Linux-Systemen finden Sie diesen in Ihrem Stammverzeichnis in einem versteckten .ssh-Verzeichnis, das typischerweise id_rsa heißt. Wenn Sie Windows verwenden, haben Sie einen Speicherort zur Speicherung dieser Datei angegeben, als Sie diese mit putty-gen erstellt haben.

      Geben Sie die entsprechenden Werte in Ihrer Datei an und speichern Sie die Datei.

      Visual Studio Code ist nun konfiguriert und bereit, sich mit Ihrem Server zu verbinden. Klicken Sie unten links auf die grüne Schaltfläche Remotefenster öffnen und wählen Sie Remote-SSH: Mit Host verbinden…

      Herstellen einer Verbindung mit dem Server von Visual Studio Code

      Sobald Sie damit fertig sind, werden alle verfügbaren und konfigurierten Server im Dropdown-Menü angezeigt. Wählen Sie den Server, mit dem Sie sich verbinden möchten, aus dieser Liste aus.

      Wenn Sie sich von Ihrem Rechner zum ersten Mal mit diesem Server verbinden, werden Sie wahrscheinlich eine Aufforderung mit dem SSH Fingerprint-Verifizierungsdialog erhalten, wie im folgenden Bild zu sehen:

      Bestätigen Ihres SSH Fingerprint

      Dadurch wird sichergestellt, dass Sie sich wirklich mit dem richtigen Server verbinden. Sie können dies überprüfen, indem Sie sich bei Ihrem Server manuell anmelden und ssh-keygen -l -f /etc/ssh/ssh_host_key.pub ausführen, um den Fingerabdruck des Servers anzuzeigen. Wenn dieser Fingerabdruck mit dem übereinstimmt, der in Visual Studio Code angezeigt wird, dann verbinden Sie sich tatsächlich mit dem richtigen Server, sodass Sie auf Fortfahren klicken können.

      Visual Studio Code öffnet standardmäßig ein neues Fenster, sobald eine neue Verbindung hergestellt wird. Ein neues Fenster mit dem Empfangsbildschirm wird angezeigt. Sie wissen, dass Ihre Verbindung erfolgreich hergestellt wurde, wenn unten links im grünen Feld SSH: your_ip_address_or_hostname angezeigt wird. Das bedeutet, dass Visual Studio Code verbunden ist und mit Ihrem Remoteserver kommuniziert.

      Erfolgreiche SSH-Verbindung

      Nachdem Sie verbunden sind, können Sie nun Befehle und Code aus Ihrem Editor ausführen.

      Schritt 3 — Ausführen von Code auf dem Remoteserver

      Das Remote-SSH-Plugin ist fertig konfiguriert, sodass es an der Zeit ist, Code auf Ihrem Remotecomputer auszuführen. Öffnen Sie ein Terminalfenster, indem Sie aus der Navigationsleiste oben im Fenster Visual Studio Terminal auswählen und auf Neues Terminal klicken. Sie können auch ein Terminal öffnen, indem Sie Strg+Umschalttaste+` drücken. Das Terminal, das geöffnet wird, ist ein Terminal auf Ihrem Remoteserver, nicht auf Ihrem lokalen Rechner.

      Wenn sich das Terminal öffnet, geben Sie folgenden Befehl aus, um die IP-Adresse Ihres Servers anzuzeigen und zu überprüfen, ob Sie mit Ihrem Remoteserver verbunden sind:

      Sie sehen in Ihrem Terminal folgende Ausgabe:

      Output

      1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever preferred_lft forever inet6 ::1/128 scope host valid_lft forever preferred_lft forever 2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000 link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff inet your_server_ip brd your_broadcast_address scope global eth0 valid_lft forever preferred_lft forever ...

      Um die Fähigkeit zur Ausführung von Remotecode zu testen, erstellen Sie in Ihrem Editor eine neue Python-Datei namens hello.py. Wenn Sie mit Ihrem Remoteserver verbunden sind, werden alle über Visual Studio Code erstellten Dateien auf diesem Server gespeichert, nicht auf Ihrem lokalen Rechner.

      Fügen Sie der Datei folgende Inhalte hinzu:

      hello.py

      print("Hello Sammy!")
      

      Um das Programm auf Ihrem Server auszuführen, öffnen Sie in Visual Studio Code ein Terminal über das Navigationsmenü oder drücken Sie die Tastenfolge Strg+Umschalt+`. Da diese Terminalsitzung mit Ihrem Remoteserver verbunden ist, führen Sie im Terminal folgenden Befehl zur Ausführung Ihres hello.py-Programms aus:

      Die Ausgabe Ihres Programms wird angezeigt.

      Ausführen Ihres Python-Skripts

      Sie können die Datei auch über das Kontextmenü Debug ausführen, indem Sie Ohne Debugging ausführen wählen.

      Anmerkung: Wenn Sie in Visual Studio Code Entwicklungserweiterungen installiert haben (wie die Python-Erweiterung), müssen Sie diese Erweiterungen auf Ihrem Server über den Extension Marketplace neu installieren. Falls Sie diese Plugins zuvor in Visual Studio Code installiert haben, zeigt der Marketplace, wenn Sie erneut nach ihnen suchen, Installieren in SSH: Hostname an. Achten Sie stets darauf, in welchem Entwicklungskontext Sie sich befinden, da Visual Studio Code dort Ihre Plugins installieren und Dateien erstellen wird. Wenn Sie versuchen, Code auszuführen, ohne diese Plugins installiert zu haben, werden in der unteren rechten Ecke des Bildschirms Fehlerdialogfelder angezeigt, in denen Sie zur Installation der Plugins auf Ihrem Remoteserver aufgefordert werden. Nachdem Sie sie installiert haben, müssen Sie Visual Studio Code wahrscheinlich neu laden. Wenn Sie es neu starten, wird es auf dem Remoteserver weiter ausgeführt, ohne dass Sie manuell eine neue Verbindung herstellen müssen.

      Zusammenfassung

      Sie haben Visual Studio Code nun zur Entwicklung auf einem Remoteserver mit SSH konfiguriert. Remoteausführung mit einer IDE bietet viele Vorteile, einschließlich der Fähigkeit, schnell zu testen, wie Ihr Code in verschiedenen Betriebssystemen und Hardwarespezifikationen ausgeführt wird. Solange Sie über eine Internetverbindung verfügen, können Sie sich mit Ihrem Server verbinden und über beliebige Computer mit Ihrem Code arbeiten. Außerdem können Sie mit einer Linux-Umgebung entwickeln, selbst wenn Sie Windows als primäres Betriebssystem verwenden.



      Source link

      Comment utiliser Visual Studio Code pour le développement à distance via le plugin Remote-SSH


      Introduction

      Visual Studio Code est un environnement de développement intégré (IDE) populaire pour les développeurs. Son grand choix de plugins, sa conception minimale et son support cross-platform en font une solution idéale pour les développeurs de tous niveaux. Ce tutoriel met l’accent sur l’utilisation du plugin Remote-SSH pour activer le développement de logiciels à distance. Avec ce plugin, vous pouvez éditer des fichiers sur votre poste de travail local, mais aussi exécuter des tâches de développement telles que l’exécution de programmes, les tests unitaires ou l’analyse statique sur un serveur distant.

      Il existe de nombreuses raisons pour lesquelles cela peut vous être bénéfique. Par exemple, vous pouvez avoir un poste de travail Windows et vouloir développer sur Windows, mais votre code tournera au final sur Linux. Vous pouvez avoir besoin de davantage de mémoire vive ou de puissance de traitement que n’en possède votre machine actuelle, ou vous souhaitez maintenir le code à l’écart de votre machine personnelle en raison d’une politique d’entreprise, ou du désir de préserver votre poste de travail.

      Dans ce tutoriel, vous allez activer le plugin Remote-SSH, configurer Visual Studio Code pour exécuter le code sur le serveur distant, et exécuter le code de votre installation locale de Visual Studio Code sur le serveur distant.

      Conditions préalables

      Pour suivre ce guide, vous aurez besoin des éléments suivants :

      • Une machine de développement locale fonctionnant sous Windows, MacOSX ou Linux. Ce tutoriel ne fonctionnera pas sur les dispositifs ChromeOS.
      • Visual Studio Code, que vous pouvez télécharger et installer depuis le site web officiel.
      • Une paire de clés SSH générée :
      • Un serveur Ubuntu 18.04 configuré en suivant le guide de configuration initiale du serveur Ubuntu 18.04, comprenant un utilisateur non root sudo activé et un pare-feu.

      Étape 1 — Installation du plugin Remote-SSH

      Extensions Marketplace​​​ est l’endroit où vous pouvez télécharger les extensions prises en charge et les extensions tierces pour une variété d’outils et de langages de programmation différents. C’est là que vous allez rechercher le plugin Remote-SSH en vue de l’installer.

      Sur le côté gauche de l’IDE, il existe une rangée verticale de cinq icônes. L’icône du bas, qui ressemble à quatre carrés dans une boîte avec le carré supérieur droit qui explose, est l’icône d’Extensions Marketplace :

      Emplacement de l'icône Extensions Marketplace

      Vous pouvez également accéder à cette section en appuyant sur Ctrl+Shift+X. Lorsque vous ouvrirez cette page, vous verrez des suggestions de plugins à télécharger et à installer.

      Une fois que vous avez ouvert Extensions Marketplace, tapez Remote-SSH dans la barre de recherche d’Extensions Marketplace. Lorsque vous trouvez le plugin, sélectionnez-le et cliquez ensuite sur le bouton vert Install pour installer l’extension.

      Recherche du plugin Remote SSH

      L’extension est maintenant installée. Ensuite, vous allez configurer l’extension afin de pouvoir vous connecter à votre serveur.

      Étape 2 — Configuration du plugin Remote-SSH et connexion à votre serveur

      Maintenant que vous avez installé le plugin, vous pouvez le configurer pour vous connecter à un serveur. Pour ce faire, vous aurez besoin des éléments d’information suivants :

      • L’IP ou le nom d’hôte du serveur.
      • Le nom d’utilisateur avec lequel vous allez vous connecter.
      • La clé privée que vous utiliserez pour authentifier votre utilisateur.

      Vous utiliserez ces informations pour créer un fichier de configuration SSH que Visual Studio Code peut utiliser pour SSH vers le serveur afin de synchroniser les fichiers et d’exécuter le code en votre nom. Vous allez créer cette configuration en utilisant Visual Studio Code.

      Maintenant que vous avez installé le plugin Remote-SSH, vous verrez une petite boîte verte dans le coin en bas à gauche de l’interface Visual Studio Code. Si vous survolez la boîte avec le pointeur de votre souris, la fenêtre contextuelle indiquera Open a remote window. Le bouton ressemble à un signe “supérieur à” situé un peu au-dessous d’un signe “inférieur à” (><), comme l’illustre l’image suivante :

      Bouton vert de l'interface Open a remote window

      Cliquez sur le bouton, et une boîte de dialogue apparaît en haut, au centre. Sélectionnez Remote-SSH : Open Configuration File… dans la liste :

      Selecting Configure SSH in the UI

      L’invite suivante vous demandera quel fichier de configuration vous voulez ouvrir. Si vous êtes sous Windows, vous verrez deux emplacements : un dans votre répertoire utilisateur personnel, et un dans l’emplacement d’installation pour SSH. Vous devez utiliser le fichier dans votre répertoire utilisateur lors de la configuration du serveur.

      Sélectionnez le fichier et votre éditeur ouvrira le fichier config. Ajoutez le code suivant au fichier pour définir la connexion à votre serveur, en remplaçant les sections surlignées par les informations de votre serveur :

      config

      Host my_remote_server
          HostName your_server_ip_or_hostname
          User sammy
          IdentityFile /location/of/your/private/key
      

      Voici comment fonctionne ce fichier de configuration :

      • Host : spécifie un nom pour votre hôte. Cela vous permet d’utiliser un nom ou abrégé au lieu de l’adresse IP complète ou du nom d’hôte lors de la connexion au serveur.
      • HostName : le nom d’hôte réel du serveur, qui est soit une adresse IP, soit un nom de domaine entièrement qualifié.
      • User : l’utilisateur que vous voulez utiliser pour vous connecter.
      • IdentityFile: : le chemin vers votre clé privée SSH. Sur les systèmes Mac et Linux, vous le trouverez dans votre répertoire personnel, dans un répertoire .ssh caché, généralement appelé id_rsa. Si vous êtes sous Windows, vous avez spécifié un emplacement pour enregistrer ce fichier lorsque vous l’avez créé en utilisant putty-gen.

      Spécifiez les valeurs appropriées dans votre fichier et enregistrez le fichier.

      Visual Studio Code est maintenant configuré et prêt à vous connecter à votre serveur. Cliquez sur le bouton vert Open a remote window​​​​​​ dans le coin inférieur gauche et sélectionnez Remote-SSH : Connect to Host…

      Connexion au serveur depuis Visual Studio Code

      Une fois que vous avez fait tout cela, les serveurs disponibles et configurés apparaîtront dans le menu déroulant. Sélectionner le serveur auquel vous voulez vous connecter à partir de cette liste.

      Si c’est la première fois que vous vous connectez à ce serveur depuis votre machine, vous serez probablement invité à utiliser la boîte de dialogue de vérification des empreintes digitales SSH, comme celle qui figure dans l’image suivante :

      Confirmer votre empreinte digitale SSH

      Cela permet de s’assurer que vous vous connectez réellement au serveur auquel vous pensez. Vous pouvez le vérifier en vous connectant manuellement à votre serveur et en exécutant ssh-keygen -l -f /etc/ssh/ssh_host_key.pub pour visualiser l’empreinte digitale du serveur. Si cette empreinte digitale est la même que celle qui vous est présentée dans Visual Studio Code, alors vous vous connectez effectivement au serveur auquel vous pensez, vous pouvez donc cliquer sur Continue.

      Visual Studio Code ouvre par défaut une nouvelle fenêtre lorsqu’une nouvelle connexion est établie. Une nouvelle fenêtre apparaîtra avec l’écran d’accueil. Vous saurez que votre connexion a réussi si vous voyez SSH : your_ip_address_or_hostname dans la boîte verte, située dans le coin inférieur gauche. Cela signifie que Visual Studio Code est connecté et communique avec votre serveur distant.

      Connexion SSH réussie

      Maintenant que vous êtes connecté, vous pouvez exécuter des commandes et du code à partir de votre éditeur.

      Étape 3 — Exécution de code sur le serveur distant

      Le plugin Remote-SSH est configuré, et il est temps d’exécuter du code sur votre machine distante. Ouvrez une fenêtre de terminal en sélectionnant Terminal dans la barre de navigation en haut de la fenêtre Visual Studio et en cliquant sur New Terminal. Vous pouvez également ouvrir un terminal en appuyant sur CTRL+Shift+`. Le terminal qui est ouvert est un terminal sur votre serveur distant, et non un terminal sur votre machine locale.

      Lorsque le terminal s’ouvre, lancez la commande suivante pour afficher l’adresse IP de votre serveur afin de vérifier que vous êtes connecté à votre serveur distant :

      Vous verrez la sortie suivante dans votre terminal :

      Output

      1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever preferred_lft forever inet6 ::1/128 scope host valid_lft forever preferred_lft forever 2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000 link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff inet your_server_ip brd your_broadcast_address scope global eth0 valid_lft forever preferred_lft forever ...

      Pour tester la capacité d’exécution de code distant, créez un nouveau fichier Python appelé hello.py dans votre éditeur. Lorsque vous êtes connecté à votre serveur distant, tous les fichiers créés par Visual Studio Code sont enregistrés sur ce serveur, et non sur votre machine locale.

      Ajoutez le contenu suivant au fichier :

      hello.py

      print("Hello Sammy!")
      

      Pour exécuter ce programme sur votre serveur, ouvrez un terminal dans Visual Studio Code à partir du menu navigation ou en appuyant sur la séquence de touches CTRL+Shift+`. Comme cette session de terminal est connectée à votre serveur distant, exécutez la commande suivante dans le terminal pour exécuter votre programme hello.py :

      La sortie de votre programme sera affichée.

      Exécuter votre script Python

      Vous pouvez également exécuter le fichier à partir du menu contextuel Debug en sélectionnant Run without Debugging.

      Remarque : Si vous avez des extensions de développement installées dans Visual Studio Code, telle que l’extension Python, vous devrez réinstaller ces extensions sur votre serveur via Extensions Marketplace. Si vous avez déjà installé ces plugins dans Visual Studio Code, lorsque vous les recherchez à nouveau, le Marketplace indiquera Install on SSH: hostname. Faites toujours attention au contexte de développement dans lequel vous vous trouvez, car c’est là que Visual Studio Code installera vos plugins et créera vos fichiers. Si vous essayez d’exécuter votre code sans que ces plugins soient installés, des boîtes de dialogue d’erreur apparaîtront dans le coin inférieur droit de l’écran, vous invitant à les installer sur votre serveur distant. Une fois que vous les aurez installés, vous devrez probablement recharger Visual Studio Code. Lorsque vous le relancerez, il continuera à fonctionner sur le serveur distant sans que vous ayez à vous reconnecter manuellement.

      Conclusion

      Le code Visual Studio est maintenant configuré pour le développement sur un serveur distant utilisant SSH. L’exécution à distance avec un IDE offre de nombreux avantages, notamment la possibilité de tester rapidement le fonctionnement de votre code sur différents systèmes d’exploitation et pour différentes spécifications matérielles. Tant que vous disposez d’une connexion Internet, vous pouvez vous connecter à votre serveur et travailler sur votre code depuis n’importe quel ordinateur, et vous pourrez développer en utilisant un environnement Linux même si vous utilisez Windows comme système d’exploitation principal.



      Source link