Exploring VS Code
0 likes81 views
Il documento esplora Visual Studio Code, un editor di codice open-source sviluppato da Microsoft, presentato nel 2015. Si evidenziano le sue funzionalità, come il supporto per vari linguaggi tramite un ecosistema di estensioni, la sua interfaccia intuitiva e le possibilità di personalizzazione. Inoltre, si sottolinea la differenza tra Visual Studio Code e Visual Studio, quest’ultimo essendo un IDE più completo.
Exploring VS Code
- 1. Sponsor Community Esploriamo Visual Studio Code Simone Natalini Cloud Solution Developer @ AlmavivA S.p.A. – Community DotNetCode
- 2. #visualstudiotour Agenda • Introduzione • Esploriamo l’editor • Demo: Sessione di lavoro con Javascript, Typescript e .NET Core
- 3. #visualstudiotour Un po’ di storia • Presentato per la prima volta nel 2015 alla conferenza annuale per gli sviluppatori Microsoft Build • La prima preview pubblica viene rilasciata il 18 novembre 2015, e nello stesso giorno Microsoft rilascia il codice sorgente su Github rendendo il prodotto open-source
- 4. #visualstudiotour Alcuni dettagli su visual studio code • Visual Studio Code è basato su Electron, un potente framework che tramite Node.js consente di creare applicazioni desktop native cross- platform utilizzando linguaggi come Javascript, Typescript, HTML, CSS, ecc. • Non ha particolari requisiti di sistema, funziona in modo performante anche su hardware meno recente ed arriva ad occupare (out-of-the-box) solo 200MB di spazio su disco. • Essendo cross-platform, è disponibile per Windows, macOS e le maggiori distribuzioni Linux che dispongono di un ambiente desktop.
- 5. #visualstudiotour Altri dettagli su visual studio code • Visual Studio Code, di base, include il supporto nativo per i linguaggi JavaScript, TypeScript e per Node.js • Tramite il ricco ecosistema di estensioni, sviluppate sia da Microsoft che dalla community, riesce a supportare molti altri linguaggi (come C++, C#, Java, Python, PHP, Go) e runtimes (come .NET Core e Unity)
- 6. #visualstudiotour Visual Studio vS Visual Studio Code • Tecnologicamente parlando, l’editor non ha molto in comune con il “fratello maggiore” Visual Studio; Visual Studio è un IDE, mentre Visual Studio Code è un editor. • Visual Studio è molto più potente e più ricco a livello di feature, mentre VS Code risulta più pratico, leggero e flessibile, principalmente volto allo sviluppo con linguaggi interpretati piuttosto che compilati.
- 7. #visualstudiotour Prima di inizare, qualche link interessante • Link al download di Visual Studio Code: https://aka.ms/vscode • Link al repository ufficiale su GitHub di Visual Studio Code: https://github.com/Microsoft/vscode • Link alla documentazione per tutti i dettagli: https://code.visualstudio.com/docs/
- 10. #visualstudiotour Struttura dell’editor • Come nei principali IDE e editor, Microsoft ha deciso di adottare un layout grafico molto semplice e intuitivo, dividendo l’area di lavoro su due colonne principali; • Nella colonna di sinistra troviamo una barra multifunzione, mentre nella colonna di destra c’è il vero e proprio editor dei file.
- 11. #visualstudiotour Struttura dell’editor Aprendo dei file o cartelle, possiamo distunguere 5 componenti nell’editor:
- 12. #visualstudiotour Struttura dell’editor - Editor Questa è l’area principale dove si possono aprire e modificare i file. Si possono aprire molteplici editors, raggruppandoli e affiancandoli sia orizzontalmente che verticalmente.
- 13. #visualstudiotour Struttura dell’editor – Barra delleAttività Questa area contiene diversi elementi, come il file explorer, la ricerca globale, il manager delle estensioni, le attività di debug e l’area dedicate al source control. In questo caso, vediamo come il file explorer ci fornisce le seguenti informazioni a colpo d’occhio: • Ci sono due editor aperti, divisi in due gruppi • Non c’è una cartella aperta • Lo schema (outline) evidenzia i nodi del file corrrentemente aperto (in questo caso, si tratta di un documento HTML)
- 14. #visualstudiotour Struttura dell’editor – Barra Laterale Per quanto la sua posizione possa essere “difficile”, questa piccola barra ci fornisce informazioni fondamentali; vediamo infatti che: • Ci troviamo sul branch master. • C’è un errore nel codice. • Fortunatamente non ci sono warning.
- 15. #visualstudiotour Struttura dell’editor – Status Bar In basso a destra troviamo invece la barra dello stato, che ci dice: • La posizione del cursore (Linea 4, colonna 24) • Il metodo e livello di indentazione del codice (Spazi, 4 spazi per livello) • Codifica del file (UTF-8) • Terminatore di linea (CRLF) • Linguaggio del file (Javascript) Inoltre troviamo uno “smile” per inviare feedback a Microsoft e una “campanella” che apre il popup delle notifiche.
- 16. #visualstudiotour Struttura dell’editor – Panels L’area dei pannelli è composta di 4 tab: • Problems: questo tab evidenzia gli errori e i warning presenti nel codice • Output: questo tab mostra l’output del programma • Console di debug: durante una sessione di debug, questo tab fornisce una console interattiva per eseguire istruzioni o espressioni • Terminale: questo tab invece integra un terminale, che può essere di vari tipi (cmd, bash, powershell, WSL etc..)
- 17. #visualstudiotour Personalizziamo visual studio code Visual Studio Code è molto flessibile e offre molti metodi di personalizzazione; tramite estensioni, temi e colorazioni differenti possiamo “sentirci a casa” anche se conosciamo poco l’editor. Per gli appassionati di Visual Studio, Microsoft ha integrato gli stessi temi anche su VS Code, e in generale la community ne ha sviluppati parecchi, sia con nuove combinazioni di colori che riassemblando quelle di altri editor, come Atom o Sublime Text.
- 18. #visualstudiotour Personalizziamo Visual Studio Code - Shortcuts Come per i temi, possiamo personalizzare anche gli shortcut da tastiera, per velocizzare ulteriormente il flusso di lavoro. Inoltre, per facilitare la transizione da altri editor sono state sviluppate estensioni per riportare gli shortcut da tastiera da altri editor e IDE (Vim, Sublime Text, Atom, Visual Studio e altri).
- 19. #visualstudiotour Personalizziamo Visual Studio Code - Estensioni Proseguendo nell’opera di “fare nostro” l’editor, vediamo come l’ecosistema di estensioni per VS Code sia molto ricco, e offra diverse opportunità e modi per personalizzare sempre di più l’editor.
- 20. #visualstudiotour Personalizziamo Visual Studio Code - Estensioni Le estensioni presenti nel Marketplace possono essere di diverso tipo e aggiungere feature all’editor in modi differenti. Le più diffuse sono le estensioni che aggiungono funzionalità di linguaggio, come quella di C# o Java, o funzionalità alla barra delle attività, come le estensioni per Azure o Git.
- 21. #visualstudiotour Personalizziamo Visual Studio Code - Impostazioni Personalizzare Visual Studio tramite le impostazioni è molto semplice, dato che quasi ogni parte dell’editor, della UI, e dei comportamenti ha impostazioni e opzioni modificabili.
- 22. #visualstudiotour Altre Feature di VS Code – Zen Mode Una delle feature più apprezzata dagli sviluppatori che usano VS Code è lo Zen Mode, ovvero la possibilità di nascondere tutte le diverse componenti per lasciare spazio interamente all’editor.
- 23. #visualstudiotour Altre Feature di VS Code – Barra dei comandi VS Code fornisce anche l’accesso ad una barra dei comandi, che raccoglie molti comandi utili per velocizzare il nostro workflow.
- 25. #visualstudiotour Contatti speaker – Simone Natalini https://www.linkedin.com/in/simonenatalini1