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

HTML 5.1 lernen: 14 neue Features und Anwendungsbeispiele

Vorwort Wie wir alle wissen, gehört HTML5 dem Wor...

Konfigurieren Sie nginx so, dass es zur Systemwartungsseite umleitet

Letztes Wochenende bereitete sich ein Bruderproje...

Detaillierte Schritte zur Installation von Docker in 5 Minuten

Für die Installation von Docker auf CentOS muss d...

MySQL 5.7.18 Installer Installation Download Grafik-Tutorial

Dieser Artikel enthält das ausführliche Installat...

Probleme und Lösungen bei der Installation von Mininet auf Ubuntu 16.04.4LTS

Mininet Mininet ist eine leichtgewichtige, softwa...

Detaillierte Erklärung der Zeichensätze und Validierungsregeln in MySQL

1Mehrere gängige Zeichensätze Zu den gängigsten Z...

So richten Sie den PostgreSQL-Start unter Ubuntu 16.04 ein

Da PostgreSQL kompiliert und installiert ist, müs...

Schneller Einstieg in die Teleport-Komponenten und Verwendungssyntax von VUE 3

Inhaltsverzeichnis 1. Einführung in das Teleporti...

Detaillierte Erklärung zur Verwendung des Canvas-Operation-Plugins fabric.js

Fabric.js ist ein sehr nützliches Plug-In für Can...