Miglior editor di codice per Vue.js

Con un numero crescente di editor di codici di qualità tra cui scegliere, potresti chiederti qual è il miglior editor di codice per Vue.js. Alcuni sviluppatori si impegnano tanto nei confronti dei loro redattori quanto nelle loro convinzioni politiche, quindi otterrai risposte diverse a seconda di chi chiedi.

Ma quando si tratta di scrivere codice in Vue, una delle persone migliori da chiedere è Evan You, il creatore di Vue. Quindi cosa usa? Codice di Visual Studio.

In un'intervista, gli è stato chiesto dell'argomento e ha risposto:

... Sono passato avanti e indietro fino a poco tempo fa ho iniziato a usare TypeScript e poiché VS Code TypeScript è così buono, sono passato (permanentemente) a VS Code.

Sebbene Vue non richieda l'utilizzo di TypeScript, il suo codice sorgente verrà presto scritto in esso, come descritto in questo post su Vue 3.0.

Potresti pensare ... Ma non sto lavorando sul codice sorgente e non codifico Vue con TypeScript, VS Code è ancora rilevante per me?

Questo mi porta all'argomento di Vetur, che è un'estensione ricca di funzionalità che ti offre cose come l'evidenziazione della sintassi in file .vue, frammenti, linting, controllo degli errori e formattazione, nonché il completamento automatico e il debug. A questo punto è la migliore estensione Vue per un editor di codice. E dovrebbe essere, perché è sviluppato da Pine Wu, che è un membro del core team di Vue.

Quindi, se sei interessato all'utilizzo del codice VS per lo sviluppo di Vue (o lo sei già), puoi seguire di seguito mentre ti faccio vedere come ottimizzare il codice VS.

Cosa impareremo?

Impareremo come:

  • Ottieni l'evidenziazione della sintassi nei nostri file .vue
  • Utilizza frammenti di codice per un flusso di lavoro più veloce
  • Configura il nostro editor per formattare automaticamente il nostro codice
  • Ed esplora altre utili estensioni che miglioreranno la nostra esperienza di sviluppo

Installazione di Vetur

Esistono diverse funzionalità che rendono VS Code un ottimo ambiente per lo sviluppo di Vue, tra cui Vetur, un plug-in progettato da Pine Wu, un membro chiave del team Vue.js.

Qui in VS Code, se apriamo un file .vue, come questo file About.vue, vediamo tutto questo codice grigio. Questo perché VS Code non evidenzierà automaticamente la sintassi nei file .vue.

Vetur può risolvere questo problema per noi e darci altre funzionalità progettate per migliorare l'esperienza degli sviluppatori.

Quindi installiamolo ora. Apri il negozio delle estensioni.

Quindi cercare "Vetur", selezionarlo nei risultati della ricerca e fare clic su Installa. Quindi fare clic su Ricarica.

Caratteristiche di Vetur

Ora che Vetur è installato, diamo un'occhiata alle sue funzionalità.

Evidenziazione della sintassi Digitando command + P e digitando il nome di un file .vue, è possibile aprire il file About.vue. Come puoi vedere, ora il nostro codice sta ottenendo l'evidenziazione della sintassi corretta. Fantastico - niente più codice grigio.

Controllando il file Home.vue, possiamo vedere che anche il nostro JavaScript è stato evidenziato correttamente.

Snippet Un'altra caratteristica di Vetur viene fornita con i suoi frammenti di codice. Si tratta di "frammenti" di tempo che consentono di creare rapidamente blocchi di codice comunemente utilizzati.

Creiamo un nuovo componente per vederlo in azione. Il nostro nome è EventCard.vue. Ora, se digitiamo la parola "scaffold" in un file .vue e premiamo INVIO, questo riempirà automaticamente quel file con lo scheletro, o scaffold, di un singolo componente .vue di file.

Emmet Vetur viene anche confezionato con Emmet. Questo è uno strumento popolare che ti consente di utilizzare le scorciatoie per costruire il tuo codice.

Ad esempio, possiamo digitare h1 e premere invio, e questo creerà un elemento h1 di apertura e chiusura.

Quando digitiamo qualcosa di più complesso, come div> ul> li, produrrà:

        
                
  •              

Se Emmet non sembra funzionare per te, puoi aggiungerlo alle tue Impostazioni utente:

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

Per ulteriori informazioni su come Emmet può accelerare il tuo sviluppo, vai qui.

Installazione di ESLint & Prettier

Ora, dobbiamo assicurarci di aver installato ESLint e Prettier. Nel negozio di estensioni, faremo una ricerca per ESLint, quindi andiamo avanti e installarlo. E faremo lo stesso per Prettier. Una volta installato, faremo clic su Ricarica per ricaricare il codice VS.

Configurazione di ESLint

Ora che sono installati, dobbiamo aggiungere un po 'di configurazione extra a loro.

Quando abbiamo creato il nostro progetto dal terminale, abbiamo scelto di crearlo con file di configurazione dedicati, che ci hanno fornito questo file .eslintrc.js, dove possiamo configurare ESLint per questo progetto. Se non avessimo scelto file dedicati, troveremmo le configurazioni ESLint all'interno del nostro pacchetto.json.

Quindi, nel nostro file .eslintrc.js, aggiungeremo:

'Plugin: più bella / raccomandato'

Ciò consentirà il supporto Prettier in ESLint con le impostazioni predefinite.

Quindi il nostro file ora appare così:

module.exports = {
      root: true,
      env: {
        nodo: vero
      },
      "estende": [
        'Plugin: vue / essenziale',
        'plugin: più bello / raccomandato', // abbiamo aggiunto questa riga
        '@ Vue / più bella'
      ],
      regole: {
        'no-console': process.env.NODE_ENV === 'produzione'? 'errore': 'off',
        'no-debugger': process.env.NODE_ENV === 'produzione'? 'errore': 'off'
      },
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Configurazione di Prettier

Abbiamo anche la possibilità di creare un file di configurazione Prettier, per aggiungere alcune impostazioni speciali in base al nostro stile personale o alle preferenze del nostro team.

Lo creeremo qui e lo chiameremo .prettierrc.js.

E dentro, digiteremo:

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

Ciò convertirà le doppie virgolette in virgolette singole e si assicurerà che i punti e virgola non vengano inseriti automaticamente.

Impostazioni utente

Al fine di ottimizzare ulteriormente il codice VS per un'esperienza di sviluppo eccezionale, aggiungeremo alcune configurazioni alle nostre Impostazioni utente. Per accedere alle Impostazioni utente, fai clic su Codice nella barra di navigazione in alto, quindi su Preferenze, quindi su Impostazioni. Verrà visualizzata una finestra Impostazioni utente in cui è possibile aggiungere impostazioni in json.

Innanzitutto, vogliamo aggiungere:

"vetur.validation.template": false

Ciò disattiverà la funzione di lanugine di Vetur. Faremo affidamento invece su ESLint + Prettier.

Ora vogliamo dire a ESLint quali lingue vogliamo convalidare (vue, html e javascript) e impostare autoFix su true su ciascuna:

"eslint.validate": [
        {
            "lingua": "vue",
            "autoFix": vero
        },
        {
            "lingua": "html",
            "autoFix": vero
        },
        {
            "lingua": "javascript",
            "autoFix": vero
        }
    ],

Quindi, per buona misura, diremo a ESLint di autoFixOnSave.

"eslint.autoFixOnSave": true,

E dì al nostro editor stesso di formattare OnSave.

"editor.formatOnSave": true,

Provandolo

Per verificare che funzioni, aggiungeremo una proprietà data al nostro componente EventCard qui e aggiungere un preventivo: "Voglio essere single", quindi inseriremo anche un punto e virgola. Quando facciamo clic su Salva, le nostre virgolette vengono convertite in virgolette singole e il punto e virgola viene rimosso. Fantastico - funziona.

Strumenti aggiuntivi

Ora diamo un'occhiata ad alcuni strumenti aggiuntivi che possono aiutarti ad accelerare il tuo sviluppo.

Copia percorso relativo Copia percorso relativo è un'estensione che consente di copiare la posizione in cui si trova un file, in base alla sua relazione con la directory a cui è collegato.

Cerchiamo, installarlo, quindi vederlo in azione.

Nel nostro file Home.vue, vediamo già un percorso relativo qui, in cui stiamo importando il componente HelloWorld.

Per ottenere il percorso relativo di un file che vogliamo importare, fare clic con il pulsante destro del mouse sul file, quindi selezionare Copia percorso relativo. Ora, quando incolliamo ciò che è stato copiato, vediamo che abbiamo il percorso relativo accurato. Notare questo src. Il commento qui ci fa sapere che a causa del modo in cui il nostro progetto è impostato, possiamo usare @ invece.

Terminale integrato Una comoda funzione integrata dell'editor VS Code è il suo terminale integrato, che è possibile utilizzare invece di passare al terminale separato. Puoi aprirlo, con la scorciatoia da tastiera: `ctrl +` `

Altri frammenti Se sei interessato all'installazione di alcuni utili frammenti di codice, puoi scaricare una suite completa di frammenti Vue VSCode, creata dal membro del team Core Vue Sarah Drasner.

Cerchiamo l'estensione con il suo nome, sarah.drasner. Sono là. Ora possiamo installare e ricaricare.

Diamo un'occhiata a loro in azione.

Se digitiamo vif su un elemento nel nostro modello, ciò ci darà un'istruzione v-if e la digitazione di von ci darà un gestore di eventi completo. Invece di digitare manualmente una proprietà di dati, possiamo semplicemente digitare vdata che ne creerà una per noi. Possiamo fare la stessa cosa per aggiungere oggetti di scena con vprops. Possiamo persino usarlo per creare il codice per importare rapidamente un libary, con vimport-lib. Come puoi vedere, questi sono frammenti molto utili e che fanno risparmiare tempo.

Tieni presente che se stai utilizzando questa estensione Snippet, si consiglia di aggiungere una linea alle Impostazioni utente:

vetur.completion.useScaffoldSnippet dovrebbe essere falso

Ciò assicurerà che questi frammenti non siano in conflitto con quelli di Vetur.

Temi di colore Infine, se ti stai chiedendo come cambiare il tema in VS Code o se ti stai chiedendo quale sto usando qui, puoi andare su Codice> Preferenze> Tema colore.

Come puoi vedere, sto usando FlatUI Dark. Puoi cambiare il colore del tuo tema con una di queste opzioni qui, oppure puoi cercare altri temi nel negozio delle estensioni.

Se non vedi quello che desideri, puoi anche andare al mercato di Visual Studio online. Qui puoi visualizzare in anteprima tonnellate di plugin e temi diversi, come Night Owl della nostra amica Sarah Drasner. È possibile installarlo direttamente dal browser, quindi trovarlo nelle Preferenze del tema Colore.

Continua l'apprendimento

Per continuare ad imparare con me, puoi seguire il corso completo su Real World Vue, su VueMastery.com.