• visual-studio-code

    Sviluppare con Visual Studio Code

    Introduzione all’editor Visual Studio Code, uno dei più popolari ed utilizzati dagli sviluppatori.

    Introduzione a Visual Studio Code

    Visual Studio Code è un editor leggero, potente, gratuito e cross-platform. Esistono versioni per Mac, Linux e Windows ed è possibile portare i file da una piattaforma all’altra senza problemi. Supporta un’ampia gamma di linguaggi di programmazione ed è possibile creare estensioni molto facilmente.

     

    Download e installazione di Visual Studio Code su Windows 10

    Per scaricare Visual Studio Code, vai all’indirizzo https://code.visualstudio.com/ e e clicca sul pulsante Download in alto a destra (che mostra la pagina di download e ti consente di scegliere la piattaforma e la versione a 32 o 64 bit) o sul pulsante Download for Windows sulla sinistra (download diretto che riconosce il sistema operativo e procede con il download automatico).

    visual-studio-code-homepage

    Una volta scaricato il file VSCodeUserSetup-x64-1.34.0.exe di quasi 50 Mb, apri la cartella dei download e fai doppio clic sul file di setup. Viene aperta la seguente schermata.

    visual-studio-code-setup

    Clicca sul pulsante Avanti, accetta il contratto di licenza, seleziona la cartella di installazione e la cartella nel Menu di avvio di Windows. Scegli anche i processi addizionali in base all’utilizzo che intendi farne.

    visual-studio-code-scelta-opzioni

    Clicca sul pulsante con etichetta Avanti e poi su quello con etichetta Installa. Attendi la fine dell’installazione e poi clicca sul pulsante Fine per avviare Visual Studio Code.

    Ecco la schermata iniziale con la quale si presenta Visual Studio Code.

     

    visual-studio-code-finestra

     

    Download e installazione di Visual Studio Code su Mac

    Per scaricare Visual Studio Code, vai all’indirizzo https://code.visualstudio.com/ e e clicca sul pulsante Download in alto a destra (che mostra la pagina di download e ti consente di scegliere la piattaforma e la versione a 32 o 64 bit) o sul pulsante Download for Mac sulla sinistra (download diretto che riconosce il sistema operativo e procede con il download automatico). Con questa seconda opzione viene scaricato il file VSCode-darwin-stable.zip di circa 70 Mb.

    Fai doppio clic sul file zip scaricato per estrarne i contenuti. Viene creato Visual Studio Code.app di circa 200 Mb. Trascinalo sulla cartella delle Applicazioni.

    Per eseguire il programma, puoi fare doppio clic sull’icona di Visual Studio Code dalla cartella Applicazioni, oppure puoi lanciarlo anche da terminale. Prima di lanciarlo da terminale, magari può essere utile aggiungere Visual Studio Code al PATH: questa operazione viene effettuata automaticamente su Windows e Linux, ma non su Mac, quindi dobbiamo aggiungerlo a mano. Vediamo come.

    Apri Visual Studio Code cliccando sulla relativa icona dalla cartella Applicazioni e usa la combinazione cmd + shift + p (su Windows ctrl + shift + p) per far comparire la command palette. Qui puoi digitare “shell” e selezionare la voce “Shell Command: install ‘code’ command in PATH”.

    visual-studio-code-aggiungere-path-su-mac

    Una volta aggiunto il comando ‘code’ al PATH, è possibile lanciare Visual Studio Code da terminale, mediante il comando

    che lancia Visual Studio Code sulla directory corrente, mostrando quindi i file presenti sul percorso corrente. In alternativa puoi fornire il percorso completo al posto della directory corrente, o trascinare una cartella sull’applicazione.

     

    L’interfaccia grafica di Visual Studio Code

    Una volta aperta l’applicazione, sulla parte sinistra troverai delle icone disposte verticalmente. Si tratta della view bar, che consente di spostarti all’interno delle viste disponibili.

    visual-studio-code-view-bar

     

    visual-studio-code-explorer-view La prima icona in alto è la vista Explorer, che si può aprire con cmd + shift + e su Mac. Mostra i file e le cartelle nel progetto corrente e quanti file sono stati modificati e non salvati.
    visual-studio-code-search-view La seconda icona è la vista Search, che si può aprire con cmd + shift + s su Mac. Con questa vista è possibile cercare (ed eventualmente sostituire) un contenuto nell’editor.
    visual-studio-code-source-control-view La terza icona è la vista Source Control, che si può aprire con cmd + shift + g su Mac. Se ad esempio usi Git per il controllo di versione e apri un progetto che è una repository Git, verranno mostrate le informazioni più rilevanti per il controllo di versione.
    visual-studio-code-debugger-view La quarta icona è la vista Debugger, che si può aprire con cmd + shift + d su Mac.
    visual-studio-code-extension-view L’ultima icona è la vistaExtensions, che si può aprire con cmd + shift + x su Mac. Mostra l’elenco delle estensioni installate e consente di aggiornare, disabilitare o disinstallare delle estensioni, cercarne di nuove, configurare quelle esistenti.

    In fondo alla finestra c’è la barra di stato, che mostra informazioni sul progetto corrente e sui file aperti nel workspace.

    Il menu in alto contiene molti comandi comuni a tutti gli editor, ma è possibile accedere a questi comandi anche dalla command palette, che si può aprire con cmd + shift + p su Mac (c’è una funzione simile anche nell’editor Sublime Text). Una caratteristica particolare di questo editor, è la cosiddetta modalità Zen Mode, che ti consente di concentrarti sul codice senza altre distrazioni. Se apri un file e attivi la modalità Zen Mode (cmd + k e poi z, oppure dalla command palette cerca zen per mostrare Toggle Zen Mode), spariscono tutte le interfacce e rimane solo il codice (cmd + k e poi z oppure doppio Esc per ritornare alla vista normale).

    Creazione di un nuovo file

    Dal menu File –> New File puoi creare un nuovo file, ad esempio il seguente:

    Se lo salvi con estensione .java, Course.java ad esempio, l’editor riconosce che si tratta di un file Java e ne applica la syntax highlighting. Allo stesso tempo, se è la prima volta che tenti di salvare un file .java, ti viene chiesto di installare l’estensione relativa a Java.

    visual-studio-install-java-extension

    Clicca sul pulsante Install in basso a destra e verrà installata l’estensione di Java, con le funzionalità connesse, come l’autocompletamento del codice ad esempio.

     

    Giulio Cantali – IT Consultant

    Creatore di Database Master, il primo percorso per diventare esperti di database

Lascia un commento

Se vuoi condividere la tua opinione, lascia un commento

Puoi usare questi tag e attributi: HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">