So entwickeln Sie Uniapp mit vscode

Da ich immer vscode zur Entwicklung von Front-End-Projekten verwendet habe, werden jetzt einige kleine Programme oder h5-Projekte mit Uniapp entwickelt. Nachdem ich eine Zeit lang Erfahrungen mit hbuilder gemacht habe, denke ich immer noch, dass vscode gut ist. Im Folgenden sind einige Konfigurationen aufgeführt, die ich mit vscode entwickelt habe. Dazu gehören Syntaxaufforderungen für Uniapp-Komponenten, Uniapp-Codeaufforderungen und automatische Codeformatierung.

Referenzdokument: https://ask.dcloud.net.cn/article/id-36286__page-2

1. Vetur installieren

Zuerst müssen wir das vscode-Basis-Vue-Plugin vetur installieren, das in der vscode-Erweiterung installiert werden kann

2. Installieren Sie eslint

Installieren Sie eslint Erweiterung in vscode

3. Konfigurieren Sie die Datei setting.json von vscode

VSCode erweitert die Einstellungen. Klicken Sie auf Datei > Einstellungen > Einstellungen, um die VSCode-Konfigurationsdatei settings.json zu öffnen und die folgende Konfiguration hinzuzufügen

{
   "files.autoSave": "aus",
   "eslint.validate": [
       "Javascript",
       "javascriptreact",
       "vue-html",
       {
       "Sprache": "vue",
       "autoFix": wahr
       }
   ],
   "eslint.run": "beim Speichern",
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
       "source.fixAll.eslint": wahr
   }
  }

Dasselbe gilt für die automatische Formatierung von Vue-Projekten. Das Obige ist Teil der Konfiguration. Löschen Sie nicht die ursprüngliche Konfiguration.
Beachten

Verschiedene Versionen von vscode können leicht unterschiedliche Konfigurationen haben. Wenn bei einer Konfiguration ein Problem auftritt, werden Sie von vscode darauf hingewiesen.

4. Erstellen Sie mit vue-cli ein Uniapp-Projekt.

Sie müssen sicherstellen, dass Sie vue-cli global installiert haben. Wenn nicht, installieren Sie zuerst vue-cli.
vue create -p dcloudio/uni-preset-vue my-project

Wir wählen zunächst die Standardvorlage (Typescript) aus. Natürlich können Sie auch andere Vorlagen auswählen

Nachdem die Installation abgeschlossen ist, verwenden wir vscode, um das gerade erstellte Projekt zu öffnen.

5. Installieren Sie Komponentensyntaxhinweise im Projekt

npm i @dcloudio/uni-helper-json , wenn es bereits in Ihrer Datei package.json installiert ist, müssen Sie es nicht installieren. Zu diesem Zeitpunkt können wir die Syntaxaufforderung der Komponente sehen

6. Installieren Sie uniapp-snippet -Plugin in vscode

7. Code speichern und automatisch formatieren

Sie können sehen, dass das Format der Seite zu diesem Zeitpunkt ziemlich chaotisch ist, was das Betrachten unangenehm macht und beim Speichern nicht automatisch formatiert wird. Daher müssen wir dem Projekt eslint hinzufügen.
vue add eslint
Wir wählen die letzte prettier
Nachdem die Installation abgeschlossen ist, können wir sehen, dass unser Projekt weitere Dateien hat, und wir können die Regeln in der Datei .eslintrc.js konfigurieren.

Wir können sehen, dass einige konfigurierte JS-Dateien Fehler melden. Wir können die Eslint-Prüfungen am Anfang und Ende dieser Dateien ignorieren, z. B. postcss.config.js

/* eslint-deaktivieren */
const path = require("Pfad");
modul.exporte = {
  Parser: erfordern("postcss-comment"),
  Plugins: [
    erfordern("postcss-import")({
      lösen(id, basedir, importOptions) {
        wenn (id.startsWith("~@/")) {
          Rückgabepfad.Auflösen(Prozess.Umgebung.UNI_INPUT_DIR, ID.substr(3));
        } sonst wenn (id.startsWith("@/")) {
          Rückgabepfad.Auflösen(Prozess.Umgebung.UNI_INPUT_DIR, ID.substr(2));
        } sonst wenn (id.startsWith("/") und !id.startsWith("//")) {
          Rückgabepfad.Auflösen(Prozess.Umgebung.UNI_INPUT_DIR, ID.substr(1));
        }
        Rückgabe-ID;
      },
    }),
    erfordern("autoprefixer")({
      entfernen: process.env.UNI_PLATFORM !== "h5",
    }),
    erfordern("@dcloudio/vue-cli-plugin-uni/packages/postcss"),
  ],
};
/* eslint-deaktivieren */

Mit den anderen konfigurierten js-Dateien wird auf ähnliche Weise verfahren. Nachdem die Konfiguration abgeschlossen ist, speichern wir den Code und er wird automatisch formatiert.

8. Importieren Sie die von HBuilderX bereitgestellten Codeblöcke

Laden Sie den Uni-App-Codeblock von GitHub herunter und legen Sie ihn im Verzeichnis .vscode unter dem Projektverzeichnis ab, um denselben Codeblock wie HBuilderX zu haben. d Codeblock-Downloadadresse https://github.com/zhetengbiji/uniapp-snippets-vscode

Dies ist das Ende dieses Artikels über die Verwendung von vscode zur Entwicklung von Uniapps. Weitere relevante Inhalte zur vscode-Entwicklung von Uniapps finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!