Déplacement de votre développement JavaScript vers Bash sous Windows
Je suis l’un de ceux qui ne peuvent pas vivre sans leur terminal Bash. Ce seul fait a rendu difficile le travail de front-end sur Windows. Je travaille chez Microsoft et je suis sur un Mac. Ce n'est que lorsque la nouvelle ligne de matériel Surface est apparue il y a quelques années que je me suis rendu compte: Je dois en avoir un .
Alors j'en ai un. Un Surface Book 2 sous Windows 10 pour être exact. Je suis en train de rédiger cet article à ce sujet. Et que dire de ma douce, douce invite Bash? Bien sûr, je l’ai apporté avec moi.
Dans cet article, je vais examiner en détail comment la nouvelle technologie de Windows 10 vous permet d’exécuter un terminal entièrement Linux sous Windows. Je vais également vous montrer mon incroyable configuration de terminal (nommée "best ever" par "moi") et comment vous pouvez également configurer votre propre machine de développement Windows / Linux.
Si vous avez envie de certains Si ce matériel de Surface ne peut pas vivre sans terminal Linux, vous êtes au bon endroit.
Note : Au moment d'écrire ces lignes, de nombreux éléments de ce Pour utiliser cet article, vous devez utiliser ou passer à des versions "de prévisualisation" ou "internes" de divers éléments, y compris Windows. La plupart de ces éléments figureront dans la version principale de Windows ultérieurement.
Sous-système Windows pour Linux (WSL)
Le sous-système de Windows pour Linux ou "WSL", c’est quoi vous permet d'exécuter Linux sur Windows. Mais qu'est-ce que est exactement cette science folle?
Le WSL, dans sa version actuelle, est une couche de traduction qui convertit les appels système Linux en appels système Windows. Linux s'exécute sur le WSL. Cela signifie que pour obtenir Linux sous Windows, vous devez faire trois choses:
- Activez le WSL,
- Installez Linux,
- Incluez toujours trois éléments dans une liste.
En fin de compte, cette couche de traduction est un peu sur le côté lent – un peu comme moi essayant de me rappeler si j'ai besoin de épissure
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
proprement dite copiera des milliers de fichiers sur votre ordinateur. Je veux dire, je ne sais pas pour vous, mais je ne vais pas me mettre à gauche avec mes propres chaînes .
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 sous Windows au lieu d’utiliser la couche de traduction. Quand je dis que c’est «considérablement plus rapide», j’entends bien, beaucoup plus vite. Aussi vite que moi googler “splice vs slice”.
C'est pourquoi je vais vous montrer comment installer le WSL 2. Au moment de la rédaction de cet article, vous devrez être présent sur la page “Insider ”Build of Windows.
Tout d’abord: suivez ce petit guide pour activer le WSL sous Windows 10 et vérifier le numéro de version de Windows.
Une fois que vous l’avez installé, appuyez sur la touche Windows, puis sur tapez «initié Windows». Choisissez ensuite «Paramètres du programme Windows Insider».

Vous aurez le choix entre deux options de «sonnerie». vouloir être sur. Je sais que beaucoup de gens sont sur le ring rapide. Je suis un gars prudent, cependant. Quand j'étais enfant, je descendais la glissoire du terrain de jeu sur mon ventre en me tenant sur les côtés. C'est pourquoi je reste sur le ring lent. Cela fait plusieurs mois que je suis dessus et je trouve que ce n'est pas plus perturbant ni instable que Windows classique.
C'est une bonne option si vous voulez le WSL 2, mais vous ne voulez pas mourir diapositive.

Ensuite, vous devez activer la fonctionnalité «Plate-forme de machine virtuelle» dans Windows, requise par le WSL version 2. 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 «Plateforme de machine virtuelle». L'option “Sous-système Windows pour Linux” devrait déjà être activée.

