Nejlepší editor kódu pro Vue.js

S rostoucím počtem kvalitních editorů kódů, z nichž si můžete vybrat, byste se mohli ptát, jaký je nejlepší editor kódu pro Vue.js. Někteří vývojáři jsou stejně oddaní svým editorům, jako jsou jejich politické přesvědčení, takže dostanete různé odpovědi podle toho, koho se zeptáte.

Ale co se týče kódování ve Vue, jedním z nejlepších lidí, kterého se zeptat, je Evan You, tvůrce Vue. Co tedy používá? Kód Visual Studio.

V rozhovoru byl dotázán na toto téma a odpověděl:

… Přepínal jsem sem a tam až do nedávné doby, kdy jsem začal používat TypeScript, a protože VS Code TypeScript je tak dobrý, přepnul jsem (trvale) na VS kód.

Zatímco Vue nevyžaduje, abyste používali TypeScript, jeho zdrojový kód bude brzy zapsán, jak jsme se zabývali tímto příspěvkem na Vue 3.0.

Možná si myslíte ... Ale na zdrojovém kódu nepracuji a nemám kód Vue s TypeScript, je pro mě VS kód stále relevantní?

To mě přivádí k tématu Vetur, což je rozšíření bohaté na funkce, které vám dává věci jako zvýraznění syntaxe v souborech .vue, úryvky, obložení, kontrola chyb a formátování, jakož i automatické dokončení a ladění. V tomto okamžiku je to nejlepší Vue rozšíření pro editor kódu. A mělo by to tak být, protože je vyvíjen Pine Wu, který je členem základního týmu Vue.

Takže pokud máte zájem o použití VS kódu pro vývoj Vue (nebo již jsou), můžete sledovat níže, jak vám ukážu, jak optimalizovat VS kód.

Co se budeme učit?

Budeme se učit, jak:

  • Získejte zvýraznění syntaxe v našich souborech .vue
  • Využijte fragmenty kódu pro rychlejší pracovní postup
  • Nakonfigurujte náš editor tak, aby automaticky formátoval náš kód
  • A prozkoumejte další užitečná rozšíření, která zlepší náš vývojový zážitek

Instalace Vetur

Existuje několik funkcí, díky nimž je VS Code skvělým prostředím pro vývoj Vue, včetně Vetur, pluginu navrženého Pine Wu, klíčovým členem týmu Vue.js.

Zde v VS kódu, pokud otevřeme soubor .vue, jako je tento soubor About.vue, vidíme celý tento šedý kód. Je to proto, že kód VS automaticky nezvýrazní syntaxi v souborech .vue.

Společnost Vetur nám to může napravit a poskytnout nám další funkce navržené ke zlepšení prostředí pro vývojáře.

Pojďme tedy nainstalovat hned. Otevřete obchod s rozšířeními.

Poté vyhledejte výraz „Vetur“, vyberte jej ve výsledcích vyhledávání a klikněte na Instalovat. Poté klikněte na Znovu načíst.

Veturovy funkce

Nyní, když je nainstalován Vetur, pojďme se podívat na jeho funkce.

Zvýraznění syntaxe Zadáním příkazu + P a zadáním názvu souboru .vue můžeme otevřít soubor About.vue. Jak vidíte, náš kód nyní zvýrazňuje správnou syntaxi. Úžasné - již žádný šedý kód.

Při kontrole souboru Home.vue vidíme, že náš JavaScript je také správně zvýrazněn.

Úryvky Další funkce, kterou Vetur přichází s úryvky kódu. Jedná se o časově úsporné „úryvky“ kódu, které vám umožňují rychle vytvářet běžně používané kousky kódu.

Vytvořme novou součást, abychom to viděli v akci. Jmenujeme se EventCard.vue. Nyní, když napíšeme slovo „scaffold“ do souboru .vue a stiskneme ENTER, bude tento soubor automaticky vyplněn kostrou nebo lešením jedné komponenty .vue souboru.

Emmet Vetur je také dodáván s Emmetem. Toto je populární nástroj, který vám umožní použít zkratky k sestavení kódu.

Například můžeme napsat h1 a stisknout enter, čímž se vytvoří prvek otevírání a zavírání h1.

Když zadáme něco složitějšího, například div> ul> li, vytvoří:

        
                
  •         
    

Pokud se vám zdá, že Emmet nefunguje, můžete to přidat do svého uživatelského nastavení:

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

Další informace o tom, jak může Emmet urychlit váš vývoj, najdete zde.

Instalace ESLint & Prettier

Nyní se musíme ujistit, že máme nainstalované ESLint a Prettier. V obchodě s rozšířeními provedeme vyhledávání produktu ESLint, poté to provedeme a nainstalujeme. A uděláme to samé pro Prettiera. Jakmile je nainstalován, zasáhneme znovu načíst VS kód.

Konfigurace ESLint

Nyní, když jsou tyto nainstalovány, musíme do nich přidat trochu další konfigurace.

Když jsme vytvořili náš projekt z terminálu, rozhodli jsme se jej vytvořit pomocí vyhrazených konfiguračních souborů, což nám poskytlo tento soubor .eslintrc.js, kde můžeme pro tento projekt nakonfigurovat ESLint. Pokud bychom nevybrali vyhrazené soubory, našli bychom konfigurace ESLint v našem balíčku.json.

Do našeho souboru .eslintrc.js tedy přidáme:

'plugin: hezčí / doporučeno'

Toto povolí Prettierovu podporu v ESLint s výchozím nastavením.

