Spostare lo sviluppo JavaScript in Bash su Windows

Sono una di quelle persone che non possono vivere senza il loro terminale Bash. Questo unico fatto mi ha reso difficile lavorare sul frontend su Windows. Lavoro in Microsoft e sono su un Mac. Non è stato fino a quando la nuova linea di hardware Surface è uscita alcuni anni fa che ho capito: devo avere uno di quelli .

Quindi ne ho uno. Un Surface Book 2 con Windows 10 per l'esattezza. Sto scrivendo questo articolo su di esso proprio ora. E che dire del mio dolce, dolce suggerimento Bash? Beh, l'ho portato con me, ovviamente.

In questo articolo, darò uno sguardo approfondito a come la nuova tecnologia in Windows 10 ti consente di eseguire un terminale Linux completo su Windows. Ti mostrerò anche la mia fantastica configurazione del terminale (che è stata chiamata "la migliore in assoluto" da "me") e come anche tu puoi configurare la tua macchina di sviluppo Windows/Linux.

Se hai desiderato ardentemente un po' di quell'hardware Surface ma non puoi vivere senza un terminale Linux, sei nel posto giusto.

Nota : al momento della stesura di questo articolo, molti degli elementi in questo articolo richiedono l'utilizzo o il passaggio a build di "anteprima" o "insider" di vari elementi, incluso Windows. La maggior parte di queste cose sarà nella build principale di Windows ad un certo punto in futuro.

Sottosistema Windows per Linux (WSL)

Il sottosistema Windows per Linux, o "WSL", è ciò che ti consente di eseguire Linux su Windows. Ma cos'è esattamente questa scienza pazza?

Il WSL, nella sua attuale incarnazione, è un livello di traduzione che converte le chiamate di sistema Linux in chiamate di sistema Windows. Linux funziona su WSL. Ciò significa che per ottenere Linux su Windows, devi fare tre cose:

1. Abilita il WSL,
2. Installa Linux,
3. Includere sempre tre elementi in un elenco.

A quanto pare, quel livello di traduzione è un po' lento, un po' come me che cerco di ricordare se ho bisogno di splice o slice . Ciò è particolarmente vero quando il WSL sta leggendo e scrivendo nel file system. Questo è un grosso problema per gli sviluppatori web poiché qualsiasi npm install copierà migliaia di file sul tuo computer. Voglio dire, non so voi, ma non ho intenzione di tamponare le mie corde.

La versione 2 del WSL è una storia diversa. È notevolmente più veloce della versione attuale perché sfrutta un core di virtualizzazione in Windows invece di utilizzare il livello di traduzione. Quando dico che è "considerevolmente più veloce", intendo molto, molto più veloce. Veloce come me, cercando su Google "splice vs slice".

Per questo motivo, mostrerò come installare WSL 2. Al momento in cui scrivo, ciò richiederà che tu sia sulla build "Insider" di Windows.

Per prima cosa: segui questa breve guida per abilitare il WSL su Windows 10 e controlla il numero di versione di Windows.

Una volta installato, premi il tasto Windows e digita "windows insider". Quindi scegli "Impostazioni del programma Windows Insider".

Avrai un paio di opzioni diverse su quale "anello" vuoi essere. Molte persone che conosco sono sul ring veloce. Sono un ragazzo cauto, però. Da bambino scendevo dallo scivolo del parco giochi a pancia in giù, tenendomi ai lati. Ecco perché rimango sul ring lento. Sono stato su di esso per diversi mesi ormai e trovo che non sia più dirompente o instabile di Windows normale.

È una buona opzione se vuoi il WSL 2, ma non vuoi morire sulla diapositiva.

Nota : dopo aver pubblicato questo articolo, ho appreso che WSL 2 non è in effetti sull'anello lento. Dovrai essere sul ring veloce per ottenerlo. Devo essere stato sul ring ad un certo punto nel processo di scrittura di questo articolo. Così veloce è l'anello. Buona fortuna sullo scivolo!

Successivamente, è necessario abilitare la funzionalità "Virtual Machine Platform" in Windows, richiesta dalla versione 2 di WSL. Per accedere a questa schermata, premere il tasto Windows e digitare "funzionalità di Windows". Quindi seleziona "Attiva o disattiva le funzionalità di Windows". Seleziona "Piattaforma macchina virtuale". L'opzione "Sottosistema Windows per Linux" dovrebbe essere già abilitata.

