Detailliertes Tutorial zur Verwendung des Prettier Code-Plugins in vscode

Detailliertes Tutorial zur Verwendung des Prettier Code-Plugins in vscode

Warum prettier verwenden?

In großen Unternehmen kann der Front-End-Entwicklungscode eigene Codestandards haben. Wie können Sie schnell Ihre eigenen Codestandards generieren? Die Verwendung von Prettier ist die bessere Wahl!

Wie installiere ich das Prettier Code-Plugin?

Bildbeschreibung hier einfügen

Suchen Sie in der letzten Option in der Seitenleiste nach Prettier Code in der Suchleiste und installieren Sie ihn.

So konfigurieren Sie im Projekt

In Ihrem neuen Projekt können Sie zwei neue Konfigurationsdateien erstellen: eine ist die Datei .prettierignore, die der Datei .gitignore zum Ignorieren von Dateien ähnelt; die andere ist die Datei .prettierrc.js, die zum Konfigurieren Ihrer Codeüberprüfungsregeln verwendet wird.

.prettierignore ist wie folgt konfiguriert

**/*.md
**/*.svg
**/*.ejs
**/*.html
Paket.json
.umi
.umi-Produktion
.umi-test

.prettierrc.js ist wie folgt konfiguriert

modul.exporte = {
    // Eine Zeile kann maximal 100 Zeichen enthalten printWidth: 100,
    // Verwenden Sie 2 Leerzeichen zum Einrücken von tabWidth: 2,
    // Keine Einrückungszeichen verwenden, sondern Leerzeichen useTabs: false,
    // Am Ende der Zeile ist ein Semikolon erforderlich semi: true,
    // Einfache Anführungszeichen verwenden singleQuote: true,
    // Objektschlüssel werden nur bei Bedarf in Anführungszeichen gesetzt quoteProps: 'as-needed',
    // jsx verwendet keine einfachen Anführungszeichen, sondern doppelte AnführungszeichenjsxSingleQuote: false,
    // Kein abschließendes Komma erforderlich trailingComma: 'all',
    // Am Anfang und Ende der Klammern sind Leerzeichen erforderlich bracketSpacing: true,
    // Die umgekehrten spitzen Klammern von jsx-Tags müssen umbrochen werden jsxBracketSameLine: false,
    // Pfeilfunktion, wenn nur ein Parameter vorhanden ist, benötigt auch Klammern arrowParens: 'always',
    // Der Bereich jedes Dateiformats ist der gesamte Inhalt der Datei rangeStart: 0,
    rangeEnd: Unendlich,
    // Es ist nicht nötig, @prettier am Anfang der Datei zu schreiben
    requirePragma: false,
    // Es ist nicht nötig, @prettier automatisch am Anfang der Datei einzufügen
    insertPragma: false,
    // Benutze den Standard-Zeilenumbruch Standard proseWrap: 'preserve',
    //Bestimmen Sie, ob HTML basierend auf dem Anzeigestil umbrochen werden soll htmlWhitespaceSensitivity: 'css',
    // Für Zeilenumbrüche lf verwenden
    endOfLine: 'auto',
};

Jetzt sind alle Konfigurationen abgeschlossen. Klicken Sie jedes Mal, wenn Sie Code schreiben, mit der rechten Maustaste und wählen Sie Dokument formatieren .

Dies ist das Ende dieses Artikels über das ausführliche Tutorial zur Verwendung des Prettier Code-Plugins in vscode. Weitere relevante Inhalte zur Verwendung von Prettier Code in vscode finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • vscode konfiguriert Eslint und die korrekte Methode von Prettier
  • Detaillierte Erklärung zur Verwendung von Code zum Formatieren der Konfiguration mit dem Prettier-Plugin in vscode
  • vscode konfiguriert die automatische Formatierungsfunktion von vue+vetur+eslint+prettier
  • Konfiguration des Eslint-Plugins in Vscode (Prettier-Konfiguration ist ungültig)

<<:  MySQL 5.7.29 + Win64-Dekomprimierungsversion Installations-Tutorial mit Bildern und Text

>>:  Schritte zur Domänennamenauflösung beim Alibaba Cloud Server (Tutorial für Anfänger)

Artikel empfehlen

MySQL 5.7.17 Installations- und Konfigurations-Tutorial unter Linux (Ubuntu)

Vorwort Ich habe MySQL 5.6 bereits installiert. D...

MYSQL METADATA LOCK (MDL LOCK) Theorie und Sperrtyptest

Inhaltsverzeichnis MYSQL METADATA LOCK (MDL LOCK)...

Diagramm des Datenübertragungsprozesses beim dritten TCP-Handshake

Die Prozesspakete mit dem SYN-Flag im RFC793-Doku...

21 Best Practices zur MySQL-Standardisierung und -Optimierung!

Vorwort Jede gute Angewohnheit ist ein Schatz. Di...

Gängige Methoden zur Optimierung der Docker-Imagegröße

Die Docker-Images, die wir normalerweise erstelle...

So ermitteln Sie die Ausführungszeit eines Befehls oder Prozesses in Linux

Auf Unix-ähnlichen Systemen wissen Sie möglicherw...

Swiper+echarts realisiert den Links- und Rechts-Scrolleffekt mehrerer Dashboards

In diesem Artikel wird der spezifische Code von S...