Beste code-editor voor Vue.js

Met een groeiend aantal kwaliteitscode-editors om uit te kiezen, vraagt ​​u zich misschien af ​​wat de beste code-editor is voor Vue.js. Sommige ontwikkelaars zijn even toegewijd aan hun editors als aan hun politieke overtuigingen, dus u krijgt verschillende antwoorden, afhankelijk van wie u het vraagt.

Maar als het gaat om codering in Vue, is Evan You, de maker van Vue, een van de beste mensen om te vragen. Dus wat gebruikt hij? Visual Studio Code.

In een interview werd hem gevraagd naar het onderwerp en antwoordde hij:

… Ik schakelde heen en weer tot voor kort begon ik TypeScript te gebruiken en omdat VS Code TypeScript zo goed is, ben ik (permanent) overgeschakeld naar VS Code.

Hoewel Vue je niet verplicht om TypeScript te gebruiken, zal de broncode er binnenkort in worden geschreven, zoals we in dit bericht over Vue 3.0 hebben behandeld.

Je denkt misschien ... Maar ik werk niet aan de broncode en ik codeer Vue niet met TypeScript, is VS Code nog steeds relevant voor mij?

Dat brengt me bij het onderwerp Vetur, een extensie met veel functies die je dingen biedt zoals syntax-highlighting in .vue-bestanden, fragmenten, linting, foutcontrole en opmaak, evenals automatische aanvulling en foutopsporing. Op dit moment is het de beste Vue-extensie voor een code-editor. En dat zou ook zo moeten zijn, omdat het is ontwikkeld door Pine Wu, die lid is van het kernteam van Vue.

Dus als u geïnteresseerd bent in het gebruik van VS Code voor Vue-ontwikkeling (of dat al bent), kunt u hieronder volgen hoe ik u VS-code optimaliseer.

Wat gaan we leren?

We gaan leren hoe we:

  • Ontvang syntaxisaccentuering in onze .vue-bestanden
  • Gebruik codefragmenten voor een snellere workflow
  • Configureer onze editor om onze code automatisch te formatteren
  • En verken andere nuttige extensies die onze ontwikkelingservaring verbeteren

Vetur installeren

Er zijn verschillende functies die VS Code tot een geweldige omgeving voor Vue-ontwikkeling maken, waaronder Vetur, een plug-in ontworpen door Pine Wu, een kernlid van het Vue.js-team.

Hier in VS Code zien we al deze grijze code als we een .vue-bestand openen, zoals dit About.vue-bestand. Dat komt omdat VS Code niet automatisch de syntaxis in .vue-bestanden markeert.

Vetur kan dit voor ons oplossen en ons andere functies geven die zijn ontworpen om de ontwikkelaarservaring te verbeteren.

Laten we het nu installeren. Open de extensies store.

Zoek vervolgens naar "Vetur", selecteer het in de zoekresultaten en klik op Installeren. Klik vervolgens op Herladen.

Vetur's functies

Nu Vetur is geïnstalleerd, gaan we de functies bekijken.

Syntaxis markeren Door command + P te typen en de naam van een .vue-bestand te typen, kunnen we het bestand About.vue openen. Zoals u ziet, krijgt onze code nu de juiste syntaxisaccentuering. Geweldig - geen grijze code meer.

Als we het Home.vue-bestand controleren, kunnen we zien dat ons JavaScript ook correct wordt gemarkeerd.

Fragmenten Een andere functie Vetur wordt geleverd met zijn codefragmenten. Dit zijn tijdbesparende codefragmenten waarmee u snel veelgebruikte stukjes code kunt maken.

Laten we een nieuw onderdeel maken om dit in actie te zien. We heten EventCard.vue. Als we nu het woord "scaffold" in een .vue-bestand typen en op ENTER drukken, wordt dit bestand automatisch gevuld met het skelet of de scaffold van een enkele file .vue-component.

Emmet Vetur wordt ook verpakt met Emmet geleverd. Dit is een populaire tool waarmee je snelkoppelingen kunt gebruiken om je code op te bouwen.

We kunnen bijvoorbeeld h1 typen en op enter drukken, en dit zal een h1-element openen en sluiten.

Wanneer we iets complexers typen, zoals div> ul> li, levert dit het volgende op:

        
                
  •              

Als Emmet niet voor u lijkt te werken, kunt u dit toevoegen aan uw Gebruikersinstellingen:

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

Ga hierheen voor meer informatie over hoe Emmet uw ontwikkeling kan versnellen.

ESLint & Prettier installeren

Nu moeten we ervoor zorgen dat ESLint en Prettier zijn geïnstalleerd. In de extensiewinkel zoeken we naar ESLint en installeren het vervolgens. En we zullen hetzelfde doen voor Prettier. Nadat het is geïnstalleerd, klikken we opnieuw laden om de VS-code opnieuw te laden.

ESLint configureren

Nu deze zijn geïnstalleerd, moeten we er een beetje extra configuratie aan toevoegen.

Toen we ons project vanaf de terminal maakten, hebben we ervoor gekozen om het te maken met speciale configuratiebestanden, die ons dit .eslintrc.js-bestand gaven, waar we ESLint voor dit project kunnen configureren. Als we geen speciale bestanden hadden gekozen, zouden we de ESLint-configuraties in ons pakket.json vinden.

In ons .eslintrc.js-bestand voegen we dus toe:

'Plugin: mooier / aanbevolen'

Hiermee wordt Prettier-ondersteuning in ESLint ingeschakeld met de standaardinstellingen.

Dus ons bestand ziet er nu zo uit:

module.exports = {
      root: waar,
      env: {
        knooppunt: waar
      },
      'verlengt': [
        'Plugin: vue / essentieel',
        'plugin: mooier / aanbevolen', // we hebben deze regel toegevoegd
        '@ Vue / mooier'
      ],
      reglement: {
        'no-console': process.env.NODE_ENV === 'productie'? 'error': 'off',
        'no-debugger': process.env.NODE_ENV === 'productie'? 'error': 'off'
      },
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Prettier configureren

We hebben ook de optie om een ​​Prettier-configuratiebestand te maken, om enkele speciale instellingen toe te voegen op basis van onze persoonlijke stijl of de voorkeuren van ons team.

We maken het hier en noemen het .prettierrc.js.

En van binnen typen we:

module.exports = {
        singleQuote: waar,
        semi: fout
    }

Hiermee converteert u dubbele aanhalingstekens naar enkele aanhalingstekens en zorgt u ervoor dat puntkomma's niet automatisch worden ingevoegd.

Gebruikersinstellingen

Om de VS-code verder te optimaliseren voor een geweldige ontwikkelingservaring, voegen we enkele configuraties toe aan onze gebruikersinstellingen. Om toegang te krijgen tot Gebruikersinstellingen, klikt u op Code in de bovenste navigatiebalk, vervolgens op Voorkeuren en vervolgens op Instellingen. Dit opent een venster Gebruikersinstellingen waar u instellingen kunt toevoegen in json.

Eerst willen we toevoegen:

"vetur.validation.template": onwaar

Hiermee wordt de lintingfunctie van Vetur uitgeschakeld. We zullen in plaats daarvan vertrouwen op ESLint + Prettier.

Nu willen we ESLint vertellen welke talen we willen valideren (vue, html en javascript) en autoFix op elk instellen op true:

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

Dan zullen we ESLint voor de goede orde vertellen aan autoFixOnSave.

"eslint.autoFixOnSave": waar,

En vertel onze editor zelf om formatOnSave te formatteren.

"editor.formatOnSave": waar,

Testen

Om te testen of dit werkt, voegen we hier een gegevenseigenschap toe aan onze EventCard-component en voegen we een citaat toe: "Ik wil single zijn", dan voegen we hier ook een puntkomma toe. Wanneer we op Opslaan drukken, worden onze aanhalingstekens omgezet in enkele aanhalingstekens en wordt de puntkomma verwijderd. Geweldig - het werkt.

Aanvullende hulpmiddelen

Laten we nu eens kijken naar enkele aanvullende tools die u kunnen helpen uw ontwikkeling te versnellen.

Relatief pad kopiëren Relatief pad kopiëren is een extensie waarmee u de locatie van een bestand kunt kopiëren, op basis van de relatie tot de map waarnaar het wordt gelinkt.

Laten we ernaar zoeken, het installeren en het vervolgens in actie zien.

In ons Home.vue-bestand zien we dat hier al een relatief pad is, waar we de HelloWorld-component importeren.

Om het relatieve pad te krijgen van een bestand dat we willen importeren, klikken we met de rechtermuisknop op het bestand en selecteren we vervolgens Relatief pad kopiëren. Wanneer we nu plakken wat is gekopieerd, zien we dat we het juiste relatieve pad hebben. Let op deze src. De opmerking hier laat ons weten dat vanwege de manier waarop ons project is opgezet, we in plaats daarvan @ kunnen gebruiken.

Geïntegreerde terminal Een handige ingebouwde functie van de VS Code-editor is de geïntegreerde terminal, die u kunt gebruiken in plaats van over te schakelen naar uw afzonderlijke terminal. U kunt het openen met de sneltoets: `ctrl +` `

Meer fragmenten Als u geïnteresseerd bent in het installeren van extra handige codefragmenten, kunt u een volledige suite met Vue VSCode-fragmenten downloaden, gemaakt door Core Vue-teamlid Sarah Drasner.

Laten we zoeken naar de extensie met haar naam, sarah.drasner. Daar zijn ze. Nu kunnen we installeren en opnieuw laden.

Laten we ze eens in actie bekijken.

Als we vif typen op een element in onze sjabloon, geven we dat een v-if-instructie en als u von typt, krijgt u een volledige gebeurtenishandler. In plaats van een gegevenseigenschap handmatig uit te typen, kunnen we eenvoudig vdata typen, waardoor er een voor ons wordt gemaakt. We kunnen hetzelfde doen om rekwisieten toe te voegen met vprops. We kunnen het zelfs gebruiken om de code te maken om snel een bibliotheek te importeren, met vimport-lib. Zoals u ziet, zijn dit zeer nuttige en tijdbesparende fragmenten.

Houd er rekening mee dat als u deze extensie voor fragmenten gebruikt, het wordt aanbevolen om een ​​regel toe te voegen aan uw gebruikersinstellingen:

vetur.completion.useScaffoldSnippets moet false zijn

Dit zorgt ervoor dat deze fragmenten niet conflicteren met die van Vetur.

Kleurenthema's Tot slot, als u zich afvraagt ​​hoe u uw thema in VS Code kunt wijzigen, of als u zich afvraagt ​​welke ik hier gebruik, kunt u naar Code> Voorkeuren> Kleurenthema gaan.

Zoals je ziet, gebruik ik FlatUI Dark. U kunt uw themakleur hier in een van deze opties wijzigen of u kunt naar andere thema's zoeken in de extensiewinkel.

Als u er geen ziet die u wilt, kunt u ook online naar Visual Studio Marketplace gaan. Hier kunt u een voorbeeld van tonnen verschillende plug-ins en thema's bekijken, zoals Night Owl van onze vriendin Sarah Drasner. U kunt het rechtstreeks vanuit de browser installeren en het vervolgens in uw voorkeuren voor kleurenthema vinden.

Blijf leren

Om met mij te blijven leren, kun je de volledige Real World Vue-cursus volgen op VueMastery.com.