Takže náš soubor nyní vypadá takto:

module.exports = {
      root: true,
      env: {
        uzel: true
      },
      'rozšiřuje': [
        'plugin: vue / essential',
        'plugin: hezčí / doporučeno', // přidali jsme tento řádek
        '@ vue / hezčí'
      ],
      pravidla: {
        'no-console': process.env.NODE_ENV === 'production'? 'error': 'off',
        'no-debugger': process.env.NODE_ENV === 'production'? 'error': 'off'
      },
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Konfigurace hezčího

Máme také možnost vytvořit hezčí konfigurační soubor, přidat některá speciální nastavení podle našeho osobního stylu nebo preferencí našeho týmu.

Vytvoříme to zde a pojmenujeme ho .prettierrc.js.

A uvnitř napíšeme:

module.exports = {
        singleQuote: true,
        semi: false
    }

Tím se převede dvojité uvozovky na jednoduché uvozovky a ujistěte se, že středníky nejsou automaticky vloženy.

Uživatelské nastavení

Abychom ještě více optimalizovali kód VS pro skvělý vývojový zážitek, přidáme do našeho uživatelského nastavení některé konfigurace. Chcete-li získat přístup k uživatelským nastavením, klikněte na Kód v horním navigačním panelu, poté na Předvolby a poté na Nastavení. Otevře se okno Uživatelská nastavení, kde můžete přidat nastavení do json.

Nejprve chceme přidat:

"vetur.validation.template": false

Tím se vypne obložení Veturu. Místo toho se budeme spoléhat na ESLint + Prettier.

Nyní chceme říct ESLint, jaké jazyky chceme ověřit (vue, html a javascript) a nastavit autoFix na true v každém:

"eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        }
    ],

Potom pro jistotu řekneme ESLint, aby autoFixOnSave.

"eslint.autoFixOnSave": true,

A řekněte našemu editoru, aby formatOnSave.

"editor.formatOnSave": true,

Testování to

Abychom otestovali, že to funguje, přidáme do naší komponenty EventCard datovou vlastnost a přidáme citaci: „Chci být samostatný“, pak zde hodíme také středník. Když stiskneme tlačítko save, naše nabídky se převedou na jednoduché nabídky a středník se odstraní. Úžasné - funguje to.

Další nástroje

Nyní se podívejme na některé další nástroje, které mohou pomoci urychlit váš vývoj.

Kopírovat relativní cestu Kopírovat relativní cestu je přípona, která umožňuje zkopírovat umístění, ve kterém soubor žije, na základě jeho vztahu k adresáři, ke kterému je propojen.

Pojďme to hledat, nainstalovat a pak vidět v akci.

V našem souboru Home.vue již vidíme relativní cestu, kam importujeme komponentu HelloWorld.

Abychom získali relativní cestu k souboru, který chceme importovat, klikněte pravým tlačítkem myši na soubor a poté vyberte Kopírovat relativní cestu. Nyní, když vložíme to, co bylo zkopírováno, vidíme, že máme přesnou relativní cestu. Všimněte si této src. Tento komentář nám ​​dává vědět, že vzhledem ke způsobu, jakým je náš projekt nastaven, můžeme místo toho použít @.

Integrovaný terminál Výhodnou vestavěnou funkcí editoru VS Code je integrovaný terminál, který můžete použít místo přepnutí na samostatný terminál. Můžete jej otevřít pomocí klávesové zkratky: `ctrl +` `

Více úryvků Pokud máte zájem nainstalovat další užitečné úryvky kódu, můžete si stáhnout celou sadu úryvků Vue VSCode, které vytvořila členka týmu Core Vue Sarah Drasner.

Hledáme rozšíření s jejím jménem, ​​sarah.drasner. Tam jsou. Nyní můžeme nainstalovat a znovu načíst.

Pojďme se na ně podívat v akci.

Pokud do elementu v naší šabloně napíšeme vif, dá nám to prohlášení v-if a psaní von nám poskytne plnou obsluhu událostí. Místo ručního zadávání datové vlastnosti můžeme jednoduše napsat vdata, která pro nás vytvoří jednu. Můžeme udělat totéž, když přidáme rekvizity s vpropy. Můžeme jej dokonce použít k vytvoření kódu pro rychlý import libary pomocí vimport-lib. Jak vidíte, jedná se o velmi užitečné a časově úsporné úryvky.

Upozorňujeme, že pokud používáte toto rozšíření Snippets, doporučujeme přidat do uživatelského nastavení řádek:

vetur.completion.useScaffoldSnippets by měl být nepravdivý

Tím zajistíte, že tyto úryvky nebudou v konfliktu s Veturem.

Barevné motivy Nakonec, pokud přemýšlíte, jak změnit téma v VS kódu, nebo pokud přemýšlíte, které z nich zde používám, můžete přejít do části Kód> Předvolby> Barevné téma.

Jak vidíte, používám FlatUI Dark. Zde můžete změnit barvu motivu na kteroukoli z těchto možností, nebo můžete hledat další motivy v úložišti rozšíření.

Pokud nevidíte, co chcete, můžete se také vydat na Visual Studio Marketplace online. Zde si můžete prohlédnout spoustu různých pluginů a témat, jako je například Night Owl od našeho přítele Sarah Drasner. Můžete jej nainstalovat přímo z prohlížeče a poté jej najít v předvolbách Color Theme.

Pokračujte v učení

Chcete-li se mnou učit, můžete se zúčastnit celého kurzu Real World Vue na VueMastery.com.