Setup di Visual Studio Code per Web Developer

Negli ultimi anni Visual Studio Code è diventato il software di riferimento quando si parla di editor di codice. Una vastissima community, velocità di esecuzione e integrazioni native senza bisogno di grosse configurazioni stanno alla base di questo code editor sviluppato da Microsoft.

In questo approfondimento vedremo come configurare VS Code per sviluppare su web. Prima però una piccola parentesi sui termini.

Differenza tra IDE e Code Editor

Ho definito Visual Studio Code un code editor, altri lo definiscono IDE, chi ha ragione? Beh, diciamo che nessuno ha torto, in quanto Visual Studio Code ha quasi tutte le caratteristiche per poter essere considerato un IDE completo, come ad esempio:

• Editor di codice sorgente dotato di syntax highlighting e completamento automatico del codice
• Tool di building
• Integrato con i sistemi di versionamento
• Debugger

Se ti stai domandando però cosa significa IDE prima di tutto, sappi che è un acronimo che sta per Integrated Development Environment ed è un software che fornisce ai programmatori tutta una serie di strumenti, come quelli elencati poco fa.

Detto questo però, Microsoft stessa definisce Visual Studio Code un mezzo IDE, perché le funzionalità più complesse sono disponibili in Visual Studio IDE e non disponibili in Visual Studio Code.

Altri esempi di IDE oltre a Visual Studio sono IntelliJ ed Eclipse; mentre altri esempi di code editor sono: Sublime Text e Notepad++.

Qual è il miglior editor da usare?

Nel paragrafo precedente ne ho nominati altri, ovviamente, VS Code non è l’unico sul mercato, ma qual è il migliore? Non lo so. Io apprezzo VS Code perché lo trovo comodo ed intuivo, ho provato altri code editor e IDE, ma mai nulla mi ha soddisfatto come VS Code.

Sicuramente se ti confronterai con qualcun altro ti potrebbe dare un'opinione differente. Altri ancora saranno anche scortesi sostenendo che l’unico editor/IDE da usare è quello che usano loro, ma con questi è meglio non avere niente a che fare.

Scaricare Visual Studio Code

Per scaricare Visual Studio Code potete recarvi sul sito ufficiale e procedere con il download. Sappi però che esistono due versioni: stable e insiders.

La versione stable è quella che ti consiglio perché è quella, appunto, più stabile e con meno bug e gli aggiornamenti sono mensili. La versione insiders, caratterizzata dal logo di VS Code verde, è la versione beta, con qualche difetto in più e con aggiornamenti più frequenti. Io le ho installate entrambe perché alcune estensioni che uso mettono a disposizione le funzionalità sperimentali solo sulla versione insiders, poi la scelta è sempre e solo tua.

Visual Studio Code e la telemetria

La telemetria è un sistema che permette agli sviluppatori di raccogliere dati, come ad esempio:

• Dati di diagnostica in seguito ad un crash
• Errori inattesi, che non causano l’arresto dell’applicazione, ma che comunque non dovrebbero verificarsi
• Dati di utilizzo su come e quali sono le funzionalità più usate, così da poter prioritizzare in futuro lo sviluppo di una feature piuttosto che di un’altra

Visual Studio Code permette la disattivazione della telemetria attraverso un’apposita impostazione telemetry.telemetryLevel, la quale accetta i valori:

• all: tutti i sistemi sono attivi
• error: dati di diagnostica ed errori inattesi sono le uniche cose tracciate
• crash: solo dati di diagnostica
• off: tutto disattivo

Più avanti riprenderò questo discorso per mostrare come fare a modificare questa impostazione.

Se non vuoi assolutamente la telemetria e il brand di Microsoft in giro per l’editor, puoi sempre optare per l’uso di VS Codium, una distribuzione che rimuove tutto questo e modifica la licenza con una più FLOSS friendly (Free and Open Source Software).

Visual Studio Code direttamente da browser

Se il PC che stai usando non è il tuo o non hai abbastanza spazio in memoria o, più semplicemente, le prestazioni del tuo PC non sono il massimo puoi anche optare per la versione web di Visual Studio Code, la puoi trovare all’indirizzo vscode.dev

Avvio di Visual Studio Code

Una volta installato e aperto VS Studio Code sarà pronto per essere usato, ma noi prima vogliamo fare qualche personalizzazione.

Cambiare il tema di Visual Studio Code

Partiamo dalla cosa meno importante, ma allo stesso più importante, il tema. Visual Studio Code porta con sé alcuni temi molto carini che puoi scegliere di utilizzare al posto di quello di default. Se nessuno di quelli pre-installati ti va bene puoi sempre optare per installarne uno dei tanti presenti sul marketplace.

Io uso CodeSanbox Theme, ma se vuoi puoi anche creare il tuo tema attraverso questo tool online.

Per cambiare tema installare un nuovo tema puoi premere l’icona con i quattro quadrati a sinistra e cercare nella barra il tema che desideri

Ce ne sono di tutti i gusti.

Se vuoi vedere quelli di default devi cliccare sull’ingranaggio in basso a sinistra > themes > color themes

Ti si aprirà una lista di dark e light theme che potrai vedere in anteprima, ti basterà infine cliccare quello che ti piace e verrà abilitato.

Come installare nuove estensioni su Visual Studio Code

Le estensioni sono un’altra peculiarità che ha permesso a Visual Studio Code di imporsi sul mercato. La velocità di VS Code sta proprio nel fatto che dentro non ha niente, ma grazie alle estensioni, buona parte ufficiali di Microsoft possiamo personalizzare l’ambiente in base ai linguaggi che usiamo.

Io uso un discreto numero di estensioni, 31 per l’esattezza, ma i must have sono:

• Color Highlight di Sergii N: evidenzia i colori presenti nel codice
• Document This di oouo-diogo–perdigao: permette di generare automaticamente un commento JSDoc funziona sia con JavaScript che con TypeScript
• ESLint di Microsoft: integra ESLint sistema che analizza il codice JavaScript individuando i problemi
• GitLens di Git Kraken: potenzia notevolmente, la già ricca integrazione con Git di VS Code (ah e se vuoi imparare Git puoi sempre seguire il mio corso)
• html-entities di Christopher Syles: permette di convertire i caratteri speciali in entità HTML, comodissimo anche per chi usa React.
• Import Cost di Wix: mostra il peso della dipendenze che stiamo importando, utilissimo per ottimizzare il peso della nostra web application (io ho ridotto il peso di manuelricci.com del 65% anche grazie a quest’estensione).
• IntelliCode di Microsoft: fornisce suggerimenti di autocompletamento esaminando il contesto (quest’estensione la uso molto poco ormai dato che utilizzo principalmente GitHub Copilot).
• Live Server di Ritwick Dey: permette di lanciare un server locale per vedere in anteprima i nostri lavori e supporta il reload automatico ad ogni salvataggio.
• Path Intellisense di Christian Kohler: auto completamento dei percorsi ai file.
• Code Spell Checker
  • Estensione Italiana di Street Side Software: molto spesso sbaglio a scrivere le parole, Code Spell Checker mi segnala le parole scritte male e mi suggerisce la parola corretta.

Menzione d’onore:

• Prettier di bySabi Files: permette di formattare codice JavaScript, Typescript e CSS. Lo riporto solo perché è molto frequente nelle varie liste di estensioni che non possono mancare. Personalmente uso il formatter di default di Visual Studio che fa uno splendido lavoro.

Queste sono le estensioni che io installerei immediatamente qualora dovessi configurare Visual Studio Code, poi ognuno installa quelle di cui ha maggiormente bisogno in base a quello che usa. Ad esempio, non ho menzionato le estensioni di PHP che uso quando mi capita di sviluppare con quel linguaggio, quando non mi servono le tengono inattive e le attivo solo quando ne ho bisogno.

Modificare le impostazioni di VS Code

Altra cosa super importante in Visual Studio Code sono le impostazioni, in pratica si può personalizzare tutto. Questo può essere fatto da interfaccia grafica o da file JSON.

Per accedere alle impostazioni vi basterà cliccare l’ingranaggio in basso a sinistra > settings

Di seguito elenco le impostazioni più importanti, secondo me, che meritano un filo di attenzione.

Le impostazioni che mostrerò di seguito sono tutte da inserire nel file JSON che potete trovare aprendo le impostazioni come mostrato poco fa e cliccando l’icona “Open Settings JSON” in alto a destra (l’icona del foglio con la freccia)

Migliorare la leggibilità del codice in Visual Studio Code

Se lavori tutti il giorno con VS Code e imposti male tutta la parte legata alla tipografia sei fregato, ecco quindi qualche impostazione che può migliorare drasticamente la leggibilità del codice (occhio che se scrivi male il codice queste impostazioni non ti salvano):

1"editor.fontSize": 18,
2"editor.fontFamily": "Dank Mono, Menlo, 'Source Code Pro'",
3"editor.letterSpacing": 0.5,
4"editor.lineHeight": 30,
5"window.zoomLevel": -1,
6"editor.wordWrap": "on",
7"editor.fontLigatures": true

In merito al font Dank Mono l’ho acquistato, ma ho usato per parecchio tempo anche font gratuiti come Cascadia di Microsoft e JetBrains Mono di JetBrains. Una volta installato nel sistema potete richiamarlo con il suo nome. Consiglio sempre di farlo seguire da font pre-installati così nel caso non fosse disponibile il font principale c’è sempre un piano B sicuro.

Formattazione codice

Impostando Visual Studio Code per lo sviluppo web qui vedremo le impostazioni relative a JavaScript/TypeScript, HTML e CSS.

1"editor.tabSize": 2,
2"editor.autoIndent": "full",
3"javascript.format.insertSpaceAfterConstructor": true,
4"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
5"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
6"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
7"javascript.format.insertSpaceAfterCommaDelimiter": true,
8"javascript.format.semicolons": "insert",
9"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
10"typescript.format.insertSpaceAfterConstructor": true,
11"typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
12"javascript.preferences.quoteStyle": "single",
13"typescript.preferences.quoteStyle": "single",
14"javascript.autoClosingTags": true,
15"typescript.autoClosingTags": true,
16"javascript.suggest.autoImports": true,
17"typescript.suggest.autoImports": true,
18"[javascript][javascriptreact][typescript]": {
19    "editor.defaultFormatter": "vscode.typescript-language-features"
20},
21"[html]": {
22    "editor.defaultFormatter": "vscode.html-language-features"
23},
24"[json]": {
25    "editor.defaultFormatter": "vscode.json-language-features"
26},
27"[jsonc]": {
28    "editor.defaultFormatter": "vscode.json-language-features"
29},
30"[css]": {
31    "editor.defaultFormatter": "vscode.css-language-features"
32},
33"[typescriptreact]": {
34    "editor.defaultFormatter": "vscode.typescript-language-features"
35},
36"html.format.wrapAttributesIndentSize": 2,
37"html.format.templating": true,
38"html.format.enable": true,
39"html.format.preserveNewLines": true,
40"html.autoClosingTags": true,

vscode.{linguaggio}-language-features è il formatter che uso al posto di prettier.

Se siete interessati a conoscere il significato di ogni singola impostazione, basterà passare il mouse sopra ogni singola voce su VS Code e vi verrà fornita una breve spiegazione.

Impostazioni varie

Queste impostazioni sono decisamente più personalizzazioni che configurazioni in sé, il consiglio è di provarne un po’ per volta e vedere se fanno al caso tuo.

1"editor.cursorWidth": 5,
2"editor.cursorBlinking": "smooth",
3"editor.minimap.enabled": false,
4"editor.renderWhitespace": "all",
5"editor.rulers": [
6    80,
7    120,
8    175
9],
10"extensions.ignoreRecommendations": true,
11"files.exclude": {
12    "**/.cache": true,
13    "**/.DS_Store": true,
14    "**/.git": true,
15    "**/.hg": true,
16    "**/.next": true,
17    "**/.svn": true,
18    "**/CVS": true
19},
20"workbench.editor.enablePreviewFromQuickOpen": false,
21"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}",
22"editor.matchBrackets": "always",
23"editor.scrollBeyondLastLine": true,
24"editor.codeActionsOnSave": {
25    "source.fixAll.eslint": true,
26    "source.organizeImports": true
27},
28"security.workspace.trust.enabled": false,
29"security.workspace.trust.emptyWindow": false,
30"files.eol": "\n",
31"editor.bracketPairColorization.enabled": true,
32"window.titleBarStyle": "custom",
33"workbench.tree.renderIndentGuides": "always",
34"editor.guides.bracketPairs": true,
35"editor.guides.highlightActiveBracketPair": true,
36"editor.guides.bracketPairsHorizontal": "active",
37"workbench.sideBar.location": "right",

Giusto una precisazione su alcune:

• editor.rulers: mostra delle linee verticali nell’editor, le uso per capire quando andare a capo con i commenti.
• extensions.ignoreRecommendations: VS Code tende a consigliare estensioni ogni volta che aprite un nuovo file, siccome mi rompeva, l’ho disattivato.
• files.exclude: esclude dal file explorer l’elenco le directory elencate
• window.title: ho cambiato la struttura del titolo seguendo la documentazione
• security.workspace.trust.enabled e security.workspace.trust.emptyWindow: disattivano i continui avvisi di VS Code sulla sicurezza della cartella, se ci fidiamo, ecc. Faceva molto Windows Vista, quindi l’ho disattivato prima di immediatamente
• editor.guides.bracketPairs e le altre che fanno riferimento alle parentesi attivano il color matching delle parentesi nativo di Visual Studio Code.
• workbench.sideBar.location: mostro e nascondo la barra laterale di Visual Studio Code frequentemente e avendola di default a sinistra mi spostava anche il punto dove iniziavo a leggere codice, per cui l’ho spostata a destra, miglior decisione che abbia mai preso. Questo consiglio di provarla caldamente.

Ci tengo infine a precisare che uso Visual Studio Code da tempi immemori e alcune impostazioni che ho riportato potrebbero avere cambiato valore di default il quale potrebbe corrispondere a quello che riporto io come override, come presumo sia per window.titleBarStyle. Detto questo vige sempre la regola di esplorare e smanettare un po’ per adeguare l’editor al proprio gusto e stile personale.

Com’è organizzato Visual Studio Code

Visual Studio Code è organizzato in quattro aree:

1. Barra superiore
2. Barra inferiore
3. Barra laterale
4. Editor

La barra superiore contiene varie voci, come:

• File: qui si possono aprire cartelle, file, workspace, aprire nuove finestre, ecc.
• Edit: copia, taglia, incolla e più importante attivazione di commenti di blocco e in linea (queste shortcut sono un must, imparale, si trovano in fondo alla lista)
• Selection: tutta una serie di azioni che si possono fare con il codice selezionato (anche qui alcune shortcut sono importantissime)
• View: permette di mostrare e nascondere i vari pannelli della barra laterale
• Go: portale per saltare in punti specifici del file aperto o della directory o in altri punti, le voci sono abbastanza autoesplicative
• Run: azioni legate all’attività di debug
• Terminal: azioni legale al terminale e all’esecuzione di task
• Help: supporto, informazioni, licenze è tutto qui.

La barra inferiore varia il suo contenuto in base al tipo di file aperto, ma di base contiene eventuali warning o errori del codice che state scrivendo e le "coordinate" di dove ti trovi nel documento (riga e colonna) e il linguaggio che stai usando dandoti la possibilità anche di cambiarlo. Varie estensioni possono aggiungere informazioni in più, ma di base quelle menzionate sono quelle importanti.

La barra laterale ha tutte una serie di icone, le quali sono:

• File explorer: dove potrai vedere i file aperti e i file presenti nella tua directory di lavoro quale ne avessi aperta una
• Search: ricerca universale all’interno della cartella di lavoro
• Source control: integrato con Git permette di gestire da interfaccia grafica staging area, commit e altre cosine legate al mondo dei sistemi di versionamento (l’invito a vedere il corso di Git è sempre valido eh)
• Run and debug: pannello dedicato al debugger
• Extensions: collegamento al marketplace dove puoi cercare nuovi temi ed estensioni

In fondo poi puoi trovare:

• Accounts: collegati con il tuo account Microsoft o GitHub per sincronizzare le impostazioni tra più VS Code
• Manage: lo conosciamo già abbastanza bene

Infine, l’editor è dove lavoriamo il 90% del tempo dove vediamo il nostro codice e ne scriviamo di nuovo. Nient’altro da aggiungere.

Le shortcut di Visual Studio Code

Visual Studio Code è ricchissimo di shortcut e se si vuole velocizzare il proprio processo lavorativo è necessario conoscerne alcune. Oltre alle solite, come copia, taglia e incolla ce ne sono alcune decisamente più esotiche, come spostare linee di codice o formattare il codice automaticamente senza farlo a mano. Queste e altre shortcut le trovi nella playlist su YouTube “Shortcut di Visual Studio Code”.

Se invece vuoi vedere tutte le shortcut a disposizione puoi cliccare sulla rotellina in basso a sinistra se non hai cambiato la posizione della sidebar come ho consigliato o in basso a destra se l’avessi fatto e cliccare su “Keyboard shortcuts”

Nota bene che nel menu vengono riportate anche le shortcut, quindi cerca di impararle, ti serviranno.