Se sei uno sviluppatore o un programmatore, è probabile che tu sia sempre alla ricerca di nuovi strumenti per semplificare il tuo flusso di lavoro. Per fortuna, uno dei migliori editor di codice che puoi trovare è Visual Studio Code su Mac.
Visual Studio Code (VS Code) offre molte funzionalità per aiutarti a scrivere codice in modo più efficiente. In questo articolo, imparerai come installare VS Code sul tuo Mac e esplorerai alcune delle migliori estensioni e temi per iniziare.
Continua a leggere e preparati a migliorare il tuo flusso di lavoro!
Prerequisiti
Questo tutorial sarà una dimostrazione pratica. Se desideri seguirlo, assicurati di avere un dispositivo macOS. Questo tutorial utilizza Apple Silicon (M1), quindi i passaggi potrebbero essere leggermente diversi se hai un Mac basato su Intel.
Scaricare Visual Studio Code per Mac
Visual Studio Code (VS Code) è un editor di codice gratuito e open-source di Microsoft disponibile per Windows, Linux e macOS. Tuttavia, come altri strumenti, dovrai scaricare e installare VS Code sul tuo sistema.
1. Apri il tuo browser preferito e vai alla pagina di download di VS Code.
2. Successivamente, fai clic su Apple Silicon sotto l’icona Mac per scaricare il programma di installazione di VS Code per Mac in un file ZIP. Questa versione Apple Silicon (M1) è l’ultima versione del chip sviluppato da Apple.
Se hai un vecchio Mac con un processore Intel, fai clic su Intel Chip invece.
Infine, apri il tuo terminale e esegui il seguente comando ls per verificare l’installatore del pacchetto di VS Code che hai scaricato.
L’output qui sotto mostra la posizione del file zip.
Installazione di Visual Studio Code su Mac
Ora che hai scaricato l’installatore di VS Code, sei pronto per installare VS Code sul tuo Mac ed utilizzare un editor di codice ridefinito. VS Code è ottimizzato in modo da poter costruire e debuggare applicazioni web e cloud moderne in modo più efficace.
Un’altra fantastica caratteristica di VS Code è che supporta un gran numero di linguaggi di programmazione attraverso l’utilizzo di estensioni che puoi trovare nel marketplace.
Per installare VS Code su Mac:
1. Seleziona il file zip di VS Code scaricato → clicca sull’icona dei puntini di sospensione (in alto a destra) → Apri per estrarre il file ZIP.
Una volta estratto, dovresti avere una nuova applicazione di Visual Studio Code nella tua cartella Downloads.
2. Successivamente, eseguire il comando ls di seguito per verificare il file dell’applicazione. Questo comando elenca il contenuto del file dell’applicazione Visual Studio Code.
Il simbolo \ è un carattere di escape che indica al terminale di trattare lo spazio come un carattere normale. È necessario utilizzare il carattere di escape quando c’è uno spazio nel nome del file.
3. Esegui il comando open di seguito per avviare l’installazione in una nuova istanza (-n).
4. Ora, fai clic su Apri per continuare con l’installazione quando compare il prompt sottostante.
Questo avviso compare perché hai scaricato l’applicazione da Internet, il che puoi ignorare tranquillamente.
Una volta installata, l’applicazione di VS Code si apre e verrai accolto dalla pagina di Benvenuto qui sotto.
Navigare nell’interfaccia grafica di VS Code
Hai installato con successo VS Code sul tuo Mac, ma prima di iniziare a programmare, familiarizza con l’interfaccia grafica e le funzionalità di VS Code.
VS Code è dotato di numerose funzionalità che ti permettono di:
- Scegliere temi e modificare l’aspetto dell’editor.
- Aprire la cartella del progetto, in modo da poter passare rapidamente avanti e indietro tra i file e verificare la correttezza della struttura dei file.
- Aggiungere un sistema di controllo delle versioni, come Git.
- Aggiungi rapidamente estensioni dal marketplace e così via.
Queste sono solo una piccola parte di ciò che VS Code può offrire. Vedi tu stesso come ogni funzionalità ti aiuta nel tuo flusso di lavoro. Forse cambiare il tema sarebbe un buon punto di partenza.
1. Seleziona un tema per il tuo editor come preferisci dalla pagina “Inizia”, mantieni le altre impostazioni predefinite e clicca su Segna come Fatto (in basso a sinistra).
Se i temi Chiari e Scuri non ti piacciono molto, clicca su “Visualizza altri temi” e cerca quello che ti interessa.
2. Successivamente, esplora il lato sinistro di VS Code, la Barra delle Attività, che ha sette sezioni principali. Inizia però con una delle sezioni più importanti, l’ESPLORATORE (Ctrl+Shift+E / Cmd+Shift+E).
L’Esploratore mostra i file e le cartelle del tuo progetto, dove puoi clonare un repository. Inoltre, l’Esploratore ti permette di eseguire diverse azioni come segue:
- Crea, elimina e rinomina i tuoi file e cartelle nel tuo progetto.
- Sposta file e cartelle trascinandoli e rilasciandoli all’interno della cartella del tuo progetto.
Nota che il “trascina e rilascia” funziona quando si spostano file nell’Esploratore da fuori VS Code. Ma se l’Esploratore è vuoto, VS Code apre invece il file nell’editor.
3. Fare clic sull’icona di ricerca (Ctrl+Shift+F / Cmd+Shift+F), che apre la sezione RICERCA, dove è possibile cercare file, simboli e testo nel progetto.
4. Ora, fare clic sull’icona Controllo origine (Ctrl+Shift+G / Cmd+Shift+G) per aprire la sezione CONTROLLO ORIGINE, dove è possibile gestire il progetto con Git o un altro sistema di controllo origine.
VS Code viene fornito con un sistema di gestione del controllo origine integrato (SCM) con supporto Git incluso di default.
5. Dopo il SCM, fare clic sull’icona Esegui e Debug (Ctrl+Shift+D / Cmd+Shift+D), che apre la sezione ESEGUI E DEBUG: ESEGUI, dove è possibile eseguire e debuggare il progetto.
6. Infine, fare clic sull’icona Estensioni (Ctrl+Shift+X / Cmd+Shift+X) per accedere alla sezione ESTENSIONI, dove è possibile installare estensioni dal marketplace.
Avviare VS Code tramite un ambiente da riga di comando
Forse trascorri la maggior parte del tempo in un ambiente da riga di comando ma hai bisogno di scrivere rapidamente del codice. In tal caso, configurare VS Code per avviarsi tramite un ambiente da riga di comando ti sarà utile.
1. Premere (Cmd+Shift+P o Ctrl+Shift+P) su VS Code per aprire il Menu Comandi, dove è possibile accedere a tutte le funzionalità di VS Code.
2. Digitare Shell Command: Install ‘code’ command in PATH nel Menu Comandi e premere Invio. Questo comando aggiunge l’eseguibile di VS Code alla variabile PATH del sistema.
3. Una volta aggiunto, riavvia il tuo terminale affinché le modifiche abbiano effetto. Il comando code è ora disponibile nel tuo terminale.
4. Ora, crea un file di testo, aggiungi del testo e salva e chiudi il file.
5. Infine, esegui i seguenti comandi per avviare VS Code (code), passando il percorso del file di testo (text.txt), in questo caso, dalla directory di lavoro.
Vedrai VS Code (a destra) aprire con il contenuto del tuo file text.txt visualizzato nella finestra dell’editor. Ora puoi modificare questo file utilizzando le fantastiche funzionalità di VS Code.
Installazione di estensioni per funzionalità aggiuntive
Una delle migliori cose di VS Code è che è altamente personalizzabile. Come? Puoi installare estensioni per aggiungere nuove funzionalità e ci sono molte estensioni diverse disponibili.
Forse vuoi installare l’estensione macOS Color Picker. Questa estensione ti consente di selezionare i selettori di colore nativi di macOS quando lavori con file CSS, HTML e JavaScript.
1. Naviga nel menu Estensioni nella barra delle attività, che ha tre sezioni:
- INSTALLATE – Questa sezione mostra le estensioni già installate.
- RACCOMANDATO – Questa sezione mostra le estensioni consigliate in base al tipo di file aperto. Ad esempio, vedrai le estensioni JavaScript consigliate se lavori con un file JavaScript.
- POPOLARI – Questa sezione mostra le estensioni più popolari di VS Code.
2. Digita “macOS Color Picker” nella casella di ricerca e premi Invio. Verrà visualizzata una lista di estensioni corrispondenti in ordine decrescente (le estensioni più corrispondenti per prime).
Una volta visualizzata l’estensione desiderata, fai clic sul pulsante Installa accanto all’estensione. Il pulsante Installa cambierà in un pulsante Abilita verde, quindi fai clic su di esso per abilitare l’estensione.
Dopo l’installazione dell’estensione, viene visualizzata una pagina di panoramica per l’estensione a destra, come mostrato di seguito.
3. Ora apri un file CSS, HTML o JavaScript per testare la nuova estensione macOS Color Picker.
4. Infine, apri la Command Palette (Cmd+Shift+P / Ctrl+Shift+P), digita “Open Color Picker” e premi Invio. Si aprirà il riquadro macOS Color Picker, come mostrato di seguito.
Utilizza il selettore di colore per selezionare un colore, che verrà inserito nel tuo codice. Questa estensione è un ottimo modo per ottenere rapidamente i valori di colore di cui hai bisogno senza dover ricordare i codici esadecimali.
Conclusione
In questo tutorial hai imparato come installare VS Code sul tuo Mac e le estensioni per aggiungere più funzionalità, rendendo più piacevole la scrittura di codice. A questo punto, puoi sfruttare appieno ciò che VS Code offre quando lavori sul tuo prossimo progetto.
Ma non fermarti qui! Con questa nuova conoscenza, perché non utilizzare il controllo delle versioni con Git e GitHub per tenere traccia del tuo lavoro?
Source:
https://adamtheautomator.com/visual-studio-code-on-mac/