Vous pouvez choisir parmi plusieurs distributions, mais Ubuntu sera la plus prise en charge parmi tous les outils que nous configurerons ultérieurement, y compris Code VS Toutes les instructions à partir de maintenant supposent une installation Ubuntu. Si vous installez une distribution différente, tous les paris sont désactivés.
Recherchez «Ubuntu» dans le Windows Store. Il y en aura trois au choix: 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» (le premier une 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. Pour l'instant, c'est 18.04.
J'y suis allé avec la version méta car plus tard, je vous montrerai comment naviguer dans le système de fichiers Linux avec Windows Explorer et c'est un peu compliqué d'avoir «Ubuntu 18.04» comme nom de lecteur contre juste “Ubuntu”.
Cette installation est assez rapide en fonction de votre connexion Internet. C’est seulement environ 215 mégaoctets, mais j’ai une connexion gigabit ici et comment savoir si une connexion gigabit est utilisée? Ne vous inquiétez pas, ils vous le diront.
Une fois installé, vous aurez maintenant une application «Ubuntu» dans votre menu Démarrer.

Si vous cliquez dessus, vous obtenez un terminal Bash!

Prenez un moment pour admirer le miracle de la technologie.
Par défaut, vous utiliserez la version 1 du WSL. Pour effectuer la mise à niveau vers la version 2, vous devez ouvrir un terminal PowerShell et exécuter une commande. ] Appuyez sur la touche «Windows» et tapez «Powershell».

À partir du terminal PowerShell, vous pouvez voir lequel version du fichier WSL que vous avez en exécutant wsl
-
liste
-
version
.

Si vous affichez la version 1, vous devez exécuter la commande - set-version
et spécifier le nom de l'instance (Ubuntu) et la version de votre choix (2).
wsl --set-version Ubuntu 2

Cela va prendre un peu, selon la quantité de viande de votre machine. Le mien a pris "quelques minutes" à peu près. Ceci fait, vous utiliserez la dernière et la plus grande version du WSL.
Linux est votre cerveau sous… sous Windows
Linux n’est pas Windows. WSL n'est pas une invite bash sur un système d'exploitation Windows. Il s’agit d’un système d’exploitation complet doté de sa propre structure de dossiers et d’applications installées. Si vous installez Node avec le programme d'installation Windows, la saisie du nœud
sous Linux va échouer car ce nœud n'est pas installé sous Linux. Il est installé sur Windows.
La véritable magie du WSL réside toutefois dans le fait qu'il connecte de manière transparente Windows et Linux afin qu'ils apparaissent sous la forme d'un système de fichiers sur votre ordinateur.
Navigation dans les dossiers et les dossiers
Par défaut, le terminal Ubuntu vous place dans votre répertoire personnel Linux (ou / home / votre-nom-d'utilisateur
). Vous pouvez passer du côté de Windows en allant à / mnt / c
.

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 également à l'envers. Vous pouvez exécuter n'importe quelle application installée du côté Linux. Ici, j'exécute «fortune» installée sous Linux à partir de la ligne de commande Windows. (Parce que ce n'est pas une installation correcte de Linux sans fortunes aléatoires et sans signification.)

