Suggerimenti e trucchi per VSCode per utenti esperti

Perché dovrei voler essere un utente avanzato di Visual Studio?

Diventare un power user è un altro modo per stare al passo. Gli sviluppatori parlano spesso di come rimangono al top del loro gioco e di come imparano costantemente cose nuove e continuano ad affinare le proprie abilità. Questa è una domanda frequente nel colloquio, poiché i datori di lavoro tendono a preferire il talento dedicato all'ampliamento delle proprie competenze. Padroneggiare il tuo IDE e il tuo computer potrebbe essere uno dei migliori investimenti nel tuo sviluppo professionale.

Gli sviluppatori sono sempre alla ricerca di un nuovo blog che li renda migliori nel loro lavoro. Qualunque sia l'IDE che stai usando, probabilmente ha un blog: Iscriviti!

Un altro motivo è che fa semplicemente risparmiare tempo. Investire tempo per migliorare il tuo flusso di lavoro può ripagare con una maggiore produttività o più tempo per divertirti. Oggi daremo un'occhiata più da vicino a Visual Studio e VSCode e discuteremo i modi per migliorare le tue abilità al punto da diventare un utente esperto.

Come faccio a diventare un utente avanzato VSCode?

Ecco cosa distingue un utente normale da un utente esperto :

• Conoscenza intima del tuo IDE: VSCode ha un'eccellente documentazione, leggila!
• Personalizzazione: gli utenti esperti personalizzano il flusso di lavoro in base alle loro esigenze specifiche.
• Automatizza tutte le attività noiose e ripetitive.
• Migliora continuamente il tuo flusso di lavoro e tieni traccia dell'evoluzione del tuo IDE.

In questo articolo, intendo spiegare come ho affrontato personalmente ciascuno di questi punti e fornirti le conoscenze per farlo da solo. Quello che faccio non funzionerà necessariamente per te, almeno non del tutto. Le persone lavorano in ambienti e progetti diversi (per me funziona principalmente con React.js e TypeScript su Windows), ma l'approccio generale è valido per tutti.

Test con Jest

Scrivo un test alla volta, il che significa che ho bisogno di un modo per eseguire un test alla volta. Tuttavia, la soluzione regex nativa è piuttosto goffa. Ecco perché uso Jest Runner. Questa utile estensione consente di eseguire o eseguire il debug di singole suite o test.

Il video seguente mostra che tutto ciò che devi fare è fare clic con il pulsante destro del mouse sul nome del test e utilizzare il menu contestuale per eseguirlo.

Test con Patto

La parte più dispendiosa in termini di tempo nella scrittura di un test di contratto è probabilmente la corrispondenza. L'ho risolto creando utili frammenti per automatizzare le azioni ripetitive. Questi sono alcuni che ho creato, sentiti libero di usarli (ad esempio, copiali e incollali semplicemente in /snippets/typescript.json di /snippets/typescript.json ).

Il video seguente mostra come utilizzare questi frammenti:

1. Seleziona tutte le occorrenze dello stesso tipo, ad esempio, seleziona tutta la stringa, l'ora e altri valori.
2. Usa l'associazione di tasti predefinita o richiama Inserisci snippet e seleziona lo snippet pertinente o inizia semplicemente a digitare il prefisso dello snippet che desideri utilizzare.

Idiota

La maggior parte degli sviluppatori utilizza Git e GitHub quotidianamente, e anche io. Tuttavia, cerco di evitare di utilizzare il terminale o github.com.

GitHub Pull Requests and Issues mi consente di aprire, modificare e rivedere PR nella comodità di VSCode. Trovo che il mio IDE sia un posto migliore per rivedere il codice rispetto alle app Web o desktop di GitHub. Alcuni sviluppatori potrebbero non essere d'accordo, ma apprezzo la coerenza e il comfort di farlo nel mio IDE.

Git può fare così tanto, eppure ho memorizzato così pochi dei suoi comandi. Ma perché memorizzare qualcosa in primo luogo? Memorizzare troppi aspetti granulari della tua routine non è eccessivamente produttivo.

GitLens espone una miriade di straordinarie funzionalità a portata di mano. Grazie ad esso, raramente devo raggiungere il terminale per usare Git.

Personalizzazione del terminale

Indipendentemente dal sistema operativo in uso, puoi fare di meglio rispetto al terminale predefinito. Sto usando Windows Terminal + cmder. Se sei un utente Unix, cerca iTerm (macOS) o Oh My Zsh (Linux e macOS). Li ho integrati con VSCode e ho aggiunto molti alias (scorciatoie) che mi fanno risparmiare tempo dalla scrittura di comandi.

Per esempio:

• ys = yarn start - mi aiuta ad avviare un'app con solo due caratteri
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - cancella la directory fornita e mostra un messaggio di successo al termine
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - cancella tutti i rami locali tranne il master

Salvare alcuni personaggi qua e là potrebbe sembrare sciocco, ma queste funzionalità per risparmiare tempo si sommano a lungo termine. Trovo un vantaggio secondario nel fare alias: passare meno tempo a digitarli mi aiuta a rimanere concentrato e a non perdere il filo dei pensieri perché non sto cercando di ricordare come invocare il comando.

Generazione di codice

La creazione di un nuovo componente, pagina, ecc. è qualcosa che faccio spesso ed è abbastanza semplice, come la maggior parte dei lettori saprà. Ma creare una nuova cartella e inizializzare i file in essa contenuti può essere noioso. Quindi, ho automatizzato questo processo.

