Ogni persona che crea, modifica o semplicemente studia i siti web ha bisogno di installare e configurare l’IDE per integrarlo nel suo ambiente di sviluppo web.

L’IDE(integrated development environment) è quell’applicazione che aiuta il programmatore a scrivere, leggere e fare il debug del codice sorgente.

Come ci aiuta l’IDE?

In fase di scrittura del codice sorgente ci aiuta a capire se ci sono degli errori di sintassi e quindi correggerli immediatamente, in molti casi ha degli strumenti(plugin) che ci possono aiutare durante lo sviluppo a velocizzare la scrittura del codice sorgente e nella fase di debug a trovare gli errori.

Qual’è il miglior IDE?

Personalmente ne ho provati tanti, il primo che ho usato è stato il blocco note integrato in Windows, non era adatto a scrivere codice sorgente, non aveva nessun strumento(plugin) che aiutava un programmatore, per esempio nella fase di debug era difficile trovare un errore il quale poteva essere semplicemente di battitura in fase di scrittura. Nell’articolo Creiamo il nostro ambiente di sviluppo web cito tre IDE che secondo me sono i più usati e pratici, in questo articolo vedremo come installare e configurare l’IDE Visual Studio Code.

Perchè Visual Studio Code?

  • Open source
  • Ampia community
  • Gratuito
  • Aggiornamenti frequenti
  • Vasta scelta di plugin

Installiamo Visual Studio Code

Colleghiamoci al sito ufficiale e scarichiamo l’ultima versione

installare e configurare l'IDE
Sito ufficiale Visual Studio Code

Avviamo l’installazione cliccando due volte sul file appena scaricato, accettiamo i termini del contratto di licenza:

Termini di licenza Visual Studio Code

Clicchiamo su Avanti >

Arrivati ad un certo punto ci chiede di selezionare dei processi aggiuntivi, io vi consiglio di selezionarli tutti:

Processi aggiuntivi Visual Studio Code

Clicchiamo sempre su Avanti >

Quindi arriveremo alla fine dell’installazione.

Configuriamo Visual Studio Code

Al primo avvio di Visual Studio Code ci troviamo davanti questa schermata:

Schermata Welcome Visual Studio Code

Ora andremo a configurare l’IDE per le nostre esigenze, installeremo dei tools per avere il massimo supporto nella scrittura e lettura del nostro codice sorgente. I tools in questione sono per il linguaggio PHP, Javascript, HTML e CSS che ci serviranno durante tutto il nostro percorso.

Tool PHP

Per installare i tools clicchiamo sulla voce del menu “View” e scegliamo “Extensions”:

Extensions Visual Studio Code

Si aprirà una finestra con tutti i tools presenti nel marketplace di Visaul Studio Code, nel campo “Search” digitiamo “PHP”, scegliamo nella lista “PHP Extensions Pack”, infine clicchiamo su “install”:

L’estensione PHP ha bisogno di una configurazione per poter funzionare al meglio, facciamo una prova:

Prima di tutto clicchiamo sull’ultima icona nella colonna sinistra per nascondere la finestra delle estensioni

Clicchiamo su “File” e scegliamo “New File”

Nuovo File Visual Studio Code

Adesso clicchiamo di nuovo su “File” e scegliamo “Save As”

Salva File Visual Studio Code

Si aprirà una finestra dove sceglieremo il nome e il tipo del File, nel campo “Nome File” digitiamo un nome a nostro piacimento e nel campo “Salva Come” scegliamo “PHP”

Tipo File Visual Studio Code

Ora vedremo nella scheda del nostro file il nome che abbiamo scelto con l’estensione .php, usciranno nel frattempo, in basso a destra, due popup di warning che ci avvisano della mancanza del PATH al file PHP. In pratica l’estensione non riesce a trovare il percorso della cartella dove risiede l’eseguibile di PHP.

Warning PATH estensione PHP Visual Studio Code

Vi ricordate di XAMPP? No? Nell’articolo Installare e configurare XAMPP ne parlo ampiamente(senza XAMPP non possiamo configurare l’estensione PHP).

Clicchiamo su “Open settings” nel primo warning, sia aprirà una finestra:

Setting estensione PHP Visual Studio Code

Clicchiamo su “Edit il setting.json” si aprirà una nuova finestra

setting.json estensione PHP Visual Studio Code

ora dovremo inserire il percorso del nostro eseguibile PHP in questo modo:

PATH PHP Visual Studio Code

!ATTENZIONE!

Il percorso dell’eseguibile di PHP è uguale a quello che vedete nella schermata solo se avete seguito le indicazioni nel mio articolo Installare e configurare XAMPP

Torniamo ora al file che avevamo creato in precedenza e scriviamo questo codice al suo interno per iniziare a prendere confidenza con l’IDE:

<?php
echo 'Il mio percorso su faidaweb.it';
?>

Salviamo il file nella cartella htdocs di XAMPP C:\xampp\htdocs , avviamo dal pannello di controllo di XAMPP il server “Apache”, apriamo una finestra del browser e digitiamo nella barra degli indirizzi localhost:81/nomedelfilecheavetescelto.php il codice che avete scritto nel file stamperà sullo schermo “Il mio percorso su faidaweb.it”:

XAMPP in funzione

Con questo abbiamo testato XAMPP e scritto il nostro primo file in PHP.

Tool Javascript

Per installare l’estensione Javascript, torniamo nella finestra delle Estensione e nel campo ricerca digitiamo appunto “javascript”

Estensione Javascript Visual Studio Code

Cerchiamo “ES Lint” e clicchiamo su “Install”.

Tool HTML

Per installare l’estensione HTML, nel campo ricerca digitiamo appunto “html”

Estensione HTML Visual Studio Code

Cerchiamo “HTML Snippets” e clicchiamo su “Install”

Tool CSS

Infine per installare l’estensione CSS, nel campo ricerca digitiamo appunto “css”

Estensione CSS Visual Studio Code

Cerchiamo “HTML CSS Support” e clicchiamo su “Install”

Con questo articolo abbiamo visto come installare e configurare l’IDE Visual Studio Code e lo abbiamo aggiunto al nostro ambiente di sviluppo web!

Nel prossimo articolo vedremo come scaricare ed installare il programma per ottimizzare le immagini!

Vuoi rimanere aggiornato sull’uscita dei nuovi articoli?

Oppure

  • Iscriviti alla newsletter

Se fai entrambe le cose non mi offendo!

Cosa ne pensi di questo articolo? Lasciami un commento

Buon FaiDaWeb!