Cel mai bun editor de coduri pentru Vue.js

Cu un număr din ce în ce mai mare de editori de cod de calitate din care să aleagă, s-ar putea să te întrebi care este cel mai bun editor de coduri pentru Vue.js. Unii dezvoltatori sunt la fel de dedicați redactorilor lor, precum și credințelor lor politice, așa că veți primi răspunsuri diferite în funcție de cine întrebați.

Dar când vine vorba de codificarea în Vue, unul dintre cei mai buni oameni de întrebat este Evan Tu, creatorul Vue. Ce folosește el? Cod Studio vizual.

Într-un interviu, a fost întrebat despre subiect, iar el a răspuns:

... Am trecut înainte și înapoi până de curând am început să folosesc TypeScript și pentru că VS Code TypeScript este atât de bun, am trecut (permanent) la VS Code.

Deși Vue nu vă solicită să utilizați TypeScript, codul sursă va fi scris în curând în el, așa cum am inclus în această postare în Vue 3.0.

S-ar putea să vă gândiți ... Dar nu lucrez la codul sursă și nu codez Vue cu TypeScript, este încă VS Cod relevant pentru mine?

Asta mă aduce la subiectul Vetur, care este o extensie bogată în caracteristici, care vă oferă chestii precum evidențierea sintaxei în fișiere .vue, fragmente, linting, verificarea erorilor și formatarea, precum și completarea automată și depanarea. În acest moment, este cea mai bună extensie Vue pentru un editor de coduri. Și ar trebui să fie, pentru că este dezvoltat de Pine Wu, care este membru al echipei de bază a Vue.

Așadar, dacă sunteți interesat să utilizați VS Code pentru dezvoltarea Vue (sau deja sunt), puteți urma mai jos, deoarece vă arăt cum să optimizați VS Code.

Ce vom învăța?

Vom învăța cum să:

  • Obțineți evidențierea de sintaxă în fișierele noastre .vue
  • Utilizați fragmente de cod pentru un flux de lucru mai rapid
  • Configurați editorul nostru pentru a-și formata automat codul
  • Și explorează alte extensii utile care ne vor îmbunătăți experiența de dezvoltare

Instalarea Vetur

Există mai multe caracteristici care fac din VS Code un mediu excelent pentru dezvoltarea Vue, inclusiv Vetur, un plugin proiectat de Pine Wu, un membru de bază al echipei Vue.js.

Aici, în VS Code, dacă deschidem un fișier .vue, cum ar fi acest fișier About.vue, vedem tot acest cod gri. Acest lucru se datorează faptului că VS Code nu va evidenția automat sintaxa în fișierele .vue.

Vetur poate rezolva acest lucru pentru noi și ne poate oferi alte funcții concepute pentru a îmbunătăți experiența dezvoltatorului.

Așadar, să-l instalăm acum. Deschideți magazinul de extensii.

Apoi căutați „Vetur”, selectați-l în rezultatele căutării și faceți clic pe Instalare. Apoi faceți clic pe Reîncărcare.

Caracteristicile Vetur

Acum că Vetur este instalat, să aruncăm o privire asupra caracteristicilor sale.

Evidențierea sintaxei Tastați comanda + P și tastând numele unui fișier .vue, putem deschide fișierul About.vue. După cum vedeți, acum codul nostru obține evidențierea sintaxei adecvate. Grozav - nu mai există cod gri.

Verificând fișierul Home.vue, putem vedea că JavaScript este evidențiat corect.

Snippets O altă caracteristică Vetur vine la pachet cu fragmentele de cod. Acestea sunt „fragmente” de cod care economisesc timp care vă permit să creați rapid bucăți de cod utilizate frecvent.

Să creăm o componentă nouă pentru a vedea acest lucru în acțiune. Vom numi EventCard.vue. Acum, dacă tastăm cuvântul "schela" într-un fișier .vue și apăsăm ENTER, acesta va umple automat acel fișier cu scheletul, sau schela, a unui singur fișier .vue component.

Emmet Vetur vine și la pachet cu Emmet. Acesta este un instrument popular care vă permite să utilizați comenzi rapide pentru a vă crea codul.

De exemplu, putem tasta h1 și atinge enter, iar acest lucru va crea un element h1 de deschidere și închidere.

Când tipăm ceva mai complex, cum ar fi div> ul> li, acesta va produce:

        
                
  •              

Dacă Emmet nu pare să funcționeze pentru dvs., puteți adăuga acest lucru la Setările utilizatorului:

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

Pentru a afla mai multe despre modul în care Emmet îți poate grăbi dezvoltarea, mergi aici.

Instalarea ESLint & Prettier

Acum, trebuie să ne asigurăm că avem instalate ESLint și Prettier. În magazinul de extensii, vom face o căutare pentru ESLint, apoi vom merge mai departe și o vom instala. Și vom face același lucru pentru Prettier. După instalare, vom reîncărca reîncărcarea codului VS.

Configurarea ESLint

Acum că acestea sunt instalate, trebuie să le adăugăm un pic de configurare suplimentară.

Când am creat proiectul nostru de la terminal, am ales să-l creăm cu fișiere de configurare dedicate, care ne-au oferit acest fișier .eslintrc.js, unde putem configura ESLint pentru acest proiect. Dacă nu am fi ales fișierele dedicate, vom găsi configurațiile ESLint în pachetul nostru.json.

Deci, în fișierul nostru .eslintrc.js, vom adăuga:

'Plugin: mai frumos / recomandat'

Acest lucru va permite Prettier suport în ESLint cu setările implicite.

Deci, fișierul nostru arată acum așa:

module.exports = {
      rădăcină: adevărat,
      env: {
        nod: adevărat
      },
      „se extinde”: [
        'Plugin: Vue / esențială',
        'plugin: beautifuler lovely / recomandat', // Am adăugat această linie
        '@ Vue / mai frumos'
      ],
      reguli: {
        'fără consolă': process.env.NODE_ENV === 'producție'? 'eroare': 'oprit',
        'no-debugger': process.env.NODE_ENV === 'producție'? 'eroare': 'oprit'
      },
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Configurarea Prettier

Avem de asemenea opțiunea de a crea un fișier de configurare Prettier, de a adăuga câteva setări speciale în funcție de stilul personal sau de preferințele echipei noastre.

Îl vom crea aici și îl vom numi .prettierrc.js.

În interior, vom scrie:

module.exports = {
        singleQuote: adevărat,
        semi: fals
    }

Aceasta va converti ghilimele duble în ghilimele unice și vă asigurați că punctele și virgulele nu sunt inserate automat.

Setarile utilizatorului

Pentru a optimiza și mai mult Codul VS pentru o experiență de dezvoltare excelentă, vom adăuga câteva configurații la Setările utilizatorului nostru. Pentru a accesa Setările utilizatorului, faceți clic pe Cod în bara de navigare de sus, apoi Preferințe, apoi Setări. Aceasta va afișa o fereastră Setări utilizator în care puteți adăuga setări în json.

În primul rând, dorim să adăugăm:

"vetur.validation.template": fals

Aceasta va dezactiva funcția de liniere a Vetur. Ne vom baza în schimb pe ESLint + Prettier.

Acum vrem să spunem ESLint în ce limbi dorim ca acesta să fie validat (vue, html și javascript) și să setați AutoFix la true pe fiecare:

"eslint.validate": [
        {
            "limbă": "vue",
            "autoFix": adevărat
        },
        {
            "limbă": "html",
            "autoFix": adevărat
        },
        {
            "limbă": "javascript",
            "autoFix": adevărat
        }
    ],

Apoi, pentru o măsură bună, îi vom spune ESLint să autoFixOnSave.

"eslint.autoFixOnSave": adevărat,

Și spuneți editorului nostru însuși la formatOnSave.

"editor.formatOnSave": adevărat,

Testând-o

Pentru a testa dacă acesta funcționează, vom adăuga aici o proprietate de date la componenta noastră EventCard și vom adăuga un citat: „Vreau să fiu singur”, atunci vom arunca și un punct și virgulă. Când atingem salvare, ofertele noastre sunt convertite în ghilimele unice și punctul și virgula este eliminat. Minunat - funcționează.

Instrumente adiționale

Acum aruncăm o privire asupra unor instrumente suplimentare care vă pot ajuta să vă accelerați dezvoltarea.

Copiere cale relativă Copiere cale relativă este o extensie care vă permite să copiați locația pe care un fișier trăiește, pe baza relației sale cu directorul la care se leagă.

Să o căutăm, să o instalăm, apoi să o vedem în acțiune.

În fișierul nostru Home.vue, vedem deja o cale relativă aici, în care importăm componenta HelloWorld.

Pentru a obține calea relativă a unui fișier pe care dorim să-l importăm, am dat clic dreapta pe fișier, apoi selectăm Copiere cale relativă. Acum, când lipim ceea ce a fost copiat, vedem că avem calea relativă exactă. Observați acest src. Comentariul de aici ne anunță că datorită modului în care este înființat proiectul nostru, putem utiliza @ în schimb.

Terminal integrat O caracteristică comodă integrată a editorului de cod VS este terminalul integrat, pe care îl puteți utiliza în loc să treceți la terminalul dvs. separat. Îl puteți deschide cu ajutorul tastaturii rapide: `ctrl +` `

Mai multe fragmente Dacă sunteți interesat să instalați câteva fragmente de cod suplimentare convenabile, puteți descărca o suită completă de fragmente Vue VSCode, create de membrul echipei Core Vue, Sarah Drasner.

Să căutăm extensia cu numele ei, sarah.drasner. Acolo sunt ei. Acum putem instala și reîncărca.

Să aruncăm o privire asupra lor în acțiune.

Dacă tastăm vif pe un element din șablonul nostru, aceasta ne va oferi o instrucțiune v-if, iar tastarea von ne va oferi un manager complet pentru evenimente. În loc să tastați manual o proprietate de date, putem introduce pur și simplu vdata care va crea una pentru noi. Putem face același lucru pentru a adăuga recuzită cu vprops. Îl putem folosi chiar pentru a crea codul pentru a importa rapid un libary, cu vimport-lib. După cum puteți vedea, acestea sunt fragmente foarte utile și care economisesc timp.

Rețineți că, dacă utilizați această extensie Snippets, este recomandat să adăugați o linie la Setările dvs. de utilizator:

vetur.completion.useScaffoldSnippets ar trebui să fie false

Acest lucru vă va asigura că aceste fragmente nu intră în conflict cu Vetur.

Teme de culoare În sfârșit, dacă vă întrebați cum să schimbați tema în Codul VS sau dacă vă întrebați pe care o folosesc aici, puteți accesa Codul> Preferințe> Tema de culoare.

După cum vedeți, folosesc FlatUI Dark. Puteți schimba culoarea temei la oricare dintre aceste opțiuni aici sau puteți căuta alte teme în magazinul de extensii.

Dacă nu vedeți unul pe care îl doriți, puteți, de asemenea, să vă orientați către Visual Studio Marketplace online. Aici, puteți previzualiza tone de pluginuri și teme diferite, cum ar fi Night Owl de prietena noastră Sarah Drasner. Puteți să-l instalați direct din browser, apoi îl puteți găsi în Preferințele dvs. pentru teme de culoare.

Continuați învățarea

Pentru a continua să înveți cu mine, poți urma cursul complet pe Real World Vue, pe VueMastery.com.