Ora che il WSL è abilitato, puoi installare Linux. Lo fai, abbastanza ironicamente, direttamente da Windows Store. Solo nel 2019 ti suggerirei di "installare Linux dallo store di Windows".

Esistono diverse distribuzioni tra cui scegliere, ma Ubuntu sarà la più supportata in tutti gli strumenti che configureremo in seguito, incluso VS Code. Tutte le istruzioni che verranno da qui in poi presuppongono un'installazione di Ubuntu. Se installi una distribuzione diversa, tutte le scommesse sono disattivate.

Cerca "Ubuntu" da Windows Store. Ce ne saranno tre tra cui scegliere: Ubuntu, Ubuntu 18.04 e Ubuntu 16.04. A Ubuntu piace davvero quel numero di versione minore 04, vero?

La distro “Ubuntu” (la prima in questo screenshot) è la “meta version”, ovvero un segnaposto che punta solo all'ultima versione. Al momento, sono le 18.04.

Sono andato con la versione meta perché in seguito ti mostrerò come sfogliare il file system Linux con Windows Explorer ed è un po 'disordinato avere "Ubuntu 18.04" come nome dell'unità rispetto solo a "Ubuntu".

Questa installazione è piuttosto veloce a seconda della tua connessione Internet. Sono solo circa 215 megabyte, ma sono su una connessione gigabit qui e come fai a sapere se qualcuno è su una connessione gigabit? Non preoccuparti, te lo diranno.

Una volta installata, ora avrai un'app "Ubuntu" nel menu di avvio.

Se fai clic su quello, otterrai un terminale Bash!

Prenditi un momento per crogiolarti nel miracolo della tecnologia.

Per impostazione predefinita, verrà eseguita la versione WSL 1. Per eseguire l'aggiornamento alla versione 2, è necessario aprire un terminale PowerShell ed eseguire un comando.

Premi il tasto "Windows" e digita "Powershell".

Dal terminale di PowerShell, puoi vedere quale versione di WSL hai eseguendo wsl --list --verbose .

Se stai mostrando la versione 1, dovrai eseguire il comando --set-version e specificare il nome dell'istanza (Ubuntu) e la versione che desideri (2).

 wsl --set-version Ubuntu 2 

Ci vorrà un po', a seconda di quanta carne ha la tua macchina. Il mio ha impiegato "alcuni minuti" a dare o prendere. Al termine, sarai sulla versione più recente e migliore di WSL.

È il tuo cervello su Linux... su Windows.

Linux non è Windows. WSL non è un prompt bash su un sistema operativo Windows. È un sistema operativo completo a sé stante con una propria struttura di cartelle e applicazioni installate. Se installi Node con il programma di installazione di Windows, la digitazione di node in Linux fallirà perché Node non è installato in Linux. È installato su Windows.

La vera magia di WSL, tuttavia, risiede nel modo in cui collega senza soluzione di continuità Windows e Linux in modo che appaiano come un unico file system sulla tua macchina.

Navigazione di file e cartelle

Per impostazione predefinita, il terminale Ubuntu ti porta nella tua home directory di Linux (o /home/your-user-name ). Puoi passare al lato Windows andando su /mnt/c .

Si noti che alcune autorizzazioni sono negate qui. Dovrei fare clic con il pulsante destro del mouse sull'icona di Ubuntu e fare clic su "Esegui come amministratore" per accedere a questi file. Questo è il modo in cui Windows esegue autorizzazioni elevate. Non c'è sudo su Windows.

Avvio di applicazioni

Puoi avviare qualsiasi applicazione Windows dal terminale Ubuntu. Ad esempio, posso aprire Windows Explorer dal terminale Unbuntu.

Questo funziona anche al contrario. Puoi eseguire qualsiasi applicazione installata sul lato Linux. Qui sto eseguendo "fortune" installato in Linux dalla riga di comando di Windows. (Perché non è una corretta installazione di Linux senza fortune casuali e insignificanti.)

Due diversi sistemi operativi. Due diversi file system. Due diversi set di applicazioni installate. Vedi come questo potrebbe creare confusione?

Per mantenere tutto in ordine, ti consiglio di mantenere tutti i tuoi file e strumenti di sviluppo JavaScript installati sul lato Linux delle cose. Detto questo, la capacità di spostarsi tra Windows e Linux e di accedere ai file da entrambi i sistemi è la magia centrale del WSL. Non dimenticarlo, perché è ciò che rende l'intera configurazione migliore di una semplice scatola Linux standard.