Deux systèmes d'exploitation différents. systèmes. Deux systèmes de fichiers différents. Deux ensembles différents d'applications installées. Voyez comment cela pourrait être déroutant?
Pour que tout reste clair, je vous recommande de garder tous vos fichiers et outils de développement JavaScript installés du côté de Linux. Cela dit, la possibilité de passer de Windows à Linux et d’accéder aux fichiers des deux systèmes est la magie fondamentale du WSL. N'oubliez pas ça, car c'est ce qui rend toute cette configuration meilleure qu'une simple machine Linux standard.
Configuration de votre environnement de développement
À partir de maintenant, je vais vous donner une liste d'éléments dignes d'opinion pour ce que je pense fait un tueur Linux sur l'installation de Windows. Rappelez-vous simplement: mes opinions ne sont que cela. Opinions . Il se trouve que, comme toutes mes opinions, elles sont correctes à 100%.
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 terminaux de remplacement sur Mac (j'utilise Hyper), il existe également d'autres options pour Windows. La liste Awesome WSL de Github en contient une liste assez exhaustive
Ce sont tous de bons émulateurs, mais il existe une nouvelle option conçue par des personnes connaissant bien Windows.
Microsoft a été travaille sur une nouvelle application appelée « Terminal Windows ».

Le terminal Windows peut être installé à partir de le Windows Store et est actuellement en mode de prévisualisation. Je l'utilise depuis un certain temps maintenant, et il possède suffisamment de fonctionnalités et est suffisamment stable pour que je puisse lui donner mon aval.
Le nouveau terminal Windows propose une interface à onglets complets, un copier / coller, de multiples fonctions. profils, arrière-plans transparents, images d'arrière-plan – même les images d'arrière-plan transparentes. C’est une journée bien remplie si vous souhaitez personnaliser votre terminal et je suis venu gagner cette course en sac.
Voici mon terminal actuel. Nous allons parcourir quelques-unes des modifications importantes qui nous intéressent ici.

Le terminal Windows est assez personnalisable. En cliquant sur la flèche « » en haut à gauche (à côté du signe « & plus; »), vous accédez à «Paramètres». Cela ouvrira un fichier JSON.
Liaison Copier / Coller
Toutes les liaisons de clé figurent en haut du fichier. La première chose que j'ai faite a été de «copier» la carte dans Ctrl + C et de la coller dans Ctrl + V . Sinon, comment vais-je copier et coller des commandes de Stack Overflow que je ne comprends pas?
{
"commande": "copie",
"clés": ["ctrl+c"]
},
{
"commande": "coller",
"clés": ["ctrl+v"]
},
Le problème est que Ctrl + C est déjà mappé sur SIGINT, ou sur la commande Interrupt / kill sous Linux. Il existe de nombreux terminaux pour Windows qui gèrent cela en mappant Copier / Coller vers Ctrl + Maj + C et Ctrl + Maj + V respectivement. Le problème est que le copier / coller est Ctrl + C / Ctrl + V à un autre emplacement dans Windows. Je n'arrêtais pas d'appuyer sur Ctrl + C dans le terminal pour essayer 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 le texte sera copié. Si un processus est 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 à Copier / Coller dans le terminal Windows sans que cela nuise à votre capacité d'interrompre les processus.
Ceux qui pensaient que copier / coller pouvait causer beaucoup de chagrin d'amour?
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 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 l'un à côté de l'autre pour faciliter la visualisation:

Définir l’arrière-plan
J’aime bien que mon arrière-plan soit de couleur unie foncée avec un logo plat dans le coin droit . Je le fais parce que je veux que le logo soit clair et visible, mais pas à la manière du texte. C’est celui-ci que j’ai fabriqué moi-même, mais il existe une grande collection d’images plates dans Simple Desktops .
L’arrière-plan est composé du backgroundImage
propriété:
" backgroundImage ":" c: /Users/YourUserName/Pictures/earth.png "

Vous remarquerez également un paramètre appelé «acrylique». C'est ce qui vous permet de régler l'opacité de l'arrière-plan. Si vous avez une couleur d’arrière-plan unie, c’est assez simple.
"background": "# 336699",
"useAcrylic": vrai,
"acryliqueOpacité": 0.5

Vous pouvez également obtenir cette image de fond en combinant le réglage arcylicOpacity
avec le backgroundImageOpacity
:
"backgroundImage": "c: /Users/username/Pictures/earth-and-stars.png",
"useAcrylic": vrai,
"acryliqueOpacité": 0.5

Pour mon thème, la transparence donne l'impression que tout est en sourdine. Je conserve donc l'utilisation de Acrylique
. ] réglé sur false
.
Modification de la police
L’équipe chargée de la construction du terminal Windows travaille également sur une nouvelle police appelée «Cascadia Code». Elle n’était pas disponible au moment de la rédaction de ce manuel, vous obtenez donc la police Windows par défaut
. La police par défaut du terminal Windows est “Consolas”. C'est la même police utilisée par la ligne de commande Windows. Si vous voulez cette vraie sensation Ubuntu, Chris Hoffman vous explique comment installer la police officielle Ubuntu Mono .
Voici un avant et un après pour vous permettre de voir la différence: 19659056] "fontFace": "Ubuntu Mono"

Elles se ressemblent beaucoup; la principale différence réside dans l'espacement d'Ubuntu Mono, ce qui rend le terminal un peu plus étroit et plus propre.
Schémas de couleurs
Les schémas de couleurs se trouvent tous au bas du fichier de paramètres. J'ai copié la palette de couleurs «Campbell» comme base. J'essaie d'associer les couleurs à leurs noms, mais je n'ai pas peur de devenir méchant non plus. Je mapperai «#ffffff» en «bleu» – cela m'est égal.

Si vous aimez ce schéma particulier que j'ai nommé «Terre», j'ai assemblé cet élément essentiel pour que vous n'ayez pas à copier manuellement tout ce gâchis d'une capture d'écran.
Note : Les aperçus de couleur sont générés en vertu de l'extension « Color Highlight » pour VS Code.
Modifier le répertoire de départ par défaut
Par défaut, le profil WSL est supprimé. vous dans votre répertoire personnel du côté Windows. Selon la configuration que je recommande dans cet article, il serait préférable de le déposer dans votre dossier Linux home
. Pour ce faire, modifiez le paramètre startingDirectory
dans votre profil «Ubuntu»:
"startedDirectory": "\\ wsl $ \ Ubuntu \ home \ burkeholland"
Notez le chemin là-bas. Vous pouvez utiliser ce chemin (sans les barres obliques d'échappement supplémentaires) pour accéder au WSL à partir de la ligne de commande Windows.

Installez Zsh / Oh-My-Zsh
Si vous n'avez jamais utilisé Zsh et Oh-My-Zsh auparavant, vous êtes dans le coup un vrai régal. Zsh (ou "Z Shell") est un shell de remplacement pour Linux. Il développe les fonctionnalités de base de Bash, y compris la commutation de répertoire implicite (inutile 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 Le gestionnaire de paquets apt, qui sort de la boîte 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 davantage 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 modifier votre shell par défaut en Zsh. Répondez par l'affirmative et vous êtes prêt à utiliser 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
un peu comme VIM, mais vous pouvez éditez les choses et quittez 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 modifier le .zshrc
vous l'avez aurez besoin de le rechercher:
source ~ / .zshrc

Note : Si vous choisissez un thème comme "agnoster" qui nécessite des glyphes, vous Vous aurez besoin d’une version d’Ubuntu Mono infusé sur courant porteur qui comporte… des glyphes. Sinon, votre terminal sera rempli de personnages étranges comme si vous écrasiez votre visage sur le clavier. Nerd Fonts en propose une qui semble fonctionner assez bien.
Vous pouvez désormais changer de répertoire en entrant simplement le nom du répertoire. N ° cd
requis. Tu veux remonter un répertoire? Il suffit de faire un ..
. Vous n’avez même pas besoin de taper le nom complet du répertoire, il vous suffit de taper les premières lettres et de cliquer sur tab. Zsh vous donnera une liste de tous les fichiers / répertoires qui correspondent à votre recherche et vous pouvez les parcourir.

En tant que développeur Web, vous allez probablement vouloir installer Node. Je suppose que vous n'avez pas pour installer Node afin de faire du développement Web, mais ça en a vraiment l'air en 2019.
Votre premier instinct pourrait être d'installer un nœud avec apt
ce que vous pouvez faire, mais vous le regretteriez pour deux raisons:
- La version de Node sur apt est périmée;
- Vous devez installer Node avec un gestionnaire de version afin de ne pas rencontrer de problèmes d'autorisations. .
Le meilleur moyen de résoudre ces deux problèmes consiste à installer nvm (Node Version Manager). Depuis que vous avez installé zsh
vous pouvez simplement ajouter le plugin nvm dans votre fichier zshrc et que zsh se charge du reste.
Commencez par installer le plug-in par clonage dans le répertoire zsh-nvm.
repo. (Ne vous inquiétez pas, Git est livré en standard sur votre installation Ubuntu.)
clone git https://github.com/lukechilds/zsh-nvm ~ / .oh-my-zsh / custom / plugins / zsh-nvm
Ajoutez-le ensuite en tant que plug-in dans le fichier ~ / .zshrc
.
`nano ~ / .zshrc`
plugins (zsh-nvm git)

N'oubliez pas de ré-alimenter le fichier zshrc avec source ~ / .zshrc
et vous verrez que nvm est en cours d'installation.

Vous pouvez désormais installer le noeud avec nvm. Il est facile d’installer plusieurs versions côte à côte du noeud et de passer facilement d’une version à l’autre. De plus, aucune erreur d’autorisation n’est générée lors de l’installation de npm à l’échelle mondiale!
Je recommande cette option plutôt que l'installation standard de NVM, car le plug-in vous permet de mettre à niveau facilement 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 mémorise les éléments que vous avez déjà saisis dans le terminal, puis les reconnaît lorsque vous recommencez à les saisir, ainsi que la fonction de suggestion automatique de la ligne dont vous pourriez avoir besoin. Ce plugin m'a été utile bien plus que je ne m'en souvienne, en particulier en ce qui concerne les longues commandes CLI que je utilisais auparavant, mais dont je ne me souviens plus jamais.
Clonez le référentiel dans le dossier d'extensions zsh: [19659117] git clone https://github.com/zsh-users/zsh-autosuggestions ~ / .oh-mon-zsh / custom / plugins / zsh-autosuggestions
Ajoutez-le à vos plugins zsh et sourcez le fichier zshrc:
nano ~ / .zshrc
# Dans le fichier .zshrc
plugins (zsh-nvm zsh-autosuggestions git)
source ~ / .zshrc
Le plug-in lit votre historique zsh. Commencez donc à taper une commande que vous avez déjà saisie et observez la magie. Essayez de taper la première partie de la commande de clonage longue ci-dessus.

Si vous appuyez sur ↹ la commande sera complétée automatiquement. Si vous continuez d'appuyer sur ↹ toutes les commandes de votre historique susceptibles de correspondre sont passées en revue.
Raccourcis clavier importants
Certains raccourcis terminaux sont utilisés régulièrement. . 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:
Terminal Shortcut | Que fait-il? ] Ctrl + L | Ceci efface le terminal et vous ramène au sommet. C'est l'équivalent de taper «clear». |
---|---|---|
Ctrl + U | Ceci efface uniquement la ligne actuelle. | |
Ctrl + A | Déplace le curseur. jusqu'au début de la ligne de commande. | |
Ctrl + E | Passe au bout de la ligne. | |
Ctrl + K | Supprimez tous les caractères. après le curseur. |
Ça y est! Tout le reste que j’ai probablement appris, puis oublié, car il n’a jamais été utilisé.
Configuration de Git (Hub / Lab / Whatevs)
Git s’applique sous Ubuntu, aucune installation n’est donc requise. Vous pouvez suivre les instructions auprès de l’organisateur de votre choix pour obtenir vos clés ssh créées et fonctionnelles.
Notez que dans les instructions Github, il vous est conseillé d’utiliser l’utilitaire «copy» pour copier vos fichiers. 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-papier.
A la place, vous pouvez simplement utiliser l'exécutable du Presse-papier Windows et l'appeler directement depuis le Terminal. Vous devez d'abord obtenir le texte avec cat
puis le diriger vers le presse-papiers de Windows.
cat ~ / .ssh / id_rsa.pub | clip.exe
Les Github docs vous disent de vous assurer que le 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 au prochain redémarrage de Windows ou de l’arrêt du WSL, vous devrez le redémarrer. En effet, il n'y a pas de système d'initialisation dans le WSL. Il n'y a pas de systemd
ni aucun autre processus qui lance tous vos services au démarrage du WSL. WSL est toujours en avant-première et l’équipe cherche une solution à ce problème.
Entre-temps, qu’il n’y en ait pas encore un plugin zsh. Il s'appelle ssh-agent
et il est installé avec oh-my-zsh, il vous suffit donc de le référencer dans le fichier .zshrc
.
zsh-nvm zsh-autosuggestions ssh-agent git
Ceci démarrera automatiquement ssh-agent s’il ne s’exécute pas la première fois que vous lancez le WSL. L’inconvénient est qu’il va vous demander votre phrase secrète à chaque démarrage de WSL. Cela signifie essentiellement à chaque fois que vous redémarrez votre ordinateur.

