Share
Visual Studio Code este unul dintre cei mai noi copii de pe IDE "block" și face mult zgomot. A fost nevoie de puțin timp pentru a obține o tracțiune, probabil pentru că este unul dintre puținele produse open source ale Microsoft, dar a fost luat de comunitatea open source de furtună. Dezvoltatorii care și-au jurat odată credința față de Sublime Text 3 și Atom sunt transformate lent de puterea și simplitatea codului VS - ca să nu mai vorbim de biblioteca incredibilă de extensii.
Am început propria mea viață de codificare pe Sublime Text 3, m-am mutat în Atom, apoi PHPStorm, apoi după ce abonamentul meu a expirat cu JetBrains, m-am gândit să-i dau VS Code o încercare. Continuă să-mi ușureze viața, făcându-mi un dezvoltator mai bun.
Această introducere vă va duce de la zero la erou, vă va pune în mișcare cu VS Code, concentrându-mă în special pe extensiile preferate de dezvoltare frontală, asigurându-vă că toate aspectele fluxului dvs. de lucru sunt acoperite.
Voi presupune câteva puncte pentru acest articol:
În primul rând, dacă nu aveți deja instalat cod VS, vizitați site-ul Visual Studio Code. Codul VS este cross-platform, astfel încât configurațiile noastre vor funcționa pe Windows, Mac și Linux.
Codul VS este, de asemenea, disponibil ca pachet Homebrew Cask pe Mac: butonul de fabricare a butonului visual-studio-code
Un pas pe care îl găsesc o mulțime de tutoriale de multe ori lasă în afara este capacitatea de a executa VS Cod de la terminal. Există câteva modalități de a face acest lucru. Dacă aveți deja o configurație .bash_profile, puteți adăuga aceasta:
export PATH = "$ PATH: / Aplicații / Visual Studio Code.app/Contents/Resources/app/bin"
Sau, pentru o abordare cu mai multe platforme, apăsați comanda rapidă Paletă de comandă: Shift + Command + P și tastați cuvântul coajă - aceasta vă va oferi o opțiune numită: Instalați comanda de cod în PATH - apăsați Enter și ați terminat. Acum, puteți lansa fișiere și foldere oriunde din terminal introducând: calea de cod / la / fișierul / sau / dir
Lint codul dvs. - este cel mai bun mod de a opri erorile înainte de a vă provoca orice stres excesiv!
Dacă executați cea mai recentă versiune a ECMA Script, atunci ESLint este pentru dvs. Această extensie integrează recunoașterea modelului ESLint direct în codul VS și vă ajută cu greșeli comune pe care dezvoltatorii le fac cu noua sintaxă. Este necesar ca pachetul NPM ESLint să fie instalat fie local în proiectul dvs., fie la nivel global.
Pentru cei care vă place să scrieți mai multe programe Sass, Sass Lint vă oferă un set de configurații ușor de folosit pentru scrierea standardelor Sass conforme.
JS Hint este un alt mare linter JavaScript care te ajută cu logică, sintaxă și multe altele, în funcție de configurația ta.
Dacă sunteți un fan tip TypeScript, extensia TSLint este cel mai bun prieten al tău. În cazul în care TypeScript este un limbaj precompilat, aveți control deplin asupra a ceea ce scanează compilatorul pentru dvs., precum și opțiunile de formatare automată.
Aceste extensii oferă modalități accesibile Git de a gestiona configurații personalizate / partajate între dezvoltatorii din echipa dvs., și anume în .eslintrc și .Sass-lint.yml sau .jshintrc
Am lăsat intenționat HTML Linters aici. În timp ce eu voi folosi o extensie ca Beautify pentru formatarea și tabbing HTML mea în conformitate cu un .editorconfig Am constatat că linteria HTML funcționează destul de prost. Ei nu iau în considerare semantica și au tendința de a face o treabă rea de a vă ajuta cu preocupări privind accesibilitatea. Deoarece semnificația HTML poate fi relativ ambiguă, este mai bine să folosiți un set de instrumente care să facă locuri de muncă mai mici.
Pentru a extinde funcționalitatea HTML în Codul VS, folosesc următoarele:
Ar putea folosi un pic de imbunatatire, dar mi-a placut intotdeauna functia de inchidere automata a sublimului text 3. Extensia menționată mai sus vă va ajuta cu acest lucru în Codul VS.
Aceasta este o altă extensie HTML utilă, care permite utilizatorilor să facă clic pe un element HTML și să îl redenumească, în timp ce redenumirea simultană a etichetei de închidere.
M-am mutat de la Grunt ceva timp în urmă, dar, în mod coincidențial, nu pare să existe extensii pe piață, cel puțin nu cu tracțiune suficientă pentru a face mult impact. Extensiile de mai jos se concentrează în principal pe Gulp și Webpack, deoarece par să conducă cursa în lumea managementului sarcinilor chiar acum.
Această extensie vă permite să utilizați Paleta de comandă în Codul VS pentru a injecta cu ușurință configurații utile Gulp în Gulpfile.js; o trebuie sa aveti daca sunteti inca un pic agitat pentru infiintarea lui Gulp.
Configurarea Webpack-ului poate fi una dintre cele mai înspăimântătoare sarcini de care trebuie să se angajeze un dezvoltator. Extensia Webpack pentru codul VS ia frica de ea oferindu-va un minimal webpack.config.js pentru a incepe proiectul. Dacă sunteți o persoană progresistă și nu vă place să fiți lăsat în întuneric în timp ce Terminalul vă gândește la lucruri, atunci extensia Webpack Progress este pentru dvs. Acesta oferă un bar de progres frumos atunci când Webpack își face lucrul.
Una dintre cele mai puternice extensii pentru controlul versiunii în Codul VS este:
Pentru noii veniți și pentru utilizatorii avansați, Git Lens este un motor electric. Ea face o treabă ușoară de a face Git și multe intricacies mai ușor de gestionat și vizual. M-am bucurat sa-l folosesc atat de mult incat sa folosesc Terminalul pentru a adauga, a comite, a ramifica si a impinge, am renuntat complet la GUI GUI's.
Aproape fiecare setare este personalizabilă. Git Lens furnizează feedback în timp real despre datele Git în timp ce codificați. Vrei să știi cine a scris acea funcție care nu funcționează? Doriți să vedeți cât de mult sa schimbat codul în ultimele câteva comitete? Nu sunteți sigur cum să gestionați conflictul de fuzionare într-un fișier pe care nu l-ați scris niciodată sau că aveți un context mic? Git Lens se ocupă de toate acestea pentru dvs..
În cazul în care, pe măsură ce alte IDE-uri au sprijinul pentru majoritatea limbilor, codul VS vă lasă în cea mai mare parte. Când și când o solicitați, puteți adăuga suport pentru limbă pentru orice tehnologie aveți de-a face, cu HTML și CSS în afara câmpului, precum și cu JavaScript, dar dacă aveți nevoie de Python, este doar un clic departe. În fluxul meu de lucru folosesc Python atât de des, dar nodul a fost un lucru important pentru mine.
Intellisense are, în esență, grijă de realizări. Puteți să atingeți fila sau să treceți cu mouse-ul peste o cale de fișier, de exemplu, iar codul VS va face munca grea pentru dvs..
Dacă sunteți unul dintre acei oameni care iubește folosind tehnologii noi în fluxul de lucru și sunteți nebun în legătură cu noua ediție a JavaScript, atunci linia Babel ES6 / ES7 este pentru dvs..
Aceasta este o extensie strălucitoare care autocompletează / sugerează căile de fișiere în timp ce tastați. Dacă veniți dintr-un fundal PHPStorm, veți ști sentimentul!
O extensie extraordinară când se utilizează require () sau import în Node.js, această extensie autocompletează căile de fișiere către modulele de noduri.
Aceasta este o extensie foarte utilă pentru completarea automată a denumirilor de clasă CSS definite în fișierele CSS conectate. Dacă sunteți un Bootstrap, Fundația sau doar un fan cadru în general, acest lucru vă va economisi mult timp!
Pentru fanii CSS precompilați, această extensie face intellisense posibil pentru importuri, mixuri, include și funcționează în SCSS.
Dacă tocmai ați întâlnit PostCSS, atunci veți pierde. Este un set de plugin-uri avansate și extrem de avansate pentru CSS care face ca CSS să fie mult mai puternic. Eu folosesc două extensii PostCSS: Sintaxă și Sortare; una permite suportul sintaxei pentru noi module CSS Level 4 cum ar fi cuiburile, iar cealaltă permite să sortez proprietățile CSS în ordine alfabetică.
Chiar dacă nu este cu adevărat Intellisense, aceasta este o extensie excelentă pentru dezvoltarea Vue.js. Este o soluție all-in-one pentru adăugarea de linging, intellisense și formatare la dezvoltarea Vue.js și include deja unele dintre extensiile pe care le-am menționat mai sus.
Aceasta este o soluție completă pentru dezvoltarea aplicațiilor React Native. În mod implicit, VSCode are o tona de suport încorporată pentru React.
Voi petreceți mult timp în fața IDE-ului dvs., asigurându-vă că este ușor pe ochi și lizibil este la fel de important ca orice alt aspect pe care l-am menționat.
Mai întâi, obțineți câteva pictograme de fișiere / fișiere, astfel încât să puteți distinge cu ușurință fișierele pe care le utilizați.
Cobalt 2 nu este prea întunecat, nu prea luminos și are un contrast mare pentru o temă de editor. De asemenea, are o configurație corespunzătoare a culorilor pentru terminalele ZSH.
Dacă nu ați auzit de Dash, ar trebui să fie noul dvs. cel mai bun prieten. Dash este o aplicație de documentație API pentru Mac, dar această extensie se încarcă direct în codul VS. Făcând clic pe orice metodă, se va deschide Dash pe pagina respectivă. Același plugin acceptă Zeal, care este o alternativă Windows și Linux.
Așa cum am menționat mai devreme, extensia Beautify este un instrument excelent dacă esti adamant în ceea ce privește formatarea codului și standardizarea editorului. De asemenea, vă permite să setați o .jsbeautifyrc fișier pe care îl puteți angaja la replici Git pentru colaborare. Îmbătrânirea poate fi, de asemenea, utilizată ca înlocuitor .editorconfig dacă nu o susțineți. Îmbunătățiți formatele JS, CSS, Sass, JSON și HTML.
Din ce în ce mai multe IDE oferă suport pentru EditorConfig, care vă permite să includeți un .editorconfig în repo-urile de proiect. Acest lucru îi oferă dezvoltatorilor dvs. IDE și linter pentru a citi dintr-un fișier pentru a standardiza tabbing și spațierea, precum și linia de terminare a proiectelor.
Pentru o soluție mai robustă, încercați Prettier. Prettier urmează aceeași paradigmă de configurare ca ESLint, oferindu-vă un .prettierrc fișierul care se angajează în depozite. De asemenea, va citi de la .editorconfig dacă există. De fapt, puteți să scăpați de ESLint și Sass Lint și să utilizați Prettier ca soluție pentru o singură oprire. Are extensii proprii pentru EsLint, StyleLint și multe altele.
Recent am mutat la ZSH, care mi-a transformat complet experiența mea terminală. Deși nu este o extensie directă a codului VS, acesta poate fi integrat prin panoul Terminal. A trebuit să fac destul de multă configurație pentru a funcționa pe Mac, mai ales cu culori și teme.
ZSH oferă funcționalități cum ar fi completarea filelor pentru directoare, fișiere, sucursale Git și multe altele. Puteți citi mai multe despre configurarea ZSH pe Gothub repo sau lasă-mi un mesaj în comentariile de mai jos dacă doriți să aflați mai multe.
Codul Visual Studio este livrat împreună cu Debugging JavaScript. Puteți să faceți un pas mai departe utilizând următoarele extensii:
Această extensie permite o sincronizare directă între instrumentul de depanare a codului VS și instrumentele de dezvoltare Chrome care vă permite să setați puncte de întrerupere și să sarăți direct în cod.
Asta inseamna ca imi incalzesc extensiile pentru Visual Studio Code - care sunt favoritele tale personale? Înainte de a merge, totuși, nu uitați că codarea ar trebui să fie distractivă; este posibil să aveți nevoie de câteva melodii pentru a vă ajuta. Extensia Spotify adaugă un media player inline în interfața cu codul VS.
Accentsconagua