Configurare il tuo ambiente di sviluppo

Da qui in poi, ti fornirò un elenco di elementi supponenti per ciò che penso renda un killer Linux su Windows. Ricorda solo: le mie opinioni sono proprio questo. Opinioni . Succede che, come tutte le mie opinioni, sono corrette al 100%.

Ottenere un terminale migliore

Sì, hai un terminale quando hai installato Ubuntu. In realtà è la console di Windows collegata alla tua distribuzione Linux. Non è una cattiva console. Puoi ridimensionarlo, attivare copia/incolla (nelle impostazioni). Ma non puoi fare cose come schede o aprire nuove finestre. Proprio come molte persone usano programmi terminali sostitutivi su Mac (io uso Hyper), ci sono anche altre opzioni per Windows. L'elenco Awesome WSL su Github contiene un elenco piuttosto esauriente.

Questi sono tutti ottimi emulatori, ma c'è una nuova opzione creata da persone che conoscono abbastanza bene Windows.

Microsoft ha lavorato su una nuova applicazione chiamata "Windows Terminal".

Windows Terminal può essere installato da Windows Store ed è attualmente in modalità di anteprima. Lo uso da un po' di tempo ormai, e ha abbastanza funzioni ed è abbastanza stabile da permettermi di dargli un'approvazione a tutto campo.

Il nuovo Terminale di Windows presenta un'interfaccia a schede completa, copia/incolla, profili multipli, sfondi trasparenti, immagini di sfondo e persino immagini di sfondo trasparenti. È una giornata campale se ti piace personalizzare il tuo terminale e io sono venuto per vincere questa corsa con i sacchi.

Ecco il mio attuale terminale. Faremo una passeggiata attraverso alcune delle modifiche importanti qui.

Il terminale di Windows è abbastanza personalizzabile. Cliccando sulla freccia “ ⌄ ” in alto a sinistra (accanto al segno “ + ”) si accede alle “Impostazioni”. Questo aprirà un file JSON.

Rilega copia/incolla

Nella parte superiore del file ci sono tutte le associazioni di tasti. La prima cosa che ho fatto è stata mappare "copia" su Ctrl + C e incollare su Ctrl + V . In quale altro modo posso copiare e incollare comandi da Stack Overflow che non capisco?

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

Il problema è che Ctrl + C è già mappato su SIGINT o sul comando Interrupt/kill su Linux. Ci sono molti terminali là fuori per Windows che gestiscono questo mappando Copia/Incolla rispettivamente su Ctrl + Maiusc + C e Ctrl + Maiusc + V. Il problema è che copia/incolla è Ctrl + C / Ctrl + V ogni altro posto in Windows. Ho semplicemente continuato a premere Ctrl + C nel terminale più e più volte cercando di copiare le cose. Non potevo smettere di farlo.

Il terminale di Windows gestisce questo in modo diverso. Se hai il testo evidenziato e premi Ctrl + C , copierà il testo. Se c'è un processo in esecuzione, invia comunque il comando SIGINT e lo interrompe. Ciò significa che puoi mappare in sicurezza Ctrl + C / Ctrl + V su Copia/Incolla nel terminale di Windows e non interferirà con la tua capacità di interrompere i processi.

Chi ha pensato che il Copia/Incolla potesse causare così tanto dolore?

Modifica il profilo predefinito

Il profilo predefinito è ciò che viene visualizzato quando viene aperta una nuova scheda. Per impostazione predefinita, è Powershell. Ti consigliamo di scorrere verso il basso e trovare il profilo Linux. Questo è quello che apre wsl.exe -d Ubuntu . Copia il suo GUID e incollalo nell'impostazione defaultProfile .

Ho spostato queste due impostazioni in modo che siano l'una accanto all'altra per renderle più facili da vedere:

Imposta lo sfondo

Mi piace che il mio sfondo sia di un colore solido scuro con un logo piatto nell'angolo destro. Lo faccio perché voglio che il logo sia luminoso e visibile, ma non interferisca con il testo. Questo l'ho fatto io, ma c'è una grande raccolta di immagini piatte tra cui scegliere su Simple Desktops.

Lo sfondo è impostato con la proprietà backgroundImage :

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