Le code VS et le WSL
Le WSL n’a pas Interface graphique, vous ne pouvez donc pas installer un outil visuel comme VS Code. Cela doit être installé du côté Windows. Cela pose un problème car un programme fonctionnant du côté Windows accédant à des fichiers du côté Linux, il peut en résulter tous les problèmes de bizarrerie et de «permission refusée». En règle générale, Microsoft vous recommande de ne pas modifier les fichiers du côté WSL avec des 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 au sein du WSL, mais à partir de l'intérieur de VS Code.
Une fois l'extension installée, vous pouvez attacher le code VS directement au côté Ubuntu en ouvrant la palette de commande (

Ceci ouvre une nouvelle instance de VS Code qui vous permet de travailler comme si vous étiez complètement du côté Linux. Faire «Fichier / Ouvrir» parcourt le système de fichiers Ubuntu au lieu de Windows

Le terminal intégré dans le code VS ouvre votre configuration zsh magnifiquement personnalisée. Tout "fonctionne" comme il se doit lorsque l'extension WSL distante est installée.
Si vous ouvrez du code à partir de votre terminal avec le code .
VS Code détectera automatiquement qu'il a été ouvert à partir du WSL, et joindra automatiquement l'extension WSL distante.
Extensions VS Code avec WSL distant
L'extension WSL distante pour VS Code fonctionne en configurant un petit serveur côté Linux, puis en se connectant à celui-ci à partir de VS Code sur le côté Windows. Dans ce cas, les extensions que vous avez installées dans VS Code ne sont pas automatiquement affichées lorsque vous ouvrez un projet à partir du WSL.
Par exemple, un projet Vue est 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 si aucun fichier .vue
n'avait jamais été vu auparavant.

