Najbolji uređivač koda za Vue.js

Uz sve veći broj kvalitetnih urednika koda za biranje, možda se pitate koji je najbolji uređivač koda za Vue.js. Neki programeri posvećeni su svojim urednicima isto koliko i političkim uvjerenjima, tako da ćete dobiti različite odgovore ovisno o tome koga tražite.

Ali kad je u pitanju kodiranje u Vueu, jedan od najboljih ljudi koji treba tražiti je Evan You, tvorac Vuea. Pa što on koristi? Visual Studio Code.

U intervjuu su ga pitali o temi, a on je odgovorio:

... Prebacivao sam se naprijed i natrag sve donedavno počeo koristiti TypeScript i budući da je VS Code TypeScript tako dobar, prebacio sam se (trajno) na VS kod.

Iako Vue ne zahtijeva upotrebu TypeScript-a, njegov izvorni kod uskoro će biti napisan u njemu, što smo objavili u ovom postu na Vue 3.0.

Možda razmišljate ... Ali ne radim na izvornom kodu i ne kôdim Vue s TypeScriptom, je li VS kod za mene još uvijek relevantan?

To me dovodi do teme Vetur, što je proširenje bogato značajkama koje vam daje stvari poput isticanja sintakse u .vue datotekama, isječcima, povezivanju, provjeri pogrešaka i oblikovanju, kao i automatskom dovršavanju i uklanjanju pogrešaka. U ovom trenutku to je najbolje Vue proširenje za uređivač koda. I trebalo bi biti, jer ga je razvio Pine Wu, član ključnog tima Vue.

Dakle, ako ste zainteresirani za korištenje VS koda za razvoj Vue (ili ga već imate), možete slijediti postupak u nastavku dok ću vam pokazati kako optimizirati VS kôd.

Što ćemo naučiti?

Naučit ćemo kako:

  • Pogledajte označavanje sintakse u našim .vue datotekama
  • Upotrijebite isječke koda za brži tijek rada
  • Konfigurirajte našeg uređivača da automatski oblikuje naš kôd
  • I istražite druga korisna proširenja koja će poboljšati naše iskustvo u razvoju

Instaliranje Vetura

Postoji nekoliko značajki koje čine VS Code odličnim okruženjem za razvoj Vuea, uključujući Vetur, dodatak koji je dizajnirao Pine Wu, osnovni član Vue.js tima.

Ovdje u VS kodu, ako otvorimo .vue datoteku, poput ove About.vue datoteke, vidimo sav ovaj sivi kod. To je zato što VS kôd neće automatski označiti sintaksu u .vue datotekama.

Vetur to može popraviti za nas i dati nam druge značajke dizajnirane za poboljšanje iskustva programera.

Pa sada instalirajmo. Otvorite trgovinu proširenja.

Zatim potražite "Vetur", odaberite ga u rezultatima pretraživanja i kliknite Instaliraj. Zatim kliknite Ponovo učitaj.

Veturove značajke

Sada kada je Vetur instaliran, pogledajmo njegove značajke.

Istaknuće sintakse Unosom naredbe + P i upisivanjem imena .vue datoteke možemo otvoriti datoteku About.vue. Kao što vidite, sada naš kôd dobiva odgovarajuće isticanje sintakse. Strašno - nema više sivog koda.

Provjeravanjem datoteke Home.vue, možemo vidjeti da se naš JavaScript također pravilno prikazuje.

Isječci Još jedna značajka koju Vetur dolazi u paketu s isječcima koda. To su „isječci“ koda koji štede vrijeme i omogućuju vam da brzo stvorite najčešće korištene dijelove koda.

Stvorimo novu komponentu da biste to vidjeli na djelu. Ime ćemo nazvati EventCard.vue. Ako upišemo riječ "skele" u .vue datoteku i pritisnemo ENTER, ta će se datoteka automatski napuniti kosturom ili skelom jedne komponente .vue datoteke.

Emmet Vetur također dolazi u paketu s Emmetom. Ovo je popularni alat koji vam omogućuje da pomoću prečaca sastavite svoj kôd.

Na primjer, možemo upisati h1 i pritisnuti enter, a to će stvoriti element otvaranja i zatvaranja h1.

Kad upišemo nešto složenije, poput div> ul> li, nastaće:

        
                
  •              

Ako se čini da Emmet ne radi za vas, možete to dodati u svoje korisničke postavke:

"emmet.includeLanguages": {
          "vue": "html"
      }

Da biste saznali više o tome kako Emmet može ubrzati vaš razvoj, idite ovdje.

Instaliranje ESLinta i ljepšeg

Sada moramo biti sigurni da su instalirani ESLint i ljepši. U trgovini ekstenzija pretražit ćemo ESLint, a zatim je instalirati. A isto ćemo učiniti za ljepše. Nakon što je instaliran, pogodit ćemo ponovno učitavanje za ponovno učitavanje VS koda.

Konfiguriranje ESLinta

Sada kada su one instalirane, trebamo im dodati malo dodatne konfiguracije.

Kad smo kreirali naš projekt iz terminala, odlučili smo ga kreirati s namjenskim datotekama config, koji su nam dali ovu .eslintrc.js datoteku, gdje možemo konfigurirati ESLint za ovaj projekt. Da nismo izabrali namjenske datoteke, pronašli bismo ESLint konfiguracije unutar našeg package.json.

Dakle, u našu .eslintrc.js datoteku dodati ćemo:

„Dodatak: ljepša / preporučeno”

Ovo će omogućiti ljepšu podršku u ESLintu sa zadanim postavkama.

Dakle, naša datoteka sada izgleda ovako:

module.exports = {
      root: istina,
      env: {
        čvor: istina
      }
      'produžuje': [
        'Dodatak: vue / bitno',
        'dodatak: ljepši / preporučeni', // dodali smo ovu liniju
        '@ Vue / ljepši'
      ],
      pravila: {
        'no-console': postupak.env.NODE_ENV === 'proizvodnja'? 'error': 'isključeno',
        'ne-ispravljanje pogrešaka': process.env.NODE_ENV === 'proizvodnja'? 'error': 'isključeno'
      }
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Konfiguriranje ljepše

Također imamo mogućnost stvaranja ljepše konfiguracijske datoteke, dodavanja posebnih postavki prema našem osobnom stilu ili preferencijama našeg tima.

Stvorit ćemo ga ovdje i nazvati .prettierrc.js.

A unutra ćemo upisati:

module.exports = {
        singleQute: true,
        polu: lažno
    }

Ovo će dvostruke navodnike pretvoriti u pojedinačne citate i osigurati da se podtočke ne umetnu automatski.

Korisničke postavke

Da bismo VS kôd dodatno optimizirali za sjajno iskustvo u razvoju, dodati ćemo neke konfiguracije u naše korisničke postavke. Za pristup korisničkim postavkama kliknite na Kôd u gornjoj navigacijskoj traci, potom Postavke, a zatim Postavke. Ovo će otvoriti prozor korisničkih postavki u koji možete dodati postavke u jsonu.

Prvo želimo dodati:

"vetur.validation.template": netočno

Ovo će isključiti Veturovu značajku vezanja. Mi ćemo se umjesto toga oslanjati na ESLint + ljepši.

Sada želimo reći ESLint-u na kojim jezicima želimo provjeriti (vue, html i javascript) i postaviti autoFix na true na svaki:

"eslint.validate": [
        {
            "jezik": "vue",
            "autoFix": istina
        }
        {
            "jezik": "html",
            "autoFix": istina
        }
        {
            "jezik": "javascript",
            "autoFix": istina
        }
    ],

Tada ćemo, za dobru mjeru, reći ESLint da autoFixOnSave.

"eslint.autoFixOnSave": istina,

I recite našem uredniku da formatOnSave.

"editor.formatOnSave": istina,

Testiranje

Da bismo testirali da ovo radi, ovdje ćemo dodati komponentu podataka našoj komponenti EventCard-a i dodati citat: "Želim biti jedno", a ovdje ćemo baciti i zarez. Kad pogodimo uštedu, naši se citati pretvaraju u pojedinačne navodnike i zarez se uklanja. Strašno - djeluje.

Dodatni alati

Pogledajmo nekoliko dodatnih alata koji vam mogu pomoći u ubrzavanju razvoja.

Kopiraj relativni put Kopiraj relativni put je proširenje koje vam omogućuje kopiranje lokacije u kojoj datoteka živi, ​​a temelji se na odnosu prema direktoriju na koji se povezuje.

Potražimo ga, instaliramo ga i pogledajmo u akciji.

U našoj datoteci Home.vue vidimo da već postoji relativan put gdje uvozimo komponentu HelloWorld.

Da bismo dobili relativni put datoteke koju želimo uvesti, desnom tipkom miša kliknite datoteku, a zatim odaberite Kopiraj relativni put. Sada, kada zalijepimo ono što je kopirano, vidimo da imamo točan relativni put. Primjetite ovaj src. Komentar ovdje daje nam do znanja da zbog načina na koji je postavljen naš projekt možemo umjesto njega upotrijebiti @.

Integrirani terminal Prikladna ugrađena značajka uređivača VS koda je njegov integrirani terminal, koji možete koristiti umjesto prebacivanja na zasebni terminal. Možete ga otvoriti prečacem na tipkovnici: `ctrl +` `

Više isječaka Ako vas zanima instalacija nekih dodatnih praktičnih isječaka koda, možete preuzeti potpuni paket isječaka Vue VSCode, kreirao član Core Vue Team Sarah Drasner.

Potražimo proširenje s njezinim imenom, sarah.drasner. Evo ih. Sada možemo instalirati i ponovno učitati.

Pogledajmo ih u akciji.

Ako upišemo vif na element u našem predlošku, dat će nam v-if iskaz, a ako tipkanjem von dobijemo punu obradu događaja. Umjesto da ručno utipkamo svojstvo podataka, možemo jednostavno upisati vdata koji će stvoriti jedan za nas. Isto možemo učiniti i dodavanjem rekvizita s vpropsom. Čak ga možemo koristiti i za stvaranje koda za brzi uvoz libara, uz vimport-lib. Kao što vidite, ovo su vrlo korisni isječci koji štede vrijeme.

Imajte na umu da ako koristite ovo proširenje Snippets, preporučuje se dodavanje linije u vaše korisničke postavke:

vetur.completion.useScaffoldSnippets bi trebao biti lažan

Ovo će osigurati da ti isječci nisu u sukobu s Veturovim.

Teme boja Konačno, ako se pitate kako promijeniti temu u VS kodu ili se pitate koju od njih ovdje koristim, idite na Kod> Postavke> Tema boja.

Kao što vidite, koristim FlatUI Dark. Ovdje možete promijeniti boju svoje teme u bilo kojoj od ovih opcija ili potražiti druge teme u trgovini proširenja.

Ako ne vidite onaj koji želite, možete se uputiti i na mrežnu tržnicu Visual Studio. Ovdje možete pregledati tona različitih dodataka i tema, poput Night Owl naše prijateljice Sarah Drasner. Možete ga instalirati izravno iz preglednika, a zatim ga pronaći u vašim postavkama Teme boja.

Nastavite učiti

Da biste nastavili učiti sa mnom, možete položiti cijeli tečaj Real World Vue, na web lokaciji VueMastery.com.