A Vue.js legjobb kódszerkesztője

A növekvő számú minőségi kód-szerkesztő közül választhat, és azon tűnődhet, vajon mi a legjobb kódszerkesztő a Vue.js-hez. Néhány fejlesztő ugyanolyan elkötelezett a szerkesztők iránt, mint a politikai meggyőződésük iránt, tehát különböző válaszokat kap, attól függően, hogy ki kérdezi.

De amikor a Vue-ban kódolunk, akkor az egyik legjobb ember az Evan You, a Vue alkotója. Szóval mit használ? Visual Studio kód.

Egy interjúban megkérdezték a témáról, és azt válaszolta:

… Egészen a közelmúltig váltottam a TypeScript használatát, és mivel a VS Code TypeScript olyan jó, átváltottam (véglegesen) a VS kódra.

Noha a Vue nem követeli meg, hogy használja a Typecript-et, a forráskód hamarosan be lesz írva benne, ahogy ezt a Vue 3.0-as bejegyzésünkben leírtuk.

Lehet, hogy gondolkodik… De nem a forráskódon dolgozom, és nem kódolom a Vue-t a TypeScript-rel, a VS-kód továbbra is releváns számomra?

Ez vezeti a Vetur témához, amely egy szolgáltatásban gazdag kiterjesztés, amely olyan dolgokat ad, mint a szintaxis-kiemelés a .vue fájlokban, kivonatok, fészkelés, hibaellenőrzés és formázás, valamint az automatikus kitöltés és hibakeresés. Ezen a ponton ez a legjobb Vue kiterjesztés a kódszerkesztő számára. És így kellene lennie, mert Pine Wu fejlesztette ki, aki a Vue központi csapatának tagja.

Tehát ha érdekli a VS-kód használata a Vue-fejlesztéshez (vagy már létezik), akkor kövesse az alábbiakban ismertetett módon, miként mutatom meg, hogyan lehet optimalizálni a VS-kódot.

Mit fogunk megtanulni?

Megtanuljuk, hogyan kell:

  • Szerezzen szintaxis kiemelést a .vue fájlokban
  • Használjon kódrészleteket a gyorsabb munkafolyamathoz
  • Konfigurálja a szerkesztőt, hogy automatikusan formázza a kódot
  • Fedezze fel más hasznos bővítményeket is, amelyek javítják fejlesztési tapasztalatainkat

Vetur telepítése

Számos olyan szolgáltatás teszi a VS Code nagyszerű környezetet a Vue fejlesztéséhez, ide tartozik a Vetur, a Pine Wu, a Vue.js csapat egyik alapvető tagja által tervezett plugin.

Itt a VS-kódban, ha megnyitunk egy .vue fájlt, mint például a About.vue fájlt, akkor az összes szürke kódot látjuk. Ennek oka az, hogy a VS Code nem fogja automatikusan kiemelni a .vue fájlok szintaxisát.

A Vetur javíthatja ezt nekünk, és adhat nekünk más funkciókat is, amelyek célja a fejlesztői tapasztalatok javítása.

Tehát telepítsük most. Nyissa meg a bővítmények áruházát.

Ezután keressen a „Vetur” kifejezésre, válassza ki a keresési eredmények között, majd kattintson a Telepítés gombra. Ezután kattintson az Újratöltés elemre.

A Vetur jellemzői

Most, hogy a Vetur telepítve van, nézzük meg annak jellemzőit.

Szintaxis kiemelés A + P parancs és a .vue fájl nevének beírásával megnyithatjuk a About.vue fájlt. Mint láthatja, most a kódunk megfelelő szintaxis-kiemelést kap. Félelmetes - nincs több szürke kód.

Ellenőrizve a Home.vue fájlt, láthatjuk, hogy a JavaScript is helyesen van kiemelve.

Snippets Egy másik szolgáltatás, melyet Vetur a kódrészletekkel csomagolt. Ezek időmegtakarító kódrészletek, amelyek lehetővé teszik a gyakran használt kóddarabok gyors létrehozását.

Hozzunk létre egy új komponenst, hogy ez működjön. A neve EventCard.vue. Most, ha beírjuk a „állvány” szót egy .vue fájlba, és benyomjuk az ENTER billentyűt, akkor az automatikusan kitölti ezt a fájlt egyetlen fájl .vue összetevő vázával vagy állványával.