Noterai anche un'impostazione chiamata "acrilico". Questo è ciò che ti consente di regolare l'opacità dello sfondo. Se hai un colore di sfondo solido, questo è abbastanza semplice.

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

Puoi farlo anche con un'immagine di sfondo, combinando l'impostazione arcylicOpacity con backgroundImageOpacity :

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

Per il mio tema, la trasparenza fa sembrare tutto muto, quindi mantengo l'impostazione useAcrylic su false .

Cambia il carattere

Il team che sta costruendo Windows Terminal sta lavorando anche su un nuovo font chiamato "Cascadia Code". Non è disponibile al momento della stesura di questo articolo, quindi ottieni invece il carattere Windows predefinito.

Il carattere predefinito nel Terminale di Windows è "Consolas". Questo è lo stesso carattere utilizzato dalla riga di comando di Windows. Se vuoi quella vera sensazione di Ubuntu, Chris Hoffman sottolinea come puoi installare il carattere ufficiale di Ubuntu Mono.

Ecco un prima e un dopo in modo da poter vedere la differenza:

 "fontFace": "Ubuntu Mono" 

Sembrano abbastanza simili; la differenza principale è nella spaziatura di Ubuntu Mono che rende il terminale un po' più stretto e pulito.

Combinazioni di colori

Le combinazioni di colori si trovano tutte nella parte inferiore del file delle impostazioni. Ho copiato la combinazione di colori "Campbell" come linea di base. Cerco di abbinare i colori ai loro nomi, ma non ho nemmeno paura di diventare canaglia. Mapperò "#ffffff" su "blu" — non mi interessa nemmeno.

Se ti piace questo schema particolare che ho chiamato "Terra", ho messo insieme questo succo in modo da non dover copiare manualmente tutto questo pasticcio da uno screenshot.

Nota : le anteprime dei colori vengono fornite in virtù dell'estensione "Color Highlight" per VS Code.

Modifica la directory iniziale predefinita

Per impostazione predefinita, il profilo WSL ti porta nella tua home directory sul lato Windows. Sulla base dell'installazione che sto raccomandando in questo articolo, sarebbe preferibile invece essere inserito nella cartella home di Linux. Per farlo, modifica l'impostazione startingDirectory nel tuo profilo "Ubuntu":

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

Nota il percorso lì. È possibile utilizzare questo percorso (meno le barre di escape extra) per accedere a WSL dalla riga di comando di Windows.

Installa Zsh/Oh-My-Zsh

Se non hai mai usato Zsh e Oh-My-Zsh prima, ti aspetta una vera sorpresa. Zsh (o "Z Shell") è una shell sostitutiva per Linux. Espande le funzionalità di base di Bash, incluso il cambio di directory implicito (non è necessario digitare cd ), supporto per temi migliori, prompt migliori e molto altro.

Per installare Zsh, prendilo con il gestore di pacchetti apt, che esce dalla scatola con l'installazione di Linux:

 sudo apt install zsh

Installa oh-my-zsh usando curl. Oh-my-zsh è un insieme di configurazioni per zsh che migliorano ulteriormente l'esperienza della shell con plugin, temi e una miriade di scorciatoie da tastiera.

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

Quindi ti chiederà se vuoi cambiare la tua shell predefinita in Zsh. Lo fai, quindi rispondi affermativamente e ora sei attivo e funzionante con Zsh e Oh-My-Zsh.

Noterai che il prompt è molto più pulito ora. Puoi cambiare l'aspetto di quel prompt cambiando il tema nel file ~/.zshrc .

Aprilo con nano , che è un po' come VIM, ma puoi modificare le cose ed uscire quando necessario.

 nano ~/.zshrc

Cambia la linea che imposta il tema. C'è un URL sopra di esso con un intero elenco di temi. Penso che quello "nuvola" sia carino. E carino.

Per ottenere le modifiche al .zshrc raccolto, dovrai procurartelo:

 source ~/.zshrc 

Nota : se scegli un tema come "agnoster" che richiede glifi, avrai bisogno di una versione powerline infusa di Ubuntu Mono che abbia... glifi. Altrimenti, il tuo terminale sarà pieno di strani caratteri come se avessi schiacciato la tua faccia sulla tastiera. Nerd Fonts ne offre uno che sembra funzionare abbastanza bene.

Ora puoi fare cose come cambiare directory semplicemente inserendo il nome della directory. Nessun cd richiesto. Vuoi tornare su una directory? Basta fare un .. Non devi nemmeno digitare l'intero nome della directory, basta digitare le prime lettere e premere tab. Zsh ti fornirà un elenco di tutti i file/directory che corrispondono alla tua ricerca e potrai sfogliarli.

Installazione del nodo

Come sviluppatore web, probabilmente vorrai installare Node. Suppongo che non sia necessario installare Node per fare sviluppo web, ma sicuramente sembra che sia così nel 2019!

Il tuo primo istinto potrebbe essere quello di installare node con apt , cosa che puoi fare, ma te ne pentiresti per due motivi:

1. La versione di Node su apt è dolorosamente obsoleta;
2. Dovresti installare Node con un gestore di versioni in modo da non incorrere in problemi di autorizzazioni.

Il modo migliore per risolvere entrambi questi problemi è installare nvm (Node Version Manager). Dato che hai installato zsh , puoi semplicemente aggiungere il plugin nvm nel tuo file zshrc e zsh si occupa del resto.

Innanzitutto, installa il plug-in clonandolo nel repository zsh-nvm . (Non preoccuparti, Git viene fornito di serie sulla tua installazione di Ubuntu.)

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

Quindi aggiungilo come plug-in nel file ~/.zshrc .

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

Ricorda di creare nuovamente il file zshrc con source ~/.zshrc e vedrai l'installazione di nvm.

Ora puoi installare il nodo con nvm. Semplifica l'installazione di più versioni affiancate del nodo e il passaggio da una all'altra senza sforzo. Inoltre, nessun errore di autorizzazione quando si eseguono installazioni di npm globali!

 nvm install --lts

Lo consiglio rispetto all'installazione standard di nvm perché il plug-in ti dà la possibilità di aggiornare facilmente nvm. Questo è un po 'un problema con l'installazione standard "arricciatura". È un comando con il plugin.

 nvm upgrade

Utilizza i suggerimenti automatici

Uno dei miei plugin preferiti per zsh è zsh-autosuggestions. Ricorda le cose che hai digitato in precedenza nel terminale, quindi le riconosce quando inizi a digitarle di nuovo e "suggerisce automaticamente" la riga di cui potresti aver bisogno. Questo plugin è tornato utile più volte di quanto riesca a ricordare, in particolare quando si tratta di lunghi comandi CLI che ho usato in passato, ma che non riesco mai a ricordare.

Clona il repository nella cartella delle estensioni zsh:

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

Quindi aggiungilo ai tuoi plugin zsh e crea il file zshrc:

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

Il plug-in legge la cronologia di zsh, quindi inizia a digitare alcuni comandi che hai digitato in precedenza e osserva la magia. Prova a digitare la prima parte di quel lungo comando clone sopra.

Se premi ↹ , completerà automaticamente il comando. Se continui a premere ↹ , passerà in rassegna tutti i comandi nella cronologia che potrebbero corrispondere.

Scorciatoie da tastiera importanti

Ci sono alcune scorciatoie da terminale che uso sempre. Lo trovo con tutti i miei strumenti, incluso VS Code. Cercare di imparare tutte le scorciatoie è una perdita di tempo perché non le userai abbastanza per ricordarle.

Eccone alcuni che uso regolarmente:

Questo è tutto! Tutto il resto probabilmente l'ho imparato e poi dimenticato perché non serve mai.

Configurazione di Git(Hub/Lab/Whatevs)

Git viene fornito su Ubuntu, quindi non è richiesta l'installazione. Puoi seguire le istruzioni sul tuo hoster di controllo del codice sorgente preferito per creare e far funzionare le tue chiavi ssh.

Nota che nelle istruzioni di Github, ti dice di usare l'utilità "copia" per copiare la tua chiave ssh. Ubuntu ha il comando "xcopy", ma qui non funzionerà perché non c'è interoperabilità tra Linux e Windows in termini di appunti.

Invece, puoi semplicemente usare l'eseguibile degli Appunti di Windows e chiamarlo direttamente dal terminale. Devi prima ottenere il testo con cat , quindi reindirizzarlo negli Appunti di Windows.

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

I documenti Github ti dicono di assicurarti che ssh-agent sia in esecuzione. Non è. Vedrai questo quando proverai ad aggiungere la tua chiave all'agente:

È possibile avviare l'agente, ma la prossima volta che si riavvia Windows o si interrompe il WSL, sarà necessario riavviarlo. Questo perché non esiste un sistema di inizializzazione nel WSL. Non esiste un systemd o un altro processo che avvii tutti i tuoi servizi all'avvio di WSL. WSL è ancora in anteprima e il team sta lavorando a una soluzione per questo.

Nel frattempo, che tu ci creda o no, c'è anche un plugin zsh per questo. Si chiama ssh-agent e viene installato con oh-my-zsh, quindi tutto ciò che devi fare è farvi riferimento nel file .zshrc .

 zsh-nvm zsh-autosuggestions ssh-agent git

Questo avvierà automaticamente ssh-agent se non è in esecuzione la prima volta che avvii il WSL. Lo svantaggio è che ti chiederà la tua passphrase ogni volta che WSL viene riavviato. Ciò significa essenzialmente ogni volta che riavvii il computer.

VS Codice e il WSL

Il WSL non ha una GUI, quindi non puoi installare uno strumento visivo come VS Code. Deve essere installato sul lato Windows. Questo presenta un problema perché hai un programma in esecuzione sul lato Windows che accede ai file sul lato Linux e questo può comportare tutta una serie di stranezze e problemi di "autorizzazione negata". Come regola generale, Microsoft consiglia di non modificare i file sul lato WSL con i programmi Windows.

Per risolvere questo problema, esiste un'estensione per VS Code chiamata "WSL remoto". Questa estensione è realizzata da Microsoft e consente di sviluppare all'interno di WSL, ma dall'interno di VS Code.

Una volta installata l'estensione, puoi allegare VS Code direttamente sul lato Ubuntu aprendo la Command Palette ( Ctrl + Maiusc + P ) e seleziona "WSL remoto: nuova finestra".

Questo apre una nuova istanza di VS Code che ti consente di lavorare come se fossi completamente dal lato Linux delle cose. Facendo "File/Apri" si sfoglia il file system di Ubuntu invece di quello di Windows.

Il terminale integrato in VS Code apre la tua configurazione zsh meravigliosamente personalizzata. Tutto "funziona" come dovrebbe quando hai installato l'estensione Remote WSL.

Se apri il codice dal tuo terminale con il code . , VS Code rileverà automaticamente che è stato aperto da WSL e allegherà automaticamente l'estensione WSL remota.

Estensioni del codice VS con WSL remoto

L'estensione Remote WSL per VS Code funziona configurando un piccolo server sul lato Linux e quindi collegandosi a quello da VS Code sul lato Windows. Stando così le cose, le estensioni che hai installato in VS Code non verranno visualizzate automaticamente quando apri un progetto da WSL.

Ad esempio, ho un progetto Vue aperto in VS Code. Anche se ho installato tutte le estensioni Vue corrette per l'evidenziazione della sintassi, la formattazione e simili, VS Code si comporta come se non avesse mai visto un file .vue prima.

Tutte le estensioni installate possono essere abilitate nel WSL. Trova l'estensione che desideri nel WSL e fai clic sul pulsante "Installa in WSL".

Tutte le estensioni installate in WSL verranno visualizzate nella propria sezione nella vista Extensions Explorer. Se hai molte estensioni, potrebbe essere leggermente fastidioso installarle singolarmente. Se vuoi solo installare tutte le estensioni che hai nel WSL, fai clic sulla piccola icona di download del cloud nella parte superiore della sezione "Locale - Installato".

Come configurare le directory di sviluppo

Questo è già un articolo supponente, quindi eccone uno che non hai chiesto su come penso che dovresti strutturare i tuoi progetti sul tuo file system.

Tengo tutti i miei progetti sul lato Linux. Non metto i miei progetti in “I miei documenti” e poi provo a lavorare con loro dal WSL. Il mio cervello non può gestirlo.

Creo una cartella chiamata /dev che metto nella radice della mia cartella /home in Linux. All'interno di quella cartella, ne creo un'altra con lo stesso nome del mio repository Github: /burkeholland . Quella cartella è dove vanno tutti i miei progetti, anche quelli che non sono inviati a Github.

Se clono un repository da un altro account Github (es. "microsoft"), creerò una nuova cartella in "dev" chiamata /microsoft . Quindi clono il repository in una cartella al suo interno.

