Biome.js, rantai alat untuk memformat dan menyusun projek web anda

Saya mendapati bahawa t3-env menggunakan Biomejs untuk tujuan linting. Artikel ini memberikan gambaran keseluruhan tentang Biomej dan penggunaan dalam t3-env.

Biome.js

Biome.js ialah rantai alat untuk projek web anda. Ia membantu dengan memformat dan menyelitkan projek anda.

Permulaan pantas

1. Pemasangan

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

2. Konfigurasi

npx @biomejs/biome init

Apabila anda menjalankan arahan di atas, ia secara automatik mencipta fail biome.json. Di bawah ialah kod yang dijana secara lalai apabila anda menjalankan

arahan di atas dalam 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" } }
}

Linter.enabled: true mendayakan linter dan rules.recommended: true mendayakan peraturan yang disyorkan. Ini sepadan dengan tetapan lalai.

Pemformatan didayakan secara lalai, tetapi anda boleh melumpuhkannya secara eksplisit menggunakan formatter.enabled: false.

3. Perintah biome

a. format

Anda boleh memformat fail dan direktori menggunakan arahan format dengan pilihan — tulis:

npx @biomejs/biome format - write <files>

b. serat

Anda boleh menyelitkan dan menggunakan pembetulan selamat pada fail dan direktori menggunakan arahan lint dengan pilihan — tulis:

npx @biomejs/biome lint - write <files>

c. semak

Anda boleh menjalankan kedua-duanya, format dan pautan, dengan memanfaatkan arahan semak:

npx @biomejs/biome check - write <files>

Penggunaan Biome.js dalam t3-env

1. Skrip dalam package.json

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

Ini didapati menggunakan arahan semak CLI yang menggunakan pemformatan dan linting. Walau bagaimanapun, terdapat variasi, lint hanya menyemak isu linting tetapi apabila anda melakukan lint:fix, ia dilaksanakan dengan — apply.

— gunakan — Alias ​​untuk — tulis, tulis pembetulan selamat, pemformatan dan pengisihan import (ditamatkan, gunakan — tulis)

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
 }
}

Tentang kami:

Di Thinkthroo, kami mengkaji projek sumber terbuka yang besar dan menyediakan panduan seni bina. Kami telah membangunkan Komponen boleh guna semula, dibina dengan tailwind, yang boleh anda gunakan dalam projek anda. Kami menawarkan perkhidmatan pembangunan Next.js, React dan Node.

Tempah mesyuarat dengan kami untuk membincangkan projek anda.

Rujukan:

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

Atas ialah kandungan terperinci Biome.js, rantai alat untuk memformat dan menyusun projek web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!