Biome.js, eine Toolchain zum Formatieren und Flusen Ihres Webprojekts

Ich habe herausgefunden, dass t3-env Biomejs für Flusenzwecke verwendet. Dieser Artikel bietet einen Überblick über Biomejs und deren Verwendung in t3-env.

Biome.js

Biome.js ist eine Toolchain für Ihr Webprojekt. Es hilft beim Formatieren und Flusen Ihres Projekts.

Schnellstart

1. Installation

npm install - save-dev - save-exact @biomejs/biome

2. Konfiguration

npx @biomejs/biome init

Wenn Sie den obigen Befehl ausführen, wird automatisch die Datei biome.json erstellt. Unten finden Sie den Code, der standardmäßig generiert wird, wenn Sie

ausführen den obigen Befehl in biome.json.

{
 "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
 "vcs": {
 "enabled": false,
 "clientKind": "git",
 "useIgnoreFile": false
 },
 "files": { "ignoreUnknown": false, "ignore": [] },
 "formatter": { "enabled": true, "indentStyle": "tab" },
 "organizeImports": { "enabled": true },
 "linter": {
 "enabled": true,
 "rules": { "recommended": true }
 },
 "javascript": { "formatter": { "quoteStyle": "double" } }
}

Der linter.enabled: true aktiviert den Linter und Rules.recommended: true aktiviert die empfohlenen Regeln. Dies entspricht den Standardeinstellungen.

Formatierung ist standardmäßig aktiviert, Sie können sie jedoch deaktivieren, indem Sie explizit formatter.enabled: false verwenden.

3. Biom-Befehle

a. Format

Sie können Dateien und Verzeichnisse mit dem Formatbefehl mit der Option „Schreiben“ formatieren:

npx @biomejs/biome format - write <files>

b. Flusen

Sie können Dateien und Verzeichnisse linten und sichere Korrekturen anwenden, indem Sie den Befehl lint mit der Option „Write“ verwenden:

npx @biomejs/biome lint - write <files>

c. prüfen

Sie können beides ausführen, formatieren und verknüpfen, indem Sie den Prüfbefehl nutzen:

npx @biomejs/biome check - write <files>

Verwendung von Biome.js in t3-env

1. Skripte in package.json

"lint": "biome check .",
"lint:fix": "biome check . - apply",

Es wurde festgestellt, dass hierfür der CLI-Befehl „check“ verwendet wird, der Formatierung und Flusen anwendet. Es gibt jedoch eine Variante: Lint überprüft nur die Linting-Probleme, aber wenn Sie lint:fix ausführen, wird es mit — apply.

ausgeführt

– anwenden – Alias ​​für – schreiben, schreibt sichere Korrekturen, Formatierung und Importsortierung (veraltet, verwenden Sie – schreiben)

2. biome.json

{
 "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
 "organizeImports": {
 "enabled": true
 },
 "formatter": {
 "enabled": true,
 "indentWidth": 2,
 "indentStyle": "space"
 },
 "linter": {
 "enabled": true,
 "rules": {
 "recommended": true,
 "a11y": {
 "noSvgWithoutTitle": "off",
 "useButtonType": "off",
 "useAltText": "off"
 },
 "complexity": {
 "noBannedTypes": "off"
 },
 "style": {
 "useImportType": "error",
 "useExportType": "error"
 }
 }
 },
 "overrides": [
 {
 "include": ["**/*.test.ts"],
 "linter": {
 "rules": {
 "suspicious": {
 "noExplicitAny": "off"
 }
 }
 }
 }
 ],
 "vcs": {
 "enabled": true,
 "clientKind": "git",
 "useIgnoreFile": true
 }
}

Über uns:

Bei Thinkthroo studieren wir große Open-Source-Projekte und stellen Architekturführer zur Verfügung. Wir haben mit Rückenwind wiederverwendbare Komponenten entwickelt, die Sie in Ihrem Projekt nutzen können. Wir bieten Next.js-, React- und Node-Entwicklungsdienste an.

Buchen Sie einen Termin mit uns, um Ihr Projekt zu besprechen.

Referenzen:

1. https://biomejs.dev/

2. https://github.com/t3-oss/t3-env/blob/main/biome.json

3. https://github.com/t3-oss/t3-env/blob/main/package.json#L10

Das obige ist der detaillierte Inhalt vonBiome.js, eine Toolchain zum Formatieren und Flusen Ihres Webprojekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!