[{"data":1,"prerenderedAt":279},["ShallowReactive",2],{"tag-extensions":3},[4],{"id":5,"title":6,"body":7,"categories":259,"coverImage":261,"date":262,"description":263,"extension":264,"meta":265,"navigation":266,"path":267,"seo":268,"stem":269,"sticky":266,"tags":270,"__hash__":278},"articles/i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer.md","Visual Studio Code: i 10 migliori plugin per qualsiasi front-end developer",{"type":8,"value":9,"toc":246},"minimark",[10,19,27,30,35,44,51,64,68,74,80,83,87,93,99,102,106,112,118,121,125,131,137,146,150,156,162,165,169,175,181,184,188,194,205,209,215,221,227,231,237,243],[11,12,13,14,18],"p",{},"Tutti amiamo Visual Studio Code: l'",[15,16,17],"strong",{},"editor gratuito e moderno"," sviluppato da Microsoft pensato per scrivere, ottimizzare e debuggare applicazioni web e cloud.",[11,20,21,22,26],{},"Visual Studio Code è disponibile su tutte le piattaforme (Windows, MacOS, Linux) ed è ",[23,24,25],"em",{},"estendibile"," grazie all'ausilio di plugins, che ne aumentano le capacità introducendo funzionalità e comportamenti.",[11,28,29],{},"Al di là di casi specifici, a seguire quelli che secondo me sono i plugin imprescindibili per poter vivere bene quando si sviluppano webapp frontend.",[31,32,34],"h2",{"id":33},"live-server","Live Server",[11,36,37],{},[38,39,43],"a",{"href":40,"rel":41},"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer",[42],"nofollow","https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome",[11,45,46],{},[47,48],"img",{"alt":49,"src":50},"Explorer Window Control","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/vscode-live-server-explorer-menu-demo-1.gif",[11,52,53,54,59,60,63],{},"Questo plugin è in grado di creare un web server locale utile per testare la web app, risolvendo molti dei problemi che possono presentarsi effettuando la preview su protocollo file anziché http. Il pezzo forte è il ",[23,55,56],{},[15,57,58],{},"livereload",", e cioè l'",[15,61,62],{},"auto-aggiornamento della pagina ad ogni salvataggio del sorgente che stiamo scrivendo",".",[31,65,67],{"id":66},"bracket-pair-colorizer","Bracket Pair Colorizer",[11,69,70],{},[38,71,72],{"href":72,"rel":73},"https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer",[42],[11,75,76],{},[47,77],{"alt":78,"src":79},"Screenshot","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/example.png",[11,81,82],{},"Le parentesi (tonde, quadre, graffe) sono il pane quotidiano di ciascun developer. Quando l'applicazione inizia ad avere una certa complessità può essere difficile individuare inizio e fine dei blocchi/parentesi senza un aiuto. Questo plugin fa proprio questo: colora in maniera diversa ed evidenzia le parentesi per rendere immediatamente individuabile la coppia di parentesi di interesse per capire immediatamente dove iniziano e dove finiscono.",[31,84,86],{"id":85},"auto-close-tag","Auto Close Tag",[11,88,89],{},[38,90,91],{"href":91,"rel":92},"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag",[42],[11,94,95],{},[47,96],{"alt":97,"src":98},"Usage","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/usage.gif",[11,100,101],{},"Questo plugin piazza automaticamente un tag di chiusura ogni volta che questo è necessario.",[31,103,105],{"id":104},"path-intellisense","Path Intellisense",[11,107,108],{},[38,109,110],{"href":110,"rel":111},"https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense",[42],[11,113,114],{},[47,115],{"alt":116,"src":117},"IDE","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/iaHeUiDeTUZuo.gif",[11,119,120],{},"Path Intellisense suggerisce automaticamente il percorso di file e cartelle man mano che viene digitato. Comodissimo per chi detesta dover verificare e/o aprire le cartelle interessate per individuare il file corretto da includere (sia esso JS, CSS ecc).",[31,122,124],{"id":123},"git-lens","Git Lens",[11,126,127],{},[38,128,129],{"href":129,"rel":130},"https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens",[42],[11,132,133],{},[47,134],{"alt":135,"src":136},"Git Code Lens","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/code-lens.png",[11,138,139,140,145],{},"Questa estensione integra ",[38,141,144],{"href":142,"rel":143},"https://git-scm.com/",[42],"git"," direttamente all'interno del sorgente, mostrando di volta in volta chi e quando ha modificato un determinato blocco o riga del sorgente. Perfetto per tutti coloro che sono soliti sviluppare applicazioni a più mani e desiderano avere il polso della situazione.",[31,147,149],{"id":148},"better-comments","Better Comments",[11,151,152],{},[38,153,154],{"href":154,"rel":155},"https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments",[42],[11,157,158],{},[47,159],{"alt":160,"src":161},"Annotated code","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/better-comments.PNG",[11,163,164],{},"Arricchisce i commenti variando colore ed evidenziandone immediatamente il significato.",[31,166,168],{"id":167},"colorize","Colorize",[11,170,171],{},[38,172,173],{"href":173,"rel":174},"https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize",[42],[11,176,177],{},[47,178],{"alt":179,"src":180},"","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/demo.gif",[11,182,183],{},"Visualizza il colore corrispondete al codice colore selezionato (supporta hex, rgb, rgba, hsl) aiutando qualsiasi web designer a comprendere immediatamente il colore utilizzato nel codice.",[31,185,187],{"id":186},"material-theme","Material Theme",[11,189,190],{},[38,191,192],{"href":192,"rel":193},"https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme",[42],[11,195,196,197,204],{},"Applica un tema ",[38,198,201],{"href":199,"rel":200},"https://material.io/",[42],[23,202,203],{},"material"," a tutto l'editor.",[31,206,208],{"id":207},"material-icon-theme","Material Icon Theme",[11,210,211],{},[38,212,213],{"href":213,"rel":214},"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme",[42],[11,216,217],{},[47,218],{"alt":219,"src":220},"file icons","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/fileIcons.png",[11,222,223,224,226],{},"Applica l'icona giusta al file o cartella giusti, in stile ",[23,225,203],{},". Adoro il modo in cui queste icone rendono tremendamente esplicita la tipologia di file e cartelle di cui si sta parlando.",[31,228,230],{"id":229},"sort-lines","Sort lines",[11,232,233],{},[38,234,235],{"href":235,"rel":236},"https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines",[42],[11,238,239],{},[47,240],{"alt":241,"src":242},"Usage animation","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/usage-animation.gif",[11,244,245],{},"Ordina alfabeticamente le righe di codice selezionate, regalando una incredibile sensazione di ordine al sorgente.",{"title":179,"searchDepth":247,"depth":247,"links":248},2,[249,250,251,252,253,254,255,256,257,258],{"id":33,"depth":247,"text":34},{"id":66,"depth":247,"text":67},{"id":85,"depth":247,"text":86},{"id":104,"depth":247,"text":105},{"id":123,"depth":247,"text":124},{"id":148,"depth":247,"text":149},{"id":167,"depth":247,"text":168},{"id":186,"depth":247,"text":187},{"id":207,"depth":247,"text":208},{"id":229,"depth":247,"text":230},[260],"dev","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/vscode-plugins.jpg","2019-09-27T21:18:09.000Z","A grande richiesta 10 dei plugin che più raccomando per una esperinza di coding veramente zen.","md",{},true,"/i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer",{"title":6,"description":263},"i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer",[271,272,273,274,275,276,277],"code","development","editor","extensions","frontend","ide","vscode","VBW7MYbSjbadO7QdRGK8tU1AbwFYM6naHmqeQzWSB6Y",1777303096771]