Einführung des Code-Prüftools stylelint zum Erfahrungsaustausch

Vorwort

Wenn bei der Arbeit in einem Team jeder Code eine benutzerdefinierte Formatierungsmethode hat, müssen beim Senden einer Zusammenführung häufig viele Konflikte gelöst werden. Zu diesem Zeitpunkt können wir eslint + stylelint verwenden, um den Code des Teams einzuschränken.

Text

Stylelint ist ein leistungsstarkes, modernes Code-Prüfungstool, das Ihnen bei der Durchsetzung von Stilkonventionen bei der Arbeit im Team hilft.

1. Installieren Sie stylelint

Garn hinzufügen -D stylelint

2. Konfigurationsdatei

Für die Verwendung des Stylelint-Detektors ist ein Konfigurationsobjekt erforderlich, das Sie auf drei Arten erstellen können.

Stylelint-Eigenschaft in package.json .

.stylelintrc.js Datei

Das von der Datei stylelint.config.js ausgegebene js-Objekt

Sobald eines davon gefunden wird, wird keine weitere Suche durchgeführt, sondern eine Analyse durchgeführt und das analysierte Objekt verwendet. Dieses Mal wird die Datei .stylelintrc.js zur Konfiguration verwendet.

3. Verwenden Sie Stylelint

Laut der offiziellen Dokumentation können Sie stylelint ausführen, um Stilcodes wie folgt zu erkennen.

--fix dient zur automatischen Reparatur, kann jedoch nicht alle Probleme beheben.

// paket.json
"Skripte": {
  „lint:css“: „stylelint src/**/*.css --fix“
}

Falle 1:

Weil in meinem Projekt weniger Stilsprache verwendet wird. Die Erkennung von CSS ist also definitiv falsch, daher müssen wir hier einige Änderungen vornehmen

// paket.json
"Skripte": {
  „lint:css“: „stylelint src/**/*.less --fix“
}

So können wir diesen Code ausführen

Garn-Lint: CSS, PostCSS ohne

Wie Sie sehen, gibt es hier einige Hinweise, die einfach so übersetzt werden können, dass sie uns ermöglichen, die entsprechende Syntax zum Parsen unserer Stile zu verwenden. Und der entsprechende Syntaxparser muss von uns installiert werden.

yarn add -D ohne PostCSS

Also habe ich das Skript noch einmal geändert.

// paket.json
"Skripte": {
  „lint:css“: „stylelint src/**/*.less – fix – custom-syntax postcss-less“
}

OK, jetzt können wir den Lint-Befehl normal ausführen, um unseren Stilcode zu formatieren. Als nächstes konfigurieren wir die Lint-Regeln

4. Regeln konfigurieren

Wir müssen zunächst drei npm-Pakete installieren, die uns helfen, die Regeln zu verbessern

yarn add -D stylelint-Konfiguration-Standard stylelint-Reihenfolge stylelint-Konfiguration-CSS-Module

stylelint-config-standard ist die empfohlene Konfiguration für Stylelint stylelint-order wird zum Sortieren der Eigenschaften des Codes beim Formatieren von CSS-Dateien verwendet.

stylelint-config-css-modules ist eine css-module Modullösung zur Verarbeitung von Stylefiles

Meine Konfigurationsdatei sieht folgendermaßen aus:

// .stylelintrc.js
modul.exporte = {
    Prozessoren: [],
    Plugins: ['stylelint-order'],
    erweitert: [
        "stylelint-Konfigurationsstandard",
        „stylelint-config-css-modules“
    ],
    Regeln:
        "selector-class-pattern": [ // Namenskonvention -
            "^([az][a-z0-9]*)(-[a-z0-9]+)*$",
            {
                „Nachricht“: „Erwarteter Klassenselektor ist Kebab-Case“
            }
        ],
        "string-quotes": "single", // einfache Anführungszeichen "at-rule-empty-line-before": null,
        "at-rule-no-unknown":null,
        "at-rule-name-case": "lower", // Groß- und Kleinschreibung von @Regelnamen festlegen "length-zero-no-unit": true, // Einheiten mit der Länge Null verbieten (kann automatisch behoben werden)
        "shorthand-property-no-redundant-values": true, // Abkürzungseigenschaft "number-leading-zero": "never", // Dezimalstellen ohne 0
        „declaration-block-no-duplicate-properties“: true, // Doppelte Eigenschaften des Deklarationsblocks verbieten. „no-descending-specificity“: true, // Das Erscheinen eines Selektors mit niedrigerer Priorität, der von einem Selektor mit höherer Priorität überdeckt wird, verbieten.
        "selector-max-id": 0, // Begrenzen Sie die Anzahl der ID-Selektoren in einem Selektor "max-nesting-depth": 3,
        "indentation": [2, { // Warnerinnerung für Einrückung angeben "severity": "warning"
        }],
        "order/properties-order": [ // Regelreihenfolge "position",
            "Spitze",
            "Rechts",
            "unten",
            "links",
            "z-index",
            "Anzeige",
            "schweben",
            "Breite",
            "Höhe",
            'maximale Breite',
            'max-Höhe',
            'Mindestbreite',
            'Mindesthöhe',
            'Polsterung',
            'Polsterung oben',
            'Auffüllen rechts',
            'Polsterung unten',
            'Auffüllen links',
            'Marge',
            'Rand oben',
            'Rand rechts',
            'Rand unten',
            'Rand links',
            'Randkollaps',
            'Rand oben zusammenklappen',
            'Rand rechts zusammenklappen',
            'Rand unten zusammenklappen',
            'Rand links zusammenklappen',
            'Überlauf',
            'Überlauf-x',
            'Überlauf-y',
            'Clip',
            'klar',
            'Schriftart',
            'Schriftfamilie',
            'Schriftgröße',
            'Schriftglättung',
            „OSX-Schriftglättung“,
            'Schriftstil',
            'Schriftstärke',
            "Zeilenhöhe",
            'Buchstabenabstand',
            'Wortabstand',
            "Farbe",
            "Textausrichtung",
            'Textdekoration',
            'Texteinzug',
            'Textüberlauf',
            'Textdarstellung',
            'Textgröße anpassen',
            'Textschatten',
            'Texttransformation',
            'Worttrennung',
            'Zeilenumbruch',
            'Leerzeichen',
            'vertikale Ausrichtung',
            'Listenstil',
            'Listenstiltyp',
            'Listenstil-Position',
            'Listenstil-Bild',
            'Zeiger-Ereignisse',
            'Cursor',
            "Hintergrund",
            "Hintergrundfarbe",
            "Grenze",
            "Randradius",
            'Inhalt',
            'Gliederung',
            'Umriss-Offset',
            'Opazität',
            'Filter',
            'Sichtweite',
            'Größe',
            'verwandeln',
        ],
    }
};

processors wird dieses Mal nicht verwendet und daher nicht eingeführt. Interessierte Studierende können die offizielle Dokumentation konsultieren.

plugins sind von der Community erstellte Regeln oder Regelsätze zur Unterstützung von Methoden, Tool-Sets, nicht standardmäßigen CSS-Funktionen oder sehr spezifischen Anwendungsfällen.

extends erbt eine vorhandene Konfigurationsdatei. (In meiner Konfiguration werden das CSS-Modul und die offiziell empfohlene Konfiguration übernommen)

rules legen fest, was der Detektor finden und lösen soll. Mit dieser Option können Sie also die entsprechenden Regeln aktivieren und die entsprechende Erkennung durchführen. Alle Regeln müssen explizit konfiguriert werden, da es keine Standardregeln gibt .

Hinweis: Null deaktiviert die Regel. Sie können die offiziell empfohlenen Konfigurationsregeln in Regeln umschreiben.

5. Lint-Dateien ignorieren

An diesem Punkt können wir Stylelint verwenden, um den Stilcode normal zu formatieren. Es gibt jedoch häufig einige Codes im Projekt, die nicht formatiert werden müssen. Beispielsweise extrahieren wir separat eine Override-Datei, um den Stil von antd neu zu schreiben. Offensichtlich ist hier keine Formatierung erforderlich, da die Selektorbenennung von antd von unseren Spezifikationen abweichen kann. Daher müssen wir diese Datei beim Ausführen von Lint ignorieren.

Wir können ignoreFiles in .stylelintrc.js konfigurieren.

Erstellen Sie eine .stylelintignore Datei.

Wir können die Methode /* stylelint-disable */ verwenden, um die Lint-Erkennung für Codeblöcke zu ignorieren.

Ich verwende die zweite Methode, die Konfiguration ist wie folgt:

// .stylelintignore
*.js
*.tsx
*.ts
*.json
*.png
*.eot
*.ttf
*.woff
*.css
src/styles/antd-overrides.less

6. Automatische Formatierung

Nach Abschluss der obigen Konfiguration haben wir tatsächlich das Ziel der Standardisierung erreicht, aber wenn wir jedes Mal Lint ausführen müssen, erhöht dies zweifellos unseren Codierungsaufwand. Hier sind zwei Möglichkeiten, den Code automatisch zu formatieren, wenn wir Stilcode schreiben.

Stylelint vs. Code-Plugin

Webpack-Plugin

Warum kann uns ein Webpack-Plug-In dabei helfen, Code im Formatstil zu formatieren? Dies liegt daran, dass uns dieses Plug-In beim Neukompilieren während eines Hot-Updates dabei hilft, den Code zu erkennen. Und beheben Sie es gemäß den in der Datei .stylelintrc.js konfigurierten Regeln. Bei Lint-Fehlern können Sie das Projekt so einstellen, dass es nicht mehr ausgeführt werden kann, und so das Hochladen von Stilen ohne Lint in die Codebasis vermeiden.

Ich bin bei der Verwendung dieses Plug-Ins auf viele Fallstricke gestoßen und werde diese nacheinander besprechen.

Sammlung von Plugin-Fallstricken

Ganz am Anfang. Gemäß den Schreibmethoden verschiedener großer Götter, die auf Baidu zu finden sind, müssen Sie es nur wie folgt konfigurieren:

neues StyleLintPlugin({
    Kontext: "src",
    Konfigurationsdatei: Pfad.Auflösen(__Verzeichnisname, './stylelintrc.js'),
    Dateien: '**/*.less',
    failOnError: falsch,
    ruhig: wahr,
    Syntax: „weniger“
})

Das Ende war wie erwartet, es hat nicht funktioniert. Das Schlimmste daran ist, dass bei lokaler Ausführung der falsche Eindruck entsteht, es liege kein Problem der Aufgabe vor. So glauben Sie fälschlicherweise, mit Ihrem Code gäbe es kein Problem! Tatsächlich hat dieses Plugin nicht funktioniert.

Wenn Sie außerdem die vscode-Erweiterung von Stylelint mit dieser Konfiguration verwenden, gibt es viele rote Wellen, die Sie explodieren lassen~~~~.

Nach meiner Erfahrung habe ich endlich eine Konfiguration ohne Fehler, ohne Illusionen, ohne Fehlerprüfung und ohne Ignorieren meiner ignorierten Konfiguration abgeschlossen!

    neues StylelintPlugin({
      Konfigurationsdatei: Pfad.Auflösen(__Verzeichnisname, './.stylelintrc.js'),
      Erweiterungen: ['less'],
      Dateien: 'src/**/*.less',
      Fix: wahr,
      benutzerdefinierteSyntax: "ohne postcss",
      lintDirtyModulesOnly: wahr,
      Threads: wahr,
      ausschließen: ['node_modules', 'src/styles/antd-overrides.less'],
    })

7. Commit-Erkennung

Dies ist relativ einfach. Wenn das Projekt zuvor die Commit-Erkennung während eslint konfiguriert hat, müssen Sie dem Skript nur den Erkennungsstil hinzufügen. Die Konfiguration ist wie folgt

  "lint-staged": {
    "*.{ts,tsx}": [
      „eslint --ext js,ts,tsx --fix“,
      "git add"
    ],
    "*.weniger": [
      „stylelint --fix --custom-syntax ohne PostCSS“,
      "git add"
    ]
  }

Eigentlich ist es nicht nötig, yarn lint:css hier auszuführen, denn wenn Sie das tun, werden beim Commit alle Stile unter src vollständig erkannt. Wir müssen jedoch nur die geänderten Dateien erkennen.

Besonderer Hinweis: Denken Sie unbedingt daran, --custom-syntax postcss-less hinzuzufügen.

Oben finden Sie den detaillierten Inhalt der Erfahrungszusammenfassung und des Austauschs der bei der Einführung von Stylelint aufgetretenen Probleme. Weitere Informationen zum Austausch praktischer Probleme bei der Einführung von Stylelint finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!