Bester Code-Editor für Vue.js

Angesichts der wachsenden Anzahl von Qualitätscode-Editoren, aus denen Sie auswählen können, fragen Sie sich möglicherweise, welcher der besten Code-Editor für Vue.js ist. Einige Entwickler fühlen sich ihren Redakteuren ebenso verpflichtet wie ihren politischen Überzeugungen. Je nachdem, wen Sie fragen, erhalten Sie unterschiedliche Antworten.

Wenn es jedoch um das Codieren in Vue geht, ist Evan You, der Schöpfer von Vue, einer der besten Befragten. Also, was benutzt er? Visual Studio-Code.

In einem Interview wurde er zu dem Thema befragt und er antwortete:

… Ich habe bis vor kurzem mit TypeScript hin und her gewechselt, und weil VS Code TypeScript so gut ist, habe ich (dauerhaft) auf VS Code gewechselt.

In Vue ist keine Verwendung von TypeScript erforderlich, der Quellcode wird jedoch bald darin geschrieben, wie wir in diesem Beitrag zu Vue 3.0 beschrieben haben.

Sie denken vielleicht ... Aber ich arbeite nicht am Quellcode und ich codiere Vue nicht mit TypeScript. Ist VS-Code für mich immer noch relevant?

Das bringt mich zum Thema Vetur, einer funktionsreichen Erweiterung, mit der Sie Syntax-Hervorhebungen in .vue-Dateien, Snippets, Flusen, Fehlerprüfungen und Formatierungen sowie automatische Vervollständigung und Fehlerbehebung vornehmen können. Derzeit ist dies die beste Vue-Erweiterung für einen Code-Editor. Und das sollte es auch sein, denn es wurde von Pine Wu entwickelt, der Mitglied des Vue-Kernteams ist.

Wenn Sie also an der Entwicklung von VS Code for Vue interessiert sind (oder dies bereits tun), können Sie die folgenden Schritte ausführen, um VS Code zu optimieren.

Was werden wir lernen?

Wir werden lernen, wie man:

  • Holen Sie sich die Syntax-Hervorhebung in unseren .vue-Dateien
  • Verwenden Sie Code-Snippets für einen schnelleren Workflow
  • Konfigurieren Sie unseren Editor so, dass er unseren Code automatisch formatiert
  • Entdecken Sie auch andere hilfreiche Erweiterungen, die unsere Entwicklungserfahrung verbessern

Vetur installieren

Es gibt mehrere Funktionen, die VS Code zu einer großartigen Umgebung für die Vue-Entwicklung machen, darunter Vetur, ein Plugin, das von Pine Wu, einem Kernmitglied des Vue.js-Teams, entwickelt wurde.

Wenn wir hier im VS-Code eine .vue-Datei wie diese About.vue-Datei öffnen, sehen wir den gesamten grauen Code. Dies liegt daran, dass VS Code die Syntax in .vue-Dateien nicht automatisch hervorhebt.

Vetur kann dies für uns beheben und uns weitere Funktionen zur Verbesserung der Entwicklererfahrung zur Verfügung stellen.

Installieren wir es jetzt. Öffnen Sie den Erweiterungsspeicher.

Suchen Sie dann nach "Vetur", wählen Sie es in den Suchergebnissen aus und klicken Sie auf "Installieren". Klicken Sie dann auf Neu laden.

Eigenschaften von Vetur

Nachdem Vetur installiert ist, werfen wir einen Blick auf seine Funktionen.

Syntaxhervorhebung Durch Eingabe von Befehl + P und Eingabe des Namens einer .vue-Datei können wir die About.vue-Datei öffnen. Wie Sie sehen können, erhält unser Code jetzt eine korrekte Hervorhebung der Syntax. Genial - kein Gray-Code mehr.

Wenn wir die Home.vue-Datei überprüfen, können wir feststellen, dass unser JavaScript auch korrekt hervorgehoben wird.

Snippets Ein weiteres Feature, das Vetur zusammen mit seinen Code-Snippets liefert. Hierbei handelt es sich um zeitsparende Codeausschnitte, mit denen Sie schnell häufig verwendete Codestücke erstellen können.

Erstellen wir eine neue Komponente, um dies in Aktion zu sehen. Wir heißen EventCard.vue. Wenn wir nun das Wort "scaffold" in eine VUE-Datei eingeben und die EINGABETASTE drücken, wird diese Datei automatisch mit dem Gerüst oder Gerüst einer einzelnen VUE-Dateikomponente gefüllt.