Il video qui sotto mostra Supercharge React in uso. Usando New Component , posso specificare il nome e la posizione del nuovo componente. L'estensione esegue quindi uno script che crea una cartella e inizializza questo nuovo componente.

IntelliSense

VSCode ha un potente IntelliSense e la maggior parte delle volte non devi pensare di usarlo. Tuttavia, quando sfogli i suggerimenti, puoi premere Ctrl+Spazio per visualizzare la documentazione su ciascuna opzione disponibile.

IntelliSense può essere ulteriormente personalizzato per adattarsi al flusso di lavoro e alle preferenze personali.

Tasti rapidi

Sono sicuro che usi scorciatoie come Ctrl+S e Ctrl+F . Sono tutti ben documentati e, se non hai troppa familiarità con la vasta gamma di scorciatoie di VSCode, ti esorto a cambiarlo e fare il possibile per padroneggiarli. Una certa rilegatura è troppo goffa? Un comando che evochi spesso richiede troppo tempo per essere digitato? Apri l'editor della tastiera di VSCode per creare scorciatoie.

Se ti stai chiedendo se un comando è stato assegnato a una determinata combinazione di tasti, fai clic sul pulsante della tastiera nella barra di ricerca in cui puoi registrare le sequenze di tasti. Vedrai quindi cosa/se i comandi sono stati associati ad essi.

Scorciatoie del mouse

Agli sviluppatori viene spesso detto che per essere produttivi, devono imparare a odiare il proprio mouse e amare la propria tastiera . Questo potrebbe essere valido se stai lavorando su file piccoli e densi. Ma in un'era di formattazione automatica del codice e file che contengono centinaia di righe di codice, direi che è più un'eccezione che una regola.

Non solo utilizzo attivamente il mio mouse, ma l'ho personalizzato per adattarlo al mio flusso di lavoro utilizzando Logitech Options. Ho programmato i tasti speciali del mio mouse per eseguire determinati comandi in VSCode.

Ecco come puoi "insegnare" al tuo mouse a fare qualcosa di più che semplicemente spostare il cursore e fare clic:

1. Seleziona VSCode dal menu in alto a destra.
2. Fare clic sul pulsante che si desidera personalizzare.
3. Seleziona Assegnazione sequenza tasti dall'elenco di azioni a sinistra.
4. Immettere una scorciatoia predefinita in VSCode.

Impostazioni di backup e sincronizzazione

Non ha molto senso personalizzare qualcosa se non puoi eseguirne il backup e riutilizzarlo ogni volta che ne hai bisogno.

La soluzione nativa è al momento disponibile solo per gli addetti ai lavori. Tuttavia, Settings Sync ti aiuta a salvare le impostazioni del codice come un Gist e ti consente di sincronizzare il tuo flusso di lavoro tra più macchine. Hai bisogno di un token GitHub per configurarlo, ma in seguito devi solo eseguire un singolo comando per caricare e scaricare le tue impostazioni.

Estensioni VSCode consigliate

Ho già menzionato diverse estensioni e spiegato come le utilizzo. Ecco alcune citazioni degne di nota:

• Surround: è necessario racchiudere del codice selezionato in una funzione freccia o forse in un blocco try-catch? Questa estensione lo farà per te!
• Cerca node_modules: anche se non hai escluso node_modules dall'esploratore di VSCode per aumentare le prestazioni, quella cartella è così grande che è impossibile navigare. Questa estensione ti consente di cercare tutto ciò che stai cercando invece di scorrere all'infinito.
• Glean e React Refactor forniscono alcuni utili strumenti di refactoring per i tuoi file JSX.
• Tag di chiusura automatica aggiunge automaticamente il tag di chiusura per i file HTML/JSX/TSX.
• File Utils: un modo conveniente per creare, duplicare, spostare, rinominare ed eliminare file e directory. È anche personalizzabile.
• JavaScript Booster automatizza alcune comuni azioni di refactoring.

Sommario

Non essere un utente regolare. Sii invece un utente esperto. Fai sempre un passo avanti rispetto agli altri e vedi dove ti porta. Prendi sempre nota delle inefficienze e cerca di mitigarle.

La mia soluzione a questo dovrebbe essere familiare alla maggior parte degli sviluppatori: una scheda Kanban . Ogni volta che noto qualcosa che mi rallenta, lo scrivo come una cosa da fare. Ogni volta che ho del tempo libero, cerco di trovare una soluzione.

Se hai trovato questo post travolgente e non sai da dove iniziare, leggi i documenti, ti darà il miglior ROI ! So che leggere la documentazione ufficiale sembra noioso, ma prometto che a lungo termine ripagherà. Non solo ti insegnerà come essere più produttivo, ma imparerai come dovrebbe essere scritta la documentazione.

Per semplificare, ho compilato questo elenco di parti da leggere dei documenti:

• Suggerimenti e trucchi: alcuni sono ovvi e probabilmente lo sai già, anche se posso garantire che troverai qualcosa di cui non sapevi.
• Hack di editing: questi hack di editing sono incredibilmente potenti e impararli ti gioverà quotidianamente.
• Riduci/Espandi codice: prova questa scorciatoia quando ti accoppi con un altro sviluppatore, per impressionarlo!
• Associazioni di tasti: scopri come funzionano le associazioni di tasti e come personalizzarle, è una delle pietre miliari della padronanza del tuo IDE.
• Centinaia di linguaggi di programmazione supportati: scopri quali caratteristiche specifiche ha VSCode per la lingua scelta.