Fermer

septembre 11, 2019

Déplacement de votre développement JavaScript vers Bash sous Windows28 minutes de lecture

A GIF demonstrating the opening of Windows explorer on the current directory from the terminal


À propos de l'auteur

Burke Holland est un développeur front-end basé à Nashville, dans le Tennessee; la plus grande ville du monde. Il apprécie beaucoup JavaScript car c’est le seul moyen pour lui…
Plus d'informations sur
Burke
Hollande

Vous aimez votre terminal Bash mais vous aimez aussi votre PC? Vous avez peut-être surveillé certains des nouveaux équipements Surface, mais vous ne pouvez pas effectuer le changement sans votre terminal. Maintenant, vous pouvez avoir Windows et Bash. Dans cet article, nous allons examiner en détail comment configurer un boîtier de développement Windows / Linux pour le développement JavaScript.

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:

  1. Activez le WSL,
  2. Installez Linux,
  3. 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».

 Option de menu Paramètres du programme Windows Insider
( Grand aperçu )

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.

 Écran des paramètres de Windows Insider affichant un anneau «lent»
( Grand aperçu )

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.

 L'écran “Fonctionnalités Windows” avec “Plate-forme de machine virtuelle” et “Sous-système Windows pour Linux” est mis en surbrillance
( de grand aperçu ) [19659022] Maintenant que le WSL est activé, vous pouvez installer Linux. Ironiquement, vous le faites directement depuis le Windows Store. Je suggère que vous installiez Linux à partir du magasin Windows uniquement en 2019.

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?

 L'élément «Ubuntu» dans Windows Store
( Grand aperçu )

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.

 Ubuntu est installé et apparaît dans le menu Démarrer de Windows
( Grand aperçu )

Si vous cliquez dessus, vous obtenez un terminal Bash!

 Le terminal Ubuntu sous Windows
( Grand aperçu )

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».

 L’élément «Powershell» dans le menu Démarrer
( Grand aperçu )

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

 Créer une liste détaillée de toutes les instances WSL à partir de w ithin Powershell
( Grand aperçu )

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
 Régler la version 2 de WSL sur la version 2 avec Powershell
( Grand aperçu )

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 .

 Le terminal Ubuntu avec le contenu du disque C répertorié
( Grand aperçu ) 19659022] 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 comme ça que Windows fait des permissions élevées. Il n'y a pas de sudo sur 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.

 L'explorateur Windows et le terminal Ubuntu
( Grand aperçu )

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.)

 La ligne de commande Windows exécutant le programme «fortune» de Linux
( Grand aperçu )

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 ».

 L'élément Terminal Windows du Windows Store
( Grand aperçu )

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.

 Terminal actuel de l’auteur: fond bleu foncé avec une planète de bandes dessinées dans le coin inférieur droit. Texte vert et blanc.
( Grand aperçu )

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:

 Le profil de terminal par défaut mis en surbrillance dans le fichier settings.json
( Grand aperçu )

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 "
 Une image carrée bleue avec une planète de bande dessinée dans le coin inférieur droit
( Grand aperçu )

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
 Le terminal dont l'arrière-plan est légèrement transparent
( Grand aperçu )

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
 Le terminal avec à la fois une image transparente et un arrière-plan transparent
( Grand aperçu )

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"

 Comparaison côte à côte des polices Consolas et Unbuntu Mono dans le terminal
( Grand aperçu )

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.

 Les paramètres de jeu de couleurs du fichier settings.json
( Grand aperçu )

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.

 Une commande “dir” est exécutée sur le répertoire de base Linux à partir de la ligne de commande Windows
( Grand aperçu )

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.

 Le terminal vous demande si vous souhaitez modifier le shell par défaut
( Grand aperçu )

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.

 Le thème «nuage» étant défini dans le fichier zshrc
( Grand aperçu )

Pour modifier le .zshrc vous l'avez aurez besoin de le rechercher:

 source ~ / .zshrc
 Invite du thème "nuage"
( Grand aperçu )

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.

 Le terminal avec l'un des nombreux chemins mis en évidence
( Grand aperçu ) [19659164] Installation de Node

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:

  1. La version de Node sur apt est périmée;
  2. 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)
 Le fichier zshrc avec le plug-in zsh-vnm ajouté
( Grand aperçu )

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

 Le terminal indiquant la progression de l'installation de nvm
( Grand aperçu )

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.

 Le terminal affichant les autosuggestions zsh complétant automatiquement une commande de clonage git
( Grand aperçu )

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:

 Le terminal indiquant que l'agent ssh n'est pas en cours d'exécution
( Grand aperçu )

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 terminal demandant la phrase secrète de la clé rsa
( Grand aperçu )

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 ( Ctrl + Maj + P) et sélectionnez “Remote-WSL: Nouvelle fenêtre”.

 Code VS avec la commande “Remote WSL: Nouvelle fenêtre” mise en surbrillance dans la palette de commandes
( Grand aperçu )

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

 La vue «Ouvrir le fichier» du code VS
( Grand aperçu )

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.

 Un fichier .vue ouvert dans VS Code sans mise en surbrillance syntaxique
( Grand aperçu )

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».

 La page de renvoi de l'extension Vetur VS Code dans VS Code
( Grand aperçu .

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'.

 La vue Extensions dans VS Code avec toutes les extensions installées dans WSL icon highlighted
(Large preview)

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.

The authors opinionated folder structure listed in the terminal
(Large preview)

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$
The Windows Explorer the Ubuntu installation as a mounted directory
(Large preview)

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 .
A GIF demonstrating the opening of Windows explorer on the current directory from the terminal

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.

The Docker Installation screen with “Use Windows Containers” option selected
(Large preview)

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

The WSL2 Tech Preview Option in the Docker Daemon context menu
(Large 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.

Smashing Editorial(rb, dm, il)



Source link

Revenir vers le haut