Emmet Vetur wird auch mit Emmet geliefert. Dies ist ein beliebtes Tool, mit dem Sie Verknüpfungen verwenden können, um Ihren Code zu erstellen.

Zum Beispiel können wir h1 eingeben und die Eingabetaste drücken. Dadurch wird ein öffnendes und schließendes h1-Element erstellt.

Wenn wir etwas Komplexeres wie div> ul> li eingeben, wird Folgendes erzeugt:

        
                
  •              

Wenn Emmet anscheinend nicht für Sie funktioniert, können Sie dies zu Ihren Benutzereinstellungen hinzufügen:

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

Um mehr darüber zu erfahren, wie Emmet Ihre Entwicklung beschleunigen kann, klicken Sie hier.

ESLint & Prettier installieren

Jetzt müssen wir sicherstellen, dass ESLint und Prettier installiert sind. Im Erweiterungsspeicher führen wir eine Suche nach ESLint durch und installieren es dann. Und das Gleiche machen wir für Prettier. Sobald es installiert ist, klicken Sie auf "Neu laden", um VS Code neu zu laden.

ESLint konfigurieren

Nachdem diese installiert sind, müssen wir ihnen eine zusätzliche Konfiguration hinzufügen.

Als wir unser Projekt vom Terminal aus erstellten, entschieden wir uns, es mit dedizierten Konfigurationsdateien zu erstellen, die uns diese .eslintrc.js-Datei gaben, in der wir ESLint für dieses Projekt konfigurieren können. Hätten wir keine dedizierten Dateien ausgewählt, würden wir die ESLint-Konfigurationen in unserer package.json finden.

Daher fügen wir in unserer .eslintrc.js-Datei Folgendes hinzu:

'Plugin: hübscher / empfohlen'

Dadurch wird die Unterstützung von Prettier in ESLint mit den Standardeinstellungen aktiviert.

Unsere Datei sieht nun so aus:

module.exports = {
      root: wahr,
      env: {
        Knoten: wahr
      },
      'erweitert': [
        'plugin: vue / essential',
        'plugin: schöner / empfohlen', // wir haben diese Zeile hinzugefügt
        '@ vue / hübscher'
      ],
      Regeln: {
        'no-console': process.env.NODE_ENV === 'production'? 'error': 'off',
        'no-debugger': process.env.NODE_ENV === 'production'? 'error': 'off'
      },
      parserOptions: {
        Parser: 'babel-eslint'
      }
    }

Hübscher konfigurieren

Wir haben auch die Möglichkeit, eine schönere Konfigurationsdatei zu erstellen, um einige spezielle Einstellungen entsprechend unserem persönlichen Stil oder den Vorlieben unseres Teams hinzuzufügen.

Wir erstellen es hier und nennen es .prettierrc.js.

Und im Inneren geben wir Folgendes ein:

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

Dies konvertiert doppelte Anführungszeichen in einfache Anführungszeichen und stellt sicher, dass Semikolons nicht automatisch eingefügt werden.

Benutzereinstellungen

Um VS Code für ein optimales Entwicklungserlebnis weiter zu optimieren, fügen wir unseren Benutzereinstellungen einige Konfigurationen hinzu. Um auf die Benutzereinstellungen zuzugreifen, klicken Sie in der oberen Navigationsleiste auf Code, dann auf Einstellungen und dann auf Einstellungen. Dies öffnet ein Fenster mit Benutzereinstellungen, in dem Sie Einstellungen in json hinzufügen können.

Zunächst möchten wir hinzufügen:

"vetur.validation.template": false

Dadurch wird die Flusenfunktion von Vetur deaktiviert. Wir werden uns stattdessen auf ESLint + Prettier verlassen.

Jetzt möchten wir ESLint mitteilen, welche Sprachen überprüft werden sollen (vue, html und Javascript) und AutoFix auf true setzen:

"eslint.validate": [
        {
            "language": "vue",
            "autoFix": wahr
        },
        {
            "language": "html",
            "autoFix": wahr
        },
        {
            "Sprache": "Javascript",
            "autoFix": wahr
        }
    ],

Dann teilen wir ESLint aus gutem Grund autoFixOnSave mit.

"eslint.autoFixOnSave": true,

