Nei giorni scorsi si è svolta a San Francisco la più importante conferenza Microsoft dell’anno: //build/. Tante sono state le novità, tra cui un nuovo editor di sviluppo della famiglia di Visual Studio, il cui nome è Visual Studio Code. Questo editor, che è stato rilasciato attualmente in preview, consente la creazione di progetti orientati al cloud e al web ed è cross-platform: supporta infatti Windows, Linux e OSX. Il motivo principale che ha portato la nascita di questo IDE è stata la volontà di mettere a disposizione degli sviluppatori un ambiente leggero e di semplice utilizzo che aiuti a creare applicazioni che coinvolgono diverse tecnologie tra cui: ASP.NET, Node.js, HTML, CSS, LESS, SASS e JSON. E’ interessante sapere che questo IDE dal framework Electron, che è stato utilizzato anche per la creazione dell’editor Atom. Inoltre, la presenza come il debugger, l’intellisense o l’integrazione con git, lo rendono un ambiente davvero attraente per il front-end developer. Il primo passo da fare per usare Visual Studio Code è quello di scaricare il pacchetto appropriato per il proprio sistema operativo da https://code.visualstudio.com/Download e installarlo sulla propria macchina (figura 1):

Figura 1 – Le diverse piattaforme supportate da Visual Studio Code

Inoltre, possiamo scegliere di installare oltre al pacchetto base, a seconda del nostro sistema operativo o di ciò che abbiamo già installato sullo stesso, una serie di tool aggiuntivi che ci aiuteranno nella realizzazione delle nostre applicazioni:

• NET 5;
• NodeJS (incudes NPM);
• git: (command line tools);
• Yeoman: un tool per fare lo scaffolding di applicazioni, ovvero genera per noi la struttura di un progetto;
• generator-aspnet: generatore di yeoman per ASP.NET 5;
• hottowel: un generatore di yeoman per applicazioni che usano AngularJS;
• Express: un application framework per Node;
• gulp: un task runner system;
• mocha: un JavaScript test framework per Node;
• bower: un client side package manager;
• TypeScript: un framework tipizzato per estendere Javascript;
• TypeScript definition manager: un repository di definition file da usare con Typescript.

Al termine dell’installazione possiamo aprire l’editor per cominciare ad usarlo (figura 2):

Figura 2 – Visual Studio Code

L’IDE si presenta in questo modo: un menù principale (File, Edit…), un menù laterale con quattro pulsanti (Explore, Search, Git, Debug), al centro l’area di editing (in cui si possono affiancare fino a tre finestre) e in basso una barra di stato. Inoltre abbiamo una command palette che ci consente di eseguire comandi all’interno dell’ambiente in maniera rapida (figura 3).

Figura 3 – La command palette

Il primo aspetto interessante di Visual Studio Code riguarda il suo funzionamento: infatti si tratta di un editor file e folder based, che significa che basterà puntare ad una cartella o ad un file e non ad un file di progetto per iniziare a lavorare. Inoltre l’editor è in grado di riconoscere qualsiasi tecnologia supportata nel momento in cui viene aperta una cartella leggendo il suo contenuto. Per impostare invece una nuova cartella di lavoro, si può cliccare sul primo pulsante sul menù laterale (Explore), che apre una sezione che ci consente di visualizzare, aprire o aggiungere dei file presenti alla cartella selezionata (figura 4). In questa sezione, troviamo 2 sottosezioni, ovvero “Working Files”, dove troviamo i file aperti per la modifica, e “No Folder Loaded” (il cui nome cambierà a seconda della cartella in cui stiamo lavorando).

Figura 4 – Scelta della cartella di lavoro

Dopo aver cliccato su “Open folder”, siamo pronti per selezionare una cartella che rappresenterà il nostro workspace. Al suo interno possiamo aggiungere file usando i pulsanti accanto il nome della nostra cartella (figura 5):

Figura 5 – I pulsanti di gestione dell’attuale workspace

Supponendo di aver creato un file HTML, possiamo utilizzare il browser per visualizzarne il risultato (figura 6).

Figura 6 – Un esempio di applicazione in Visual Studio Code

Questa è per il momento solo una piccola introduzione su Visual Studio Code. Nei prossimi post entreremo in dettaglio sulle funzionalità di questo nuovo editor, come realizzazione di applicazioni ASP.NET e Node.js, supporto a Git, Debugging e configurazione.