Déplacement de votre développement JavaScript vers Bash sous Windows

Je fais partie de ces personnes qui ne peuvent pas vivre sans leur terminal Bash. Ce seul fait a rendu difficile pour moi le travail frontal sur Windows. Je travaille chez Microsoft et je suis sur Mac. Ce n'est que lorsque la nouvelle gamme de matériel Surface est sortie il y a quelques années que j'ai réalisé : je dois en avoir un .

Alors j'en ai un. Un Surface Book 2 exécutant Windows 10 pour être exact. Je suis en train de rédiger cet article là-dessus en ce moment. Et qu'en est-il de ma douce, douce invite Bash ? Eh bien, je l'ai apporté avec moi, bien sûr.

Dans cet article, je vais examiner en détail comment la nouvelle technologie de Windows 10 vous permet d'exécuter un terminal Linux complet sur Windows. Je vais également vous montrer mon incroyable configuration de terminal (qui a été nommée "la meilleure de tous les temps" par "moi") et comment vous aussi pouvez configurer votre propre machine de développement Windows/Linux.

Si vous avez envie de certains de ces matériels Surface mais que vous ne pouvez pas vivre sans un terminal Linux, vous êtes au bon endroit.

Remarque : Au moment d'écrire ces lignes, de nombreux éléments de cet article vous obligeront à utiliser ou à basculer vers des versions "prévisualisées" ou "initiées" de divers éléments, y compris Windows. La plupart de ces choses seront dans la version principale de Windows à un moment donné dans le futur.

Sous-système Windows pour Linux (WSL)

Le sous-système Windows pour Linux, ou "WSL", est ce qui vous permet d'exécuter Linux sur Windows. Mais qu'est-ce que c'est que cette science folle ?

Le WSL, dans son incarnation actuelle, est une couche de traduction qui convertit les appels système Linux en appels système Windows. Linux s'exécute au-dessus du WSL. Cela signifie que pour obtenir Linux sur Windows, vous devez faire trois choses :

1. Activer le WSL,
2. Installez Linux,
3. Incluez toujours trois éléments dans une liste.

Il s'avère que cette couche de traduction est un peu lente - un peu comme moi essayant de me rappeler si j'ai besoin de splice ou slice . Cela est particulièrement vrai lorsque le WSL lit et écrit dans le système de fichiers. C'est un gros problème pour les développeurs Web, car toute npm install copiera des milliers de fichiers sur votre machine. Je veux dire, je ne sais pas pour vous, mais je ne vais pas jouer avec mes propres cordes.

La version 2 du WSL est une autre histoire. Il est considérablement plus rapide que la version actuelle car il exploite un noyau de virtualisation dans Windows au lieu d'utiliser la couche de traduction. Quand je dis que c'est « considérablement plus rapide », je veux dire beaucoup, beaucoup plus vite. Comme aussi vite que moi Googling "splice vs slice".

Pour cette raison, je vais montrer comment installer le WSL 2. Au moment de la rédaction, cela vous obligera à être sur la version "Insider" de Windows.

Tout d'abord, suivez ce petit guide pour activer le WSL sur Windows 10 et vérifiez votre numéro de version Windows.

Une fois que vous l'avez installé, appuyez sur la touche Windows et tapez "Windows Insider". Choisissez ensuite "Paramètres du programme Windows Insider".

Vous aurez plusieurs options différentes quant à la "sonnerie" sur laquelle vous voulez être. Beaucoup de gens que je connais sont sur la sonnerie rapide. Je suis un gars prudent, cependant. Quand j'étais enfant, je descendais le toboggan de la cour de récréation sur le ventre en me tenant aux côtés. C'est pourquoi je reste sur la sonnerie lente. Je l'utilise depuis plusieurs mois maintenant et je trouve qu'il n'est pas plus perturbateur ou instable que Windows normal.

C'est une bonne option si vous voulez le WSL 2, mais vous ne voulez pas mourir sur la diapositive.

Note : Après avoir publié cet article, j'ai appris que WSL 2 n'est en fait pas sur la sonnerie lente. Vous devrez être sur l'anneau rapide pour l'obtenir. J'ai dû être sur la sonnerie rapide à un moment donné dans le processus d'écriture de cet article. C'est si rapide que ça sonne. Bonne chance sur la diapositive!

Ensuite, vous devez activer la fonctionnalité "Plate-forme de machine virtuelle" dans Windows, qui est requise par la version 2 de WSL. Pour accéder à cet écran, appuyez sur la touche Windows et tapez "fonctionnalités Windows". Sélectionnez ensuite "Activer ou désactiver les fonctionnalités Windows". Sélectionnez "Plate-forme de machine virtuelle". L'option "Sous-système Windows pour Linux" devrait déjà être activée.

Maintenant que le WSL est activé, vous pouvez installer Linux. Vous faites cela, assez ironiquement, directement depuis le Windows Store. Ce n'est qu'en 2019 que je vous suggérerais "d'installer Linux à partir du magasin Windows".

Il existe plusieurs distributions différentes parmi lesquelles choisir, mais Ubuntu sera la plus prise en charge parmi tous les outils que nous configurerons plus tard, y compris VS Code. Toutes les instructions qui viennent d'ici supposent une installation d'Ubuntu. Si vous installez une distribution différente, tous les paris sont ouverts.

Recherchez "Ubuntu" dans le Windows Store. Vous aurez le choix entre trois : Ubuntu, Ubuntu 18.04 et Ubuntu 16.04. Ubuntu aime vraiment ce numéro de version mineure 04, n'est-ce pas ?

La distribution "Ubuntu" (la première dans cette capture d'écran) est la "méta version", ou plutôt un espace réservé qui pointe simplement vers la dernière version. En ce moment, c'est le 18.04.

J'ai opté pour la version méta car plus tard, je vous montrerai comment parcourir le système de fichiers Linux avec l'Explorateur Windows et c'est un peu désordonné d'avoir "Ubuntu 18.04" comme nom de lecteur par rapport à "Ubuntu".

Cette installation est assez rapide en fonction de votre connexion Internet. C'est seulement environ 215 mégaoctets, mais je suis sur une connexion gigabit ici et comment savez-vous si quelqu'un est sur une connexion gigabit ? Ne vous inquiétez pas, ils vous le diront.

Une fois installé, vous aurez maintenant une application "Ubuntu" dans votre menu de démarrage.

Si vous cliquez dessus, vous obtiendrez un terminal Bash !

Prenez un moment pour profiter du miracle de la technologie.

Par défaut, vous exécuterez la version 1 de WSL. Pour passer à la version 2, vous devrez ouvrir un terminal PowerShell et exécuter une commande.

Appuyez sur la touche "Windows" et tapez "Powershell".

À partir du terminal PowerShell, vous pouvez voir la version du WSL dont vous disposez en exécutant wsl --list --verbose .

Si vous affichez la version 1, vous devrez exécuter la commande --set-version et spécifier le nom de l'instance (Ubuntu) et la version souhaitée (2).

 wsl --set-version Ubuntu 2 

Cela va prendre un peu de temps, selon la quantité de viande dont dispose votre machine. Le mien a pris "quelques minutes" plus ou moins. Lorsque ce sera fait, vous serez sur la dernière et la meilleure version du WSL.

Est-ce que votre cerveau est sous Linux… sous Windows.

Linux n'est pas Windows. WSL n'est pas une invite bash au-dessus d'un système d'exploitation Windows. Il s'agit d'un système d'exploitation à part entière avec sa propre structure de dossiers et ses applications installées. Si vous installez Node avec le programme d'installation de Windows, la saisie de node sous Linux échouera car Node n'est pas installé sous Linux. Il est installé sur Windows.

La véritable magie du WSL, cependant, réside dans la façon dont il connecte de manière transparente Windows et Linux afin qu'ils apparaissent comme un seul système de fichiers sur votre machine.

Navigation dans les fichiers et les dossiers

Par défaut, le terminal Ubuntu vous dépose dans votre répertoire personnel Linux (ou /home/your-user-name ). Vous pouvez passer du côté Windows en allant dans /mnt/c .

Notez que certaines autorisations sont refusées ici. Je devrais cliquer avec le bouton droit sur l'icône Ubuntu et cliquer sur "Exécuter en tant qu'administrateur" pour accéder à ces fichiers. C'est ainsi que Windows fait des autorisations élevées. Il n'y a pas de sudo sous Windows.

Lancement d'applications

Vous pouvez lancer n'importe quelle application Windows à partir du terminal Ubuntu. Par exemple, je peux ouvrir l'Explorateur Windows à partir du terminal Unbuntu.

Cela fonctionne aussi en sens inverse. Vous pouvez exécuter n'importe quelle application installée du côté Linux. Ici, j'exécute "fortune" installé sous Linux à partir de la ligne de commande Windows. (Parce que ce n'est pas une bonne installation Linux sans fortune aléatoire et sans signification.)

Deux systèmes d'exploitation différents. Deux systèmes de fichiers différents. Deux ensembles différents d'applications installées. Vous voyez comment cela pourrait devenir déroutant ?

Afin de garder tout droit, je vous recommande de conserver tous vos fichiers et outils de développement JavaScript installés du côté Linux. Cela dit, la possibilité de se déplacer entre Windows et Linux et d'accéder aux fichiers des deux systèmes est la magie de base du WSL. Ne l'oubliez pas, car c'est ce qui rend toute cette configuration meilleure qu'une simple boîte Linux standard.

Configuration de votre environnement de développement

À partir de maintenant, je vais vous donner une liste d'éléments d'opinion pour ce qui, à mon avis, fait une configuration tueur de Linux sur Windows. N'oubliez pas : mes opinions ne sont que cela. Avis . Il se trouve que, comme toutes mes opinions, elles sont 100% correctes.

Obtenir un meilleur terminal

Oui, vous avez un terminal lorsque vous avez installé Ubuntu. C'est en fait la console Windows connectée à votre distribution Linux. Ce n'est pas une mauvaise console. Vous pouvez le redimensionner, activer le copier/coller (dans les paramètres). Mais vous ne pouvez pas faire des choses comme des onglets ou ouvrir de nouvelles fenêtres. Tout comme beaucoup de gens utilisent des programmes de terminal de remplacement sur Mac (j'utilise Hyper), il existe également d'autres options pour Windows. La liste Awesome WSL sur Github contient une liste assez exhaustive.

Ce sont tous de bons émulateurs, mais il existe une nouvelle option conçue par des personnes qui connaissent assez bien Windows.

Microsoft travaille sur une nouvelle application appelée "Windows Terminal".

Windows Terminal peut être installé à partir du Windows Store et est actuellement en mode aperçu. Je l'utilise depuis un certain temps maintenant, et il a suffisamment de fonctionnalités et est suffisamment stable pour que je lui donne une approbation sans réserve.

Le nouveau terminal Windows propose une interface à onglets complets, un copier/coller, plusieurs profils, des arrière-plans transparents, des images d'arrière-plan, voire des images d'arrière-plan transparentes. C'est une journée sur le terrain si vous aimez personnaliser votre terminal, et je suis venu gagner cette course en sac.

Voici mon terminal actuel. Nous allons parcourir quelques-uns des ajustements importants ici.

Le terminal Windows est tout à fait personnalisable. Un clic sur la flèche « ⌄ » en haut à gauche (à côté du signe « + ») vous donne accès aux « Paramètres ». Cela ouvrira un fichier JSON.

Lier Copier/Coller

En haut du fichier se trouvent toutes les liaisons de touches. La première chose que j'ai faite a été de mapper "copier" sur Ctrl + C et coller sur Ctrl + V . Sinon, comment vais-je copier et coller des commandes de Stack Overflow que je ne comprends pas?

 { "command": "copy", "keys": ["ctrl+c"] }, { "command": "paste", "keys": ["ctrl+v"] },

Le problème est que Ctrl + C est déjà mappé sur SIGINT, ou la commande Interrupt/kill sous Linux. Il existe de nombreux terminaux pour Windows qui gèrent cela en mappant Copier/Coller sur Ctrl + Maj + C et Ctrl + Maj + V respectivement. Le problème est que copier/coller est Ctrl + C / Ctrl + V à tous les autres endroits de Windows. J'ai juste continué à appuyer sur Ctrl + C dans le terminal encore et encore en essayant de copier des choses. Je ne pouvais pas m'arrêter de le faire.

Le terminal Windows gère cela différemment. Si vous avez du texte en surbrillance et que vous appuyez sur Ctrl + C , il copiera le texte. S'il y a un processus en cours d'exécution, il envoie toujours la commande SIGINT et l'interrompt. Cela signifie que vous pouvez mapper en toute sécurité Ctrl + C / Ctrl + V pour copier/coller dans le terminal Windows et cela n'interférera pas avec votre capacité à interrompre les processus.

Qui a pensé que copier/coller pouvait causer autant de chagrin ?

Modifier le profil par défaut

Le profil par défaut est celui qui apparaît lorsqu'un nouvel onglet est ouvert. Par défaut, c'est Powershell. Vous voudrez faire défiler vers le bas et trouver le profil Linux. C'est celui qui ouvre wsl.exe -d Ubuntu . Copiez son GUID et collez-le dans le paramètre defaultProfile .

J'ai déplacé ces deux paramètres afin qu'ils soient juste à côté l'un de l'autre pour le rendre plus facile à voir :

Définir l'arrière-plan

J'aime que mon arrière-plan soit de couleur unie sombre avec un logo plat dans le coin droit. Je fais cela parce que je veux que le logo soit lumineux et visible, mais pas dans le sens du texte. Celui-ci, je l'ai fait moi-même, mais il existe une grande collection d'images plates parmi lesquelles choisir sur Simple Desktops.

L'arrière-plan est défini avec la propriété backgroundImage :

 "backgroundImage": "c:/Users/YourUserName/Pictures/earth.png" 

Vous remarquerez également un paramètre appelé "acrylique". C'est ce qui permet de régler l'opacité du fond. Si vous avez une couleur de fond unie, c'est assez simple.

 "background": "#336699", "useAcrylic": true, "acrylicOpacity": 0.5 

Vous pouvez également le faire avec une image d'arrière-plan, en combinant le paramètre arcylicOpacity avec le backgroundImageOpacity :

 "backgroundImage": "c:/Users/username/Pictures/earth-and-stars.png", "useAcrylic": true, "acrylicOpacity": 0.5 

Pour mon thème, la transparence donne l'impression que tout est en sourdine, donc je garde le useAcrylic sur false .

Changer la police

L'équipe qui construit le terminal Windows travaille également sur une nouvelle police appelée "Cascadia Code". Il n'est pas disponible au moment d'écrire ces lignes, vous obtenez donc la police Windows par défaut à la place.

La police par défaut dans le terminal Windows est "Consolas". Il s'agit de la même police que celle utilisée par la ligne de commande Windows. Si vous voulez cette véritable sensation Ubuntu, Chris Hoffman explique comment vous pouvez installer la police officielle Ubuntu Mono.

Voici un avant et un après pour que vous puissiez voir la différence :

 "fontFace": "Ubuntu Mono" 

Ils se ressemblent beaucoup; la principale différence étant l'espacement d'Ubuntu Mono qui rend le terminal un peu plus serré et plus propre.

Schémas de couleurs

Les schémas de couleurs sont tous situés au bas du fichier de paramètres. J'ai copié le jeu de couleurs "Campbell" comme base. J'essaie de faire correspondre les couleurs avec leurs noms, mais je n'ai pas peur non plus de devenir voyou. Je vais mapper "#ffffff" sur "bleu" - je m'en fiche.

Si vous aimez ce schéma particulier que j'ai nommé "Terre", j'ai rassemblé cet essentiel pour que vous n'ayez pas à copier manuellement tout ce gâchis à partir d'une capture d'écran.

Remarque : Les aperçus de couleur proviennent de l'extension "Color Highlight" pour VS Code.

Modifier le répertoire de démarrage par défaut

Par défaut, le profil WSL vous dépose dans votre répertoire personnel côté Windows. Sur la base de la configuration que je recommande dans cet article, il serait préférable de le déposer dans votre dossier de départ Linux home la place. Pour ce faire, modifiez le paramètre startingDirectory dans votre profil "Ubuntu":

 "startingDirectory": "\\\\wsl$\\Ubuntu\\home\\burkeholland"

Notez le chemin là-bas. Vous pouvez utiliser ce chemin (moins les barres obliques d'échappement supplémentaires) pour accéder au WSL à partir de la ligne de commande Windows.

Installer Zsh/Oh-My-Zsh

Si vous n'avez jamais utilisé Zsh et Oh-My-Zsh auparavant, vous allez vous régaler. Zsh (ou "Z Shell") est un shell de remplacement pour Linux. Il étend les capacités de base de Bash, y compris le changement de répertoire implicite (pas besoin de taper cd ), une meilleure prise en charge des thèmes, de meilleures invites et bien plus encore.

Pour installer Zsh, saisissez-le avec le gestionnaire de packages apt, qui est prêt à l'emploi avec votre installation Linux :

 sudo apt install zsh

Installez oh-my-zsh en utilisant curl. Oh-my-zsh est un ensemble de configurations pour zsh qui améliore encore plus l'expérience du shell avec des plugins, des thèmes et une myriade de raccourcis clavier.

 sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Ensuite, il vous demandera si vous souhaitez changer votre shell par défaut en Zsh. Vous le faites, alors répondez par l'affirmative et vous êtes maintenant opérationnel avec Zsh et Oh-My-Zsh.

Vous remarquerez que l'invite est beaucoup plus propre maintenant. Vous pouvez modifier l'apparence de cette invite en modifiant le thème dans le fichier ~/.zshrc .

Ouvrez-le avec nano , qui est un peu comme VIM, mais vous pouvez éditer des choses et quitter quand vous en avez besoin.

 nano ~/.zshrc

Modifiez la ligne qui définit le thème. Il y a une URL au-dessus avec une liste complète de thèmes. Je pense que le "nuage" est sympa. Et mignon.

Pour que les modifications apportées au .zshrc récupérées, vous devrez le sourcer :

 source ~/.zshrc 

Note : Si vous choisissez un thème comme « agnoster » qui nécessite des glyphes, vous aurez besoin d'une version infusée de CPL d'Ubuntu Mono qui a… des glyphes. Sinon, votre terminal sera juste plein de caractères bizarres comme vous vous êtes écrasé le visage sur le clavier. Nerd Fonts en propose une qui semble plutôt bien fonctionner.

Maintenant, vous pouvez faire des choses comme changer de répertoire simplement en entrant le nom du répertoire. Aucun cd requis. Voulez-vous remonter un répertoire ? Faites juste un .. . Vous n'avez même pas besoin de taper le nom complet du répertoire, tapez simplement les premières lettres et appuyez sur la touche de tabulation. Zsh vous donnera une liste de tous les fichiers/répertoires qui correspondent à votre recherche et vous pourrez les parcourir.

Installer le nœud

En tant que développeur Web, vous souhaiterez probablement installer Node. Je suppose que vous n'avez pas besoin d'installer Node pour faire du développement Web, mais c'est vraiment comme ça en 2019 !

Votre premier réflexe pourrait être d'installer node avec apt , ce que vous pouvez faire, mais vous le regretteriez pour deux raisons :

1. La version de Node sur apt est douloureusement obsolète ;
2. Vous devez installer Node avec un gestionnaire de version afin de ne pas rencontrer de problèmes d'autorisations.

La meilleure façon de résoudre ces deux problèmes est d'installer nvm (Node Version Manager). Puisque vous avez installé zsh , vous pouvez simplement ajouter le plugin nvm dans votre fichier zshrc et zsh s'occupe du reste.

Tout d'abord, installez le plugin en clonant dans le repo zsh-nvm . (Ne vous inquiétez pas, Git est livré en standard sur votre installation Ubuntu.)

 git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

Ajoutez-le ensuite en tant que plugin dans le fichier ~/.zshrc .

 `nano ~/.zshrc` plugins (zsh-nvm git) 

N'oubliez pas de sourcer à nouveau le fichier zshrc avec la source ~/.zshrc et vous verrez nvm en cours d'installation.

Vous pouvez maintenant installer node avec nvm. Il facilite l'installation de plusieurs versions côte à côte de node et permet de basculer entre elles sans effort. De plus, aucune erreur d'autorisation lorsque vous effectuez des installations globales de npm !

 nvm install --lts

Je le recommande par rapport à l'installation standard de nvm car le plugin vous permet de mettre facilement à niveau nvm. C'est un peu pénible avec l'installation standard "curl". C'est une commande avec le plugin.

 nvm upgrade

Utiliser les suggestions automatiques

L'un de mes plugins préférés pour zsh est zsh-autosuggestions. Il se souvient des choses que vous avez tapées dans le terminal auparavant, puis les reconnaît lorsque vous recommencez à les taper et "suggère automatiquement" la ligne dont vous pourriez avoir besoin. Ce plugin a été utile plus de fois que je ne m'en souviens, en particulier lorsqu'il s'agit de longues commandes CLI que j'ai utilisées dans le passé, mais dont je ne me souviens jamais.

Clonez le référentiel dans le dossier des extensions zsh :

 git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

Ajoutez-le ensuite à vos plugins zsh et sourcez le fichier zshrc :

 nano ~/.zshrc # In the .zshrc file plugins(zsh-nvm zsh-autosuggestions git) source ~/.zshrc

Le plugin lit votre historique zsh, alors commencez à taper une commande que vous avez déjà tapée et observez la magie. Essayez de taper la première partie de cette longue commande de clonage ci-dessus.

Si vous appuyez sur ↹ , la commande sera complétée automatiquement. Si vous continuez à appuyer sur ↹ , il passera en revue toutes les commandes de votre historique qui pourraient correspondre.

Raccourcis clavier importants

Il y a quelques raccourcis de terminal que j'utilise tout le temps. Je trouve cela avec tous mes outils, y compris VS Code. Essayer d'apprendre tous les raccourcis est une perte de temps car vous ne les utiliserez pas assez pour vous en souvenir.

En voici quelques-uns que j'utilise régulièrement :

C'est ça! Tout le reste, j'ai probablement appris puis oublié parce que ça ne sert à rien.

Configuration de Git (Hub/Lab/Whatevs)

Git vient sur Ubuntu, donc aucune installation n'est requise. Vous pouvez suivre les instructions de l'hébergeur de contrôle de code source de votre choix pour que vos clés ssh soient créées et fonctionnent.

Notez que dans les instructions de Github, il vous est indiqué d'utiliser l'utilitaire "copy" pour copier votre clé ssh. Ubuntu a la commande "xcopy", mais cela ne fonctionnera pas ici car il n'y a pas d'interopérabilité entre Linux et Windows en termes de presse-papiers.

Au lieu de cela, vous pouvez simplement utiliser l'exécutable du Presse-papiers Windows et l'appeler directement depuis le terminal. Vous devez d'abord obtenir le texte avec cat , puis le rediriger vers le presse-papiers de Windows.

 cat ~/.ssh/id_rsa.pub | clip.exe

La documentation Github vous indique de vous assurer que l' ssh-agent est en cours d'exécution. Ce n'est pas. Vous verrez ceci lorsque vous essayez d'ajouter votre clé à l'agent :

Vous pouvez démarrer l'agent, mais la prochaine fois que vous redémarrerez Windows ou que le WSL sera arrêté, vous devrez le redémarrer. C'est parce qu'il n'y a pas de système d'initialisation dans le WSL. Il n'y a pas de systemd ou un autre processus qui démarre tous vos services au démarrage du WSL. WSL est toujours en avant-première et l'équipe travaille sur une solution pour cela.

En attendant, croyez-le ou non, il existe également un plugin zsh pour cela. Il s'appelle ssh-agent , et il est installé avec oh-my-zsh, donc tout ce que vous avez à faire est de le référencer dans le fichier .zshrc .

 zsh-nvm zsh-autosuggestions ssh-agent git

Cela démarrera automatiquement l'agent ssh s'il ne s'exécute pas la première fois que vous lancez le WSL. L'inconvénient est qu'il vous demandera votre phrase de passe chaque fois que WSL sera redémarré. Cela signifie essentiellement chaque fois que vous redémarrez votre ordinateur.

Code VS et WSL

Le WSL n'a pas d'interface graphique, vous ne pouvez donc pas installer un outil visuel comme VS Code. Cela doit être installé du côté de Windows. Cela pose un problème car vous avez un programme en cours d'exécution du côté Windows qui accède aux fichiers du côté Linux, ce qui peut entraîner toutes sortes de bizarreries et des problèmes de «permission refusée». En règle générale, Microsoft vous recommande de ne pas modifier les fichiers du côté WSL avec les programmes Windows.

Pour résoudre ce problème, il existe une extension pour VS Code appelée "Remote WSL". Cette extension est faite par Microsoft et vous permet de développer dans le WSL, mais depuis l'intérieur de VS Code.

Une fois l'extension installée, vous pouvez attacher VS Code directement du côté Ubuntu en ouvrant la palette de commandes ( Ctrl + Maj + P ) et sélectionnez « Remote-WSL : Nouvelle fenêtre ».

Cela ouvre une nouvelle instance de VS Code qui vous permet de travailler comme si vous étiez entièrement du côté Linux. Faire "Fichier/Ouvrir" parcourt le système de fichiers Ubuntu au lieu de celui de Windows.

Le terminal intégré dans VS Code ouvre votre configuration zsh magnifiquement personnalisée. Tout "fonctionne" comme il se doit lorsque l'extension Remote WSL est installée.

Si vous ouvrez le code depuis votre terminal avec code . , VS Code détectera automatiquement qu'il a été ouvert à partir du WSL et attachera automatiquement l'extension Remote WSL.

Extensions de code VS avec WSL distant

L'extension Remote WSL pour VS Code fonctionne en configurant un petit serveur côté Linux, puis en se connectant à celui-ci depuis VS Code côté Windows. Cela étant, les extensions que vous avez installées dans VS Code ne s'afficheront pas automatiquement lorsque vous ouvrirez un projet à partir du WSL.

Par exemple, j'ai un projet Vue ouvert dans VS Code. Même si toutes les extensions Vue appropriées sont installées pour la coloration syntaxique, le formatage, etc., VS Code agit comme s'il n'avait jamais vu de fichier .vue auparavant.

Toutes les extensions que vous avez installées peuvent être activées dans le WSL. Trouvez simplement l'extension que vous voulez dans le WSL et cliquez sur le bouton "Installer dans le WSL".

Toutes les extensions installées dans le WSL apparaîtront dans leur propre section dans la vue Explorateur d'extensions. Si vous avez beaucoup d'extensions, il peut être légèrement ennuyeux d'installer chacune individuellement. Si vous souhaitez simplement installer chaque extension que vous avez dans le WSL, cliquez sur la petite icône de téléchargement dans le cloud en haut de la section "Local - Installé".

Comment configurer vos répertoires de développement

Ceci est déjà un article d'opinion, alors en voici un que vous n'avez pas demandé sur la façon dont je pense que vous devriez structurer vos projets sur votre système de fichiers.

Je garde tous mes projets du côté Linux. Je ne mets pas mes projets dans « Mes documents » pour ensuite essayer de travailler avec eux à partir du WSL. Mon cerveau ne peut pas gérer ça.

Je crée un dossier appelé /dev que je place à la racine de mon dossier /home sous Linux. Dans ce dossier, j'en crée un autre qui porte le même nom que mon dépôt Github : /burkeholland . Ce dossier est l'endroit où vont tous mes projets, même ceux qui ne sont pas poussés vers Github.

Si je clone un référentiel à partir d'un autre compte Github (par exemple "microsoft"), je créerai un nouveau dossier dans "dev" appelé /microsoft . Je clone ensuite le référentiel dans un dossier à l'intérieur de celui-ci.

Fondamentalement, j'imite la même structure que le contrôle de code source sur ma machine locale. Je trouve qu'il est beaucoup plus facile de raisonner sur l'emplacement des projets et sur les dépôts auxquels ils sont attachés simplement en raison de leur emplacement. C'est simple, mais c'est très efficace pour m'aider à tout organiser. Et j'ai besoin de toute l'aide possible.

Parcourir les fichiers à partir de l'explorateur Windows

Il y a des moments où vous devez accéder à un fichier sous Linux du côté Windows. La belle chose à propos de la WSL est que vous pouvez toujours le faire.

Une façon consiste à accéder au WSL comme un lecteur mappé. Accédez-y avec un \\wsl$ directement depuis la barre de l'explorateur :

 \\wsl$ 

Vous pouvez le faire pour différentes raisons. Par exemple, aujourd'hui même, j'avais besoin d'une extension Chrome qui ne se trouve pas dans la boutique en ligne. J'ai donc cloné le dépôt dans WSL, puis j'y ai navigué en tant qu'"extension décompressée" et je l'ai chargé dans Edge.

Une chose que je fais assez fréquemment sous Linux est d'ouvrir le répertoire contenant un fichier directement depuis le terminal. Vous pouvez également le faire dans le WSL en appelant directement explorer.exe . Par exemple, cette commande ouvre le répertoire en cours dans l'Explorateur Windows.

 $ explorer.exe . 

Cette commande est cependant un peu lourde. Sous Linux, c'est juste open . . Nous pouvons faire la même magie en créant un alias dans le ~/.zshrc .

 alias open="explorer.exe"

Docker

Quand j'ai dit que tous les outils devraient être du côté Linux, je voulais dire cela. Cela inclut Docker.

C'est là que le caoutchouc commence vraiment à rencontrer la route. Ce dont nous avons besoin ici, c'est de Docker, exécuté à l'intérieur de Linux exécuté à l'intérieur de Windows. C'est un peu une poupée russe lorsque vous l'écrivez dans un article de blog. En réalité, c'est assez simple.

Vous aurez besoin de la bonne version de Docker pour Windows. Au moment d'écrire ces lignes, il s'agit de l'aperçu technique WSL 2.

Lorsque vous exécutez le programme d'installation, il vous demandera si vous souhaitez utiliser des conteneurs Windows au lieu de conteneurs Linux. Vous le faites certainement. Sinon, vous n'aurez pas la possibilité d'exécuter Docker dans le WSL.

Vous pouvez maintenant activer Docker dans le WSL en cliquant sur l'élément dans la barre d'état système et en sélectionnant "WSL 2 Tech Preview":

Après avoir démarré le service, vous pouvez utiliser Docker dans le WSL comme vous vous en doutez. L'exécution de Docker dans le WSL offre une amélioration considérable des performances, ainsi qu'une augmentation du temps de démarrage à froid sur les conteneurs.

Puis-je également vous recommander d'installer l'extension Docker pour VS Code ? Il met une interface visuelle sur votre configuration Docker et facilite généralement le travail avec Docker car vous n'avez pas à vous souvenir de tous ces indicateurs et options de ligne de commande.

Obtenez plus de Bash sous Windows

À ce stade, vous devriez avoir une idée de la façon d'installer Bash sur Windows et de son fonctionnement une fois que vous l'avez installé. Vous pouvez personnaliser votre terminal à l'infini et il existe toutes sortes de programmes rad que vous pouvez ajouter pour faire des choses comme définir automatiquement des variables PATH, créer des alias, obtenir une vache ASCII dans votre terminal, et bien plus encore.

L'exécution de Bash sous Windows m'a ouvert un tout nouvel univers. Je peux combiner Windows que j'aime pour le côté productivité, et Linux dont je dépends en tant que développeur. Mieux encore, je peux désormais créer des applications pour les deux plates-formes avec une seule machine.

Lectures complémentaires

Vous pouvez en savoir plus sur Bash sur Windows ici :

• « Guide d'installation du sous-système Windows pour Linux pour Windows 10 », Microsoft Docs
• "Comment installer et utiliser le shell Bash sur Windows 10", Chris Hoffman, How-To Geek
• "Partager SSH avec WSL", Drew Wilson
• "Devenir fou avec le sous-système Windows pour Linux", Brian Ketelsen
• "Tout ce que vous pouvez faire avec le nouveau shell Bash de Windows 10", Chris Hoffman, How-To Geek

Un merci spécial à Brian Ketelsen, Matt Hernandez, Rich Turner et Craig Loewen pour leur patience, leur aide et leurs conseils avec cet article.