Und sagen Sie unserem Editor selbst, dass er formatOnSave verwenden soll.

"editor.formatOnSave": true,

Testen Sie es aus

Um zu testen, ob dies funktioniert, fügen wir unserer EventCard-Komponente hier eine Dateneigenschaft hinzu und fügen ein Zitat hinzu: "Ich möchte Single sein". Dann fügen wir auch hier ein Semikolon ein. Wenn wir auf Speichern klicken, werden unsere Anführungszeichen in einfache Anführungszeichen umgewandelt und das Semikolon wird entfernt. Super - es funktioniert.

Zusätzliche Tools

Schauen wir uns nun einige zusätzliche Tools an, mit denen Sie Ihre Entwicklung beschleunigen können.

Copy Relative Path (Relativen Pfad kopieren) Copy Relative Path (Relativen Pfad kopieren) ist eine Erweiterung, mit der Sie den Speicherort einer Datei anhand ihrer Beziehung zu dem Verzeichnis kopieren können, mit dem sie verknüpft ist.

Lassen Sie uns danach suchen, es installieren und dann in Aktion sehen.

In unserer Home.vue-Datei sehen wir hier bereits einen relativen Pfad, in den wir die HelloWorld-Komponente importieren.

Um den relativen Pfad einer zu importierenden Datei zu ermitteln, klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie "Relativen Pfad kopieren". Wenn wir nun das, was kopiert wurde, einfügen, sehen wir, dass wir den genauen relativen Pfad haben. Beachten Sie diese src. Der Kommentar hier lässt uns wissen, dass wir aufgrund der Art und Weise, wie unser Projekt eingerichtet ist, stattdessen @ verwenden können.

Integriertes Terminal Eine praktische integrierte Funktion des VS-Code-Editors ist das integrierte Terminal, das Sie verwenden können, anstatt auf Ihr separates Terminal umzuschalten. Sie können es mit der Tastenkombination "Strg +" öffnen

Weitere Snippets Wenn Sie zusätzliche praktische Code-Snippets installieren möchten, können Sie eine vollständige Suite von Vue VSCode-Snippets herunterladen, die von Sarah Drasner, Mitglied des Core Vue-Teams, erstellt wurde.

Suchen wir nach der Erweiterung mit ihrem Namen sarah.drasner. Da sind sie. Jetzt können wir installieren und neu laden.

Schauen wir sie uns in Aktion an.

Wenn wir vif für ein Element in unserer Vorlage eingeben, erhalten wir eine v-if-Anweisung. Wenn Sie von eingeben, erhalten wir eine vollständige Ereignisbehandlungsroutine. Anstatt eine Dateneigenschaft manuell auszutippen, können wir einfach vdata eingeben, wodurch eine für uns erstellt wird. Wir können dasselbe tun, um Requisiten mit vprops hinzuzufügen. Wir können damit sogar den Code erstellen, mit dem eine Bibliothek mit vimport-lib schnell importiert werden kann. Wie Sie sehen, handelt es sich hierbei um sehr hilfreiche und zeitsparende Schnipsel.

Beachten Sie, dass es bei Verwendung dieser Snippets-Erweiterung empfohlen wird, eine Zeile zu Ihren Benutzereinstellungen hinzuzufügen:

vetur.completion.useScaffoldSnippets sollte falsch sein

Dadurch wird sichergestellt, dass diese Snippets nicht mit denen von Vetur in Konflikt stehen.

Farbthemen Wenn Sie sich schließlich fragen, wie Sie Ihr Thema in VS Code ändern sollen, oder wenn Sie sich fragen, welches Thema ich hier verwende, gehen Sie zu Code> Einstellungen> Farbthema.

Wie Sie sehen, verwende ich FlatUI Dark. Sie können Ihre Themenfarbe hier in eine dieser Optionen ändern oder im Erweiterungsspeicher nach anderen Themen suchen.

Wenn Sie nicht das gewünschte Produkt sehen, können Sie auch den Visual Studio Marketplace online aufrufen. Hier können Sie eine Vorschau auf unzählige verschiedene Plugins und Themen anzeigen, wie zum Beispiel Night Owl von unserer Freundin Sarah Drasner. Sie können es direkt über den Browser installieren und dann in den Farbschemaeinstellungen finden.

Weiter lernen

Um weiterhin mit mir zu lernen, können Sie den vollständigen Real World Vue-Kurs bei VueMastery.com belegen.