Rumah > hujung hadapan web > tutorial js > Biome.js, rantai alat untuk memformat dan menyusun projek web anda

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

Patricia Arquette
Lepaskan: 2024-12-03 00:43:10
asal
444 orang telah melayarinya

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
Salin selepas log masuk

2. Konfigurasi

npx @biomejs/biome init
Salin selepas log masuk

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" } }
}
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

c. semak

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

npx @biomejs/biome check - write <files>
Salin selepas log masuk

Penggunaan Biome.js dalam t3-env

  1. Skrip dalam package.json
"lint": "biome check .",
"lint:fix": "biome check . - apply",
Salin selepas log masuk

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
 }
}
Salin selepas log masuk

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.

Biome.js, a toolchain to format and lint your web project

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan