Molte volte ci capita di voler provare degli snippet di codice, oppure di voler un ambiente il più leggero possibile in grado di permetterci di testare qualsiasi snippet di codice HTML/CSS/JS?
Ad oggi esistono molti editor online, come PasteBin, JSFiddle, CodePen, ma il loro scopo è più simile a creare ambiente usa-e-getta, in cui regna il timore di poter perdere quello su cui si sta lavorando, magari chiudendo involontariamente il browser.
Dall'altro lato, se volessimo fare qualcosa in locale, il primo pensiero è l'utilizzo di un boilerplate di Express, oppure un plugin di Node intallato globalmente, come http-server. Questi consentono di avere un ambiente pronto in pochissimo tempo, ma peccano in vari punti, tra i quali la necessità di installare ogni volta i node modules e l'assenza di un meccanismo di live reload, che tenga in sincronia il file su cui stiamo lavorando con quanto mostrato dal browser.
Per questi scopi possiamo utilizzare Live Server, disponibile all'indirizzo https://github.com/ritwickdey/vscode-live-server .
Si tratta di un'estensione sviluppata per VS Code, grazie alla quale il nostro unico pensierò sarà "Apri la cartella con Visual Studio Code"

Una volta installato, ci basterà cliccare sull'icona in basso a destra "Go Live!", e verrà creato un web server che distribuirà il nostro codice, ma non solo: il livereload sarà abilitato di default, se andremo a cambiare qualcosa nella pagina, l'interfaccia web si aggiornerà all'istante. Utile anche per chi sviluppa con VS Code in Container, infatti la porta verrà esposta in automatico verso l'esterno.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestione degli environment per il deploy con un workflow di GitHub
Migrare un repository git da Azure DevOps a GitHub
Impostare il forward degli header in un sito ASP.NET Core dietro a un reverse proxy
Modernizzare le applicazioni WPF e Windows Forms con Blazor
Sfruttare i tag nell'output cache di ASP.NET Core 7
Utilizzo di Map e Object in Javascript
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
Creare attributi generici in C#
Autenticazione basata su certificati con ASP.NET Core
Linting di un Dockerfile con un workflow di GitHub
Usare Docusaurus per creare un sito di documentazione
Eseguire operazioni con timeout in React