Az Emmet Vetur az Emmet csomagolását is tartalmazza. Ez egy népszerű eszköz, amely lehetővé teszi hivatkozások használatát a kód felépítéséhez.

Például beírhatjuk a h1 billentyűt és az Enter billentyűt, és ez létrehoz egy nyitó és záró h1 elemet.

Amikor valami összetettebbet írunk be, mint például div> ul> li, akkor az a következőt fogja eredményezni:

        
                
  •              

Ha úgy tűnik, hogy Emmet nem dolgozik érted, akkor ezt hozzáadhatja a felhasználói beállításokhoz:

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

Ha többet szeretne tudni arról, hogy az Emmet miként tudja felgyorsítani fejlődését, látogasson el ide.

Az ESLint & Prettier telepítése

Most meg kell győződnünk arról, hogy telepítve van az ESLint és a Prettier. A bővítmények áruházában megkeressük az ESLint fájlt, majd megyünk előre és telepítjük. És ugyanezt fogjuk csinálni Prettier esetében is. A telepítés után az újratöltést fogjuk elérni, hogy újra feltöltsük a VS kódot.

Az ESLint konfigurálása

Most, hogy ezek telepítve vannak, hozzá kell adnunk egy kis extra konfigurációt is.

Amikor a terminálról készítettük a projektet, úgy döntöttünk, hogy egy dedikált konfigurációs fájlokkal készítjük, amely megadta nekünk ezt .eslintrc.js fájlt, ahol az ESLint konfigurálható ehhez a projekthez. Ha nem választottunk volna dedikált fájlokat, akkor az ESLint konfigurációkat a package.json-ban találnánk.

Tehát a .eslintrc.js fájlban a következőket fogjuk hozzáadni:

'Plugin: szebb / ajánlott'

Ez lehetővé teszi a Prettier támogatást az ESLintben az alapértelmezett beállításokkal.

Tehát a fájl most így néz ki:

module.exports = {
      gyökér: igaz,
      env: {
        csomópont: igaz
      },
      „kiterjeszti”: [
        'Plugin: vue / lényeges',
        'plugin: szebb / ajánlott', // hozzáadtuk ezt a sort
        '@ Vue / szebb'
      ],
      szabályok: {
        'no-console': process.env.NODE_ENV === 'termelés'? 'hiba': 'ki',
        'no-debugger': process.env.NODE_ENV === 'termelés'? 'hiba': 'ki'
      },
      parserOptions: {
        elemző: 'babel-eslint'
      }
    }

A Prettier konfigurálása

Lehetőségünk van egy Prettier konfigurációs fájl létrehozására is, amelyhez speciális beállításokat adhatunk hozzá személyes stílusunk vagy csapatunk preferenciái szerint.

Itt fogjuk létrehozni és elnevezni .prettierrc.js.

És belül írjuk be:

module.exports = {
        singleQuote: igaz,
        félig: hamis
    }

Ez konvertálja a dupla idézőjelek egy idézőjelekké, és ellenőrizze, hogy a pontosvesszőket nem helyezik be automatikusan.

Felhasználói beállítások

Annak érdekében, hogy tovább javítsuk a VS-kódot a nagyszerű fejlesztési élmény érdekében, néhány konfigurációt hozzáadunk a felhasználói beállításokhoz. A Felhasználói beállítások eléréséhez kattintson a felső navigációs sávon a Kód elemre, majd a Beállítások, majd a Beállítások elemre. Ezzel megjelenik a Felhasználói beállítások ablak, ahol a json-ban megadhatja a beállításokat.

Először hozzá akarjuk adni:

"vetur.validation.template": hamis

Ez kikapcsolja a Vetur megvilágítási funkcióját. Ehelyett az ESLint + Prettier-re támaszkodunk.

Most meg szeretnénk mondani az ESLintnek, hogy milyen nyelveket akarunk érvényesíteni (vue, html és javascript), és az autoFix-et igazra állítja mindegyikön:

"eslint.validate": [
        {
            "nyelv": "vue",
            "autoFix": igaz
        },
        {
            "nyelv": "html",
            "autoFix": igaz
        },
        {
            "nyelv": "javascript",
            "autoFix": igaz
        }
    ],

Akkor jó intézkedésként megmondjuk az ESLintnek, hogy az autoFixOnSave.

"eslint.autoFixOnSave": true,

És mondja meg magának a szerkesztőnek, hogy formázza az OnSave-ot.

"editor.formatOnSave": true,

Kipróbálása

Annak kipróbálására, hogy ez működik-e, itt hozzáadunk egy adattulajdonságot az EventCard-összetevőnkhöz, és idézettel egészítjük ki: „Egyedül akarok lenni”, majd itt is pontosvesszőt dobunk be. Amikor elmentjük a mentést, idézeteink egyszeres idézetekké alakulnak, és a pontosvesszőt eltávolítják. Félelmetes - működik.

További eszközök

Vessen egy pillantást néhány további eszközre, amelyek elősegíthetik a fejlődést.

Relatív útvonal másolása A Relatív útvonal másolása egy olyan kiterjesztés, amely lehetővé teszi a fájl helyének másolását, annak a könyvtárhoz való viszonyának alapján, amelyet összekapcsol.

Keressük meg, telepítsük, majd látjuk működésben.

A Home.vue fájlban láthatjuk, hogy itt van egy relatív útvonal, ahová a HelloWorld összetevőt importáljuk.

Az importálni kívánt fájl relatív elérési útjának megszerzéséhez jobb egérgombbal kattintson a fájlra, majd válassza a Relatív út másolása lehetőséget. Most, amikor beillesztjük a másolatot, látjuk, hogy megvan a pontos relatív út. Figyelje meg ezt az src-t. Az itt található megjegyzés tudatja velünk, hogy a projekt felépítésének módja miatt a @ helyett használhatjuk.

Integrált terminál A VS Code szerkesztő kényelmes beépített tulajdonsága az integrált terminál, amelyet a különálló terminálra való átváltás helyett használhat. A billentyűparancs segítségével megnyithatja: `ctrl +` `

További részletek Ha további kényelmes kódrészleteket szeretne telepíteni, letölthet egy teljes Vue VSCode kódrészletet, amelyet a Core Vue csapat tagja, Sarah Drasner készített.

Keressük a sarah.drasner nevű kiterjesztést. Ott vannak. Most telepíthetjük és újratölthetjük.

Nézzük meg őket gyakorlatban.

Ha a vif-et egy elemre írjuk be a sablonunkban, akkor ez egy v-if utasítást fog adni, és a von gépeléssel teljes eseménykezelőt kapunk. Az adattulajdonságok manuális kitöltése helyett egyszerűen beírhatjuk a vdata-t is, amely létrehoz nekünk. Ugyanazt tehetjük, ha a vprops-szal kiegészítjük a kellékeket. Arra is felhasználhatjuk, hogy a kód létrehozásához a vimport-lib segítségével gyorsan importáljunk egy könyvtárat. Mint láthatja, ezek nagyon hasznos és időmegtakarító részletek.

Felhívjuk figyelmét, hogy ha ezt a Snippets kiterjesztést használja, akkor ajánlott egy sort felvenni a felhasználói beállításokba:

vetur.completion.useScaffoldSnippets hamisnak kell lennie

Ez biztosítja, hogy ezek a részletek ne legyenek ellentmondásban a Veturéval.

Színes témák Végül, ha kíváncsi vagy a téma megváltoztatására a VS kódban, vagy azon kíváncsi, hogy melyiket használom itt, akkor lépjen a Kód> Beállítások> Színes téma elemre.

Mint láthatja, a FlatUI Dark-ot használom. Itt módosíthatja a téma színét a fenti beállítások bármelyikére, vagy kereshet más témákat a bővítménytárban.

Ha nem látszik egyet, akkor a Visual Studio Marketplace-hez is online fordulhat. Itt megnézheti a rengeteg különféle bővítményt és témát, például barátunk, Sarah Drasner éjszakai bagolyját. Telepítheti közvetlenül a böngészőből, majd megtalálhatja a Színes téma preferenciáiban.

Folytassa a tanulást

Ha velem folytatod a tanulást, veheted át a teljes Valódi Vue tanfolyamot a VueMastery.com webhelyen.