Fondamentalmente, sto imitando la stessa struttura del controllo del codice sorgente sul mio computer locale. Trovo molto più facile ragionare su dove sono i progetti e a quali repository sono collegati solo in virtù della loro posizione. È semplice, ma è molto efficace nell'aiutarmi a mantenere tutto organizzato. E ho bisogno di tutto l'aiuto possibile.

Esplorazione di file da Esplora risorse

Ci sono momenti in cui è necessario ottenere un file in Linux dal lato Windows. La cosa bella del WSL è che puoi ancora farlo.

Un modo è accedere al WSL proprio come un'unità mappata. Accedi con un \\wsl$ direttamente dalla barra di esplorazione:

 \\wsl$ 

Potresti farlo per una serie di motivi diversi. Ad esempio, proprio oggi avevo bisogno di un'estensione di Chrome che non si trova nel web store. Quindi ho clonato il repository in WSL, quindi sono passato ad esso come "Estensione decompressa" e l'ho caricato in Edge.

Una cosa che faccio con una certa frequenza in Linux è aprire la directory che contiene un file direttamente dal terminale. Puoi farlo anche nel WSL chiamando direttamente explorer.exe . Ad esempio, questo comando apre la directory corrente in Esplora risorse.

 $ explorer.exe . 

Questo comando è un po' ingombrante però. Su Linux, è semplicemente open . . Possiamo fare la stessa magia creando un alias nel ~/.zshrc .

 alias open="explorer.exe"

Docker

Quando ho detto che tutti gli strumenti dovrebbero essere sul lato Linux, intendevo quello. Ciò include Docker.

È qui che la gomma inizia davvero a incontrare la strada. Quello di cui abbiamo bisogno qui è Docker, in esecuzione all'interno di Linux in esecuzione all'interno di Windows. È un po' una bambola russa che nidifica quando la scrivi in ​​un post sul blog. In realtà, è piuttosto semplice.

Avrai bisogno della versione corretta di Docker per Windows. Al momento della stesura di questo articolo, questa è l'anteprima tecnologica di WSL 2.

Quando esegui il programma di installazione, ti verrà chiesto se desideri utilizzare i contenitori di Windows anziché i contenitori di Linux. Lo fai sicuramente. In caso contrario, non avrai la possibilità di eseguire Docker nel WSL.

Ora puoi abilitare Docker nel WSL facendo clic sull'elemento nella barra delle applicazioni e selezionando "WSL 2 Tech Preview":

Dopo aver avviato il servizio, puoi utilizzare Docker all'interno di WSL proprio come ti aspetteresti di poter fare. L'esecuzione di Docker nel WSL offre un notevole incremento delle prestazioni, nonché un aumento del tempo di avvio a freddo sui container.

Posso anche consigliarti di installare l'estensione Docker per VS Code? Mette un'interfaccia visiva sulla configurazione di Docker e generalmente semplifica il lavoro con Docker perché non è necessario ricordare tutti quei flag e opzioni della riga di comando.

Ottieni più Bash su Windows

A questo punto, dovresti farti un'idea su come mettere Bash su Windows e su come funziona una volta che l'hai ottenuto. Puoi personalizzare il tuo terminale all'infinito e ci sono tutti i tipi di programmi rad che puoi aggiungere per fare cose come impostare automaticamente variabili PATH, creare alias, ottenere una mucca ASCII nel tuo terminale e molto altro.

L'esecuzione di Bash su Windows mi ha aperto un universo completamente nuovo. Sono in grado di combinare Windows, che amo per il lato della produttività, e Linux da cui dipendo come sviluppatore. Soprattutto, ora posso creare app per entrambe le piattaforme con un'unica macchina.

Ulteriori letture

Puoi leggere di più su Bash su Windows qui:

• "Guida all'installazione del sottosistema Windows per Linux per Windows 10", Microsoft Docs
• "Come installare e utilizzare Bash Shell su Windows 10", Chris Hoffman, How-To Geek
• "Condivisione di SSH con WSL", Drew Wilson
• "Diventare pazzo con il sottosistema Window per Linux", Brian Ketelsen
• "Tutto quello che puoi fare con la nuova Bash Shell di Windows 10", Chris Hoffman, How-To Geek

Un ringraziamento speciale a Brian Ketelsen, Matt Hernandez, Rich Turner e Craig Loewen per la loro pazienza, aiuto e guida con questo articolo.