Toutes les extensions que vous avez installées peuvent être activées dans le WSL. Il vous suffit de trouver l'extension souhaitée dans le WSL, puis de cliquer sur le bouton «Installer dans 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 gênant d'installer chacune d'elles 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 nuage située en haut de la section 'Local – Installed'.

How To Setup Your Dev Directories
This is already an opinionated article, so here's one you didn't ask for on how I think you should structure your projects on your file system.
I keep all my projects on the Linux side. I don’t put my projects in “My Documents” and then try and work with them from the WSL. My brain can’t handle that.
I create a folder called /dev
that I put in the root of my /home
folder in Linux. Inside that folder, I create another one that is the same name as my Github repo: /burkeholland
. That folder is where all of my projects go — even the ones that aren’t pushed to Github.
If I clone a repo from a different Github account (e.g. “microsoft”), I’ll create a new folder in “dev” called /microsoft
. I then clone the repo into a folder inside of that.
Basically, I’m mimicking the same structure as source control on my local machine. I find it far easier to reason about where projects are and what repos they are attached to just by virtue of their location. It’s simple, but it is highly effective at helping me keep everything organized. And I need all the help I can get.

Browsing Files From Windows Explorer
There are times when you need to get at a file in Linux from the Windows side. The beautiful thing about the WSL is that you can still do that.
One way is to access the WSL just like a mapped drive. Access it with a \wsl$
directly from the explorer bar:
\wsl$

You might do this for a number of different reasons. For instance, just today I needed a Chrome extension that isn’t in the web store. So I cloned the repo in WSL, then navigated to it as an “Unpacked Extension” and loaded it into Edge.
One thing that I do with some frequency in Linux is to open the directory that contains a file directly from the terminal. You can do this in the WSL, too, by directly calling explorer.exe
. For instance, this command opens the current directory in Windows Explorer.
$ explorer.exe .

This command is a bit cumbersome though. On Linux, it’s just open .
. We can make that same magic by creating an alias in the ~/.zshrc
.
alias open="explorer.exe"
Docker
When I said all tooling should be on the Linux side, I meant that. That includes Docker.
This is where the rubber really starts to meet the road. What we need here is Docker, running inside of Linux running inside of Windows. It’s a bit of a Russian Nesting Doll when you write it down in a blog post. In reality, it’s pretty straightforward.
You’ll need the correct version of Docker for Windows. As of the time of this writing, that’s the WSL 2 Tech Preview.
When you run the installer, it will ask you if you want to use Windows containers instead of Linux containers. You definitely do. Otherwise, you won’t get the option to run Docker in the WSL.

You can now enable Docker in the WSL by clicking on the item in the system tray and selecting “WSL 2 Tech Preview”:

After you start the service, you can use Docker within the WSL just as you would expect to be able to. Running Docker in the WSL provides a pretty big performance boost, as well as a boost in cold start time on containers.
Might I also recommend that you install the Docker extension for VS Code? It puts a visual interface on your Docker setup and generally just makes it easier to work with Docker because you don’t have to remember all those command-line flags and options.
Get More Bash On Windows
At this point, you should get the idea about how to put Bash on Windows, and how it works once you get it there. You can customize your terminal endlessly and there are all sorts of rad programs that you can add in to do things like automatically set PATH variables, create aliases, get an ASCII cow in your terminal, and much more.
Running Bash on Windows opened up an entirely new universe for me. I’m able to combine Windows which I love for the productivity side, and Linux which I depend on as a developer. Best of all, I can build apps for both platforms now with one machine.
Further Reading
You can read more about Bash on Windows over here:
Special thanks to Brian Ketelsen, Matt Hernandez, Rich Turner, and Craig Loewen for their patience, help, and guidance with this article.

Source link