Share
Visual Studio Code è uno dei più recenti bambini sul blocco "IDE" e sta facendo molto rumore. Ci vuole un po 'di tempo per guadagnare terreno, forse perché è uno dei pochi prodotti open source di Microsoft, ma ha preso d'assalto la community open source. Gli sviluppatori che hanno giurato fedeltà a Sublime Text 3 e Atom si stanno lentamente convertendo grazie alla potenza e alla semplicità di VS Code, per non parlare della sua incredibile libreria di estensioni.
Ho iniziato la mia vita di codifica su Sublime Text 3, mi sono trasferito su Atom, poi su PHPStorm, quindi dopo che il mio abbonamento è scaduto con JetBrains ho pensato di provare VS Code. Continua a semplificarmi la vita e, così facendo, mi rende uno sviluppatore migliore.
Questa introduzione ti porterà da zero a eroe, aggiornandoti e correndo con VS Code, concentrandoti in particolare sulle mie estensioni di sviluppo front-end preferite, assicurandoti che ogni aspetto del tuo flusso di lavoro sia coperto.
Assumerò alcuni punti per questo articolo:
Per prima cosa, se non hai ancora installato VS Code, vai al sito Web di Visual Studio Code. VS Code è multipiattaforma, quindi le nostre configurazioni funzioneranno su Windows, Mac e Linux.
VS Code è disponibile anche come pacchetto Homebrew Cask su Mac: brew cask installa visual-studio-code
Un passaggio che trovo spesso un sacco di tutorial è la possibilità di eseguire VS Code dal terminale. Ci sono alcuni modi per farlo. Se hai già una configurazione .bash_profile puoi aggiungere questo:
export PATH = "$ PATH: / Applicazioni / Visual Studio Code.app/Contents/Resources/app/bin"
Oppure, per un approccio più multipiattaforma, premi la scorciatoia Command Palette: Maiusc + Comando + P e digita la parola conchiglia - questo ti darà un'opzione chiamata: Installa il comando codice in PATH - premi invio e il gioco è fatto. Ora puoi avviare file e cartelle ovunque dal terminale digitando: percorso codice / su / file / o / dir
Lascia il tuo codice: è il modo migliore per fermare gli errori prima che ti causino uno stress eccessivo!
Se stai utilizzando l'ultima versione di ECMA Script, ESLint è ciò che fa per te. Questa estensione integra il riconoscimento del pattern ESLint direttamente in VS Code e ti aiuta con gli errori comuni che gli sviluppatori fanno con la nuova sintassi. Richiede che il pacchetto ESLint NPM sia installato localmente nel progetto o globalmente.
Per quelli di voi che amano scrivere più programmatic Sass, Sass Lint offre una serie di configurazioni facili da usare per scrivere Sass conforme agli standard.
JS Hint è un altro grande JavaScript Linter che ti aiuta con logica, sintassi e altro, a seconda della tua configurazione.
Se sei un fan di TypeScript, l'estensione TSLint è la tua migliore amica. Con TypeScript che è un linguaggio precompilato, hai il pieno controllo su ciò che il compilatore fa per te e sulle opzioni di formattazione automatica.
Queste estensioni offrono tutti modi Git amichevoli per gestire configurazioni personalizzate / condivise tra gli sviluppatori del tuo team .eslintrc e .sass-lint.yml o .jshintrc
Ho volutamente lasciato qui i nostri Lint HTML. Considerando che userò un'estensione come Beautify per la formattazione e tabulazione del mio HTML in base a un .editorconfig Trovo che i Linter HTML funzionino piuttosto male. Non prendono in considerazione la semantica e tendono a fare un cattivo lavoro aiutandoti con problemi di accessibilità. Dato che il significato dell'HTML può essere relativamente ambiguo, è meglio usare un set di strumenti che facciano lavori più piccoli.
Per estendere la funzionalità HTML in VS Code, utilizzo quanto segue:
Potrebbe essere utile un po 'di miglioramento, ma mi è sempre piaciuta la funzionalità del tag di chiusura automatica di Sublime Text 3. L'estensione sopra menzionata ti aiuterà con questo in VS Code.
Questa è un'altra utile estensione HTML che consente agli utenti di fare clic all'interno di un elemento HTML e rinominarlo, rinominando contemporaneamente il tag di chiusura.
Mi sono allontanato da Grunt qualche tempo fa, ma per coincidenza non sembrano esserci estensioni di Grunt sul mercato, almeno non con una trazione sufficiente per avere un impatto notevole. Le estensioni sottostanti sono principalmente incentrate su Gulp e Webpack in quanto sembrano essere in testa alla corsa nel mondo del task management in questo momento.
Questa estensione ti permette di usare la Command Palette in VS Code per iniettare facilmente utili configurazioni Gulp nel tuo Gulpfile.js; un must se sei ancora un po 'traballante sull'impostazione di Gulp.
La configurazione di Webpack può essere uno dei compiti più spaventosi a cui uno sviluppatore deve impegnarsi. L'estensione Webpack per VS Code toglie la paura di fornirti un webpack.config.js minimale per avviare il tuo progetto. Se sei una persona che progredisce e non ti piace essere lasciato al buio mentre il tuo terminale pensa alle cose, allora l'estensione di Webpack Progress è per te. Fornisce una buona barra di avanzamento per quando Webpack sta facendo il suo dovere.
Una delle estensioni più potenti per il controllo della versione in VS Code è:
Per i principianti e gli utenti esperti allo stesso modo, Git Lens è la centrale elettrica. Rende facile Git e le sue molte complessità più gestibili e visive. Mi è piaciuto usarlo così tanto che oltre ad usare Terminal per aggiungere, commit, branch e push, ho completamente scartato le GUI di Git.
Quasi ogni impostazione è personalizzabile. Git Lens fornisce feedback in tempo reale dei dati Git durante la codifica. Vuoi sapere chi ha scritto quella funzione che non funziona? Vuoi vedere quanto è cambiato il codice negli ultimi commit? Non sei sicuro di come gestire un conflitto di merge in un file che non hai mai scritto o con un contesto limitato? Git Lens gestisce tutto questo per te.
Laddove, come altri IDE hanno pieno supporto per la maggior parte delle lingue, VS Code lascia a te la maggior parte delle volte. Come e quando lo richiedi, puoi aggiungere il supporto linguistico per qualsiasi tecnologia hai a che fare, HTML e CSS predefiniti, oltre a JavaScript sono forniti, ma se hai bisogno di Python è solo un clic lontano. Nel mio flusso di lavoro uso Python ogni tanto, ma Node è stata una grande cosa per me.
Intellisense si occupa essenzialmente dei completamenti. Puoi colpire la scheda o passare il mouse su un percorso di file, per esempio, e VS Code farà il duro lavoro per te.
Se sei una di quelle persone che adora utilizzare le nuove tecnologie nel tuo flusso di lavoro e sei pazzo della nuova edizione di JavaScript, allora il linter Babel ES6 / ES7 è per te.
Questa è un'estensione geniale che completa / suggerisce percorsi di file durante la digitazione. Se vieni da uno sfondo di PHPStorm, conoscerai la sensazione!
Una grande estensione quando si usa richiedere() o import in Node.js, questa estensione completa automaticamente i percorsi dei file ai moduli del nodo.
Questa è un'estensione molto utile per il completamento automatico dei nomi di classi CSS definiti nei file CSS collegati. Se sei un Bootstrap, Foundation o solo un fan del framework in generale, questo ti farà risparmiare un sacco di tempo!
Per i fan CSS precompilati, questa estensione rende intellisense possibile per importazioni, mixaggi, include e funzioni in SCSS.
Se non hai ancora incontrato PostCSS, ti stai perdendo. È un set avanzato e estremamente avanzato di plugin per CSS che rende i CSS molto più potenti. Uso due estensioni PostCSS: Sintassi e ordinamento; uno consente il supporto della sintassi per i nuovi moduli CSS di livello 4 come il nesting e l'altro mi consente di ordinare alfabeticamente le proprietà CSS.
Anche se non è solo Intellisense, questa è una grande estensione per lo sviluppo di Vue.js. È una soluzione all-in-one per aggiungere linting, intellisense e formattazione allo sviluppo di Vue.js e include già alcune delle estensioni che ho menzionato sopra.
Questa è una soluzione completa per lo sviluppo di applicazioni React Native. Per impostazione predefinita, VSCode ha un sacco di supporto integrato per React.
Passi molto tempo davanti al tuo IDE, quindi assicurarti che sia facile per gli occhi e leggibile è importante quanto qualsiasi altro aspetto che ho menzionato.
Innanzitutto, ottieni alcune icone di cartelle / file in modo da poter facilmente distinguere i file che stai utilizzando.
Cobalto 2 non è troppo scuro, non troppo leggero, e ha un grande contrasto per un tema editoriale. Ha anche una configurazione colore corrispondente per i terminali ZSH.
Se non hai sentito parlare di Dash, dovrebbe essere il tuo nuovo migliore amico. Dash è un'app di documentazione API per Mac, ma questa estensione si collega direttamente a VS Code. Facendo clic su qualsiasi metodo, si aprirà Dash alla rispettiva pagina. Lo stesso plugin supporta Zeal, un'alternativa Windows e Linux.
Come accennato in precedenza, l'estensione Beautify è un ottimo strumento se sei irremovibile sulla formattazione del codice e sulla standardizzazione dell'editor. Permette anche di impostare a .jsbeautifyrc file che puoi impegnare in repository Git per la collaborazione. Beautify può anche essere usato come sostituto di .editorconfig se non lo supporti Abbellisci i formati JS, CSS, Sass, JSON e HTML.
Sempre più IDE forniscono supporto per EditorConfig, che consente di includere un .editorconfig nei tuoi repository di progetto. Ciò consente ai tuoi colleghi sviluppatori IDE e linters di leggere da un file per standardizzare tab e spaziatura, nonché la fine della linea tra i progetti.
Per una soluzione più robusta, prova Prettier. Prettier segue lo stesso paradigma di configurazione di ESLint, fornendo a .prettierrc file che si impegna nei repository. Leggerà anche dal .editorconfig file se esiste. In effetti puoi sbarazzarti di ESLint e Sass Lint e usare Prettier come soluzione unica. Ha le sue estensioni per EsLint, StyleLint e altro.
Recentemente mi sono trasferito a ZSH che ha completamente trasformato la mia esperienza di terminale. Pur non essendo un'estensione diretta di VS Code, può essere integrato tramite il pannello Terminale. Ho dovuto fare un po 'di configurazione per farlo funzionare su Mac, specialmente con colori e temi.
ZSH offre funzionalità come il completamento di schede per directory, file, rami Git e altro. Puoi leggere ulteriori informazioni sull'impostazione di ZSH sul repository Github o lasciare un messaggio nei commenti qui sotto se desideri saperne di più.
Visual Studio Code viene fornito con il debug di JavaScript immediatamente. Puoi fare un ulteriore passo avanti usando le seguenti estensioni:
Questa estensione consente una sincronizzazione diretta tra il debugger del codice VS e gli strumenti per sviluppatori di Chrome che ti consentono di impostare punti di interruzione e passare direttamente al codice.
Riguarda la configurazione delle mie estensioni per Visual Studio Code, quali sono i tuoi preferiti personali? Prima di andare, però, non dimenticare che la programmazione dovrebbe essere divertente; potresti aver bisogno di alcuni brani per aiutarti. L'estensione Spotify aggiunge un piccolo lettore multimediale in linea all'interfaccia utente del codice VS..
Accentsconagua