ultracite

อัลตราไซต์

Ultracite คือการกำหนดค่า Linting ที่แข็งแกร่งสำหรับแอป TypeScript สมัยใหม่ที่สร้างขึ้นบน Biome มีการให้ความเห็นและเข้มงวดอย่างไม่น่าเชื่อ โดยบังคับใช้ความปลอดภัยประเภทและคุณภาพของรหัสสูงสุด เมื่อตั้งค่า Ultracite แล้ว ระบบจะทำการขลิบ แก้ไข และจัดรูปแบบโค้ดของคุณโดยอัตโนมัติเมื่อบันทึก

การติดตั้ง

รันคำสั่งด้านล่างเพื่อติดตั้ง Ultracite:

pnpm add -D --save-exact ultracite @biomejs/biome

หากคุณใช้ VS Code ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งส่วนขยายต่อไปนี้:

code --install-extension biomejs.biome
code --install-extension bradlc.vscode-tailwindcss

ตั้งค่า

สร้าง biome.json โดยมีเนื้อหาดังต่อไปนี้:

{ "extends" : [ " ultracite " ] }

Ultracite ออกแบบมาเพื่อใช้กับ VS Code สร้างไฟล์ .vscode/settings.json โดยมีเนื้อหาต่อไปนี้เพื่อเปิดใช้งานการจัดรูปแบบแบบเต็มและการแก้ไขเมื่อบันทึก:

{
  "typescript.tsdk" : " node_modules/typescript/lib " ,
  "editor.defaultFormatter" : " biomejs.biome " ,
  "editor.formatOnSave" : true ,
  "editor.formatOnPaste" : true ,
  "emmet.showExpandedAbbreviation" : " never " ,
  "editor.codeActionsOnSave" : {
    "quickfix.biome" : " explicit " ,
    "source.organizeImports.biome" : " explicit "
  },
  "[typescript]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[json]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[javascript]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[jsonc]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[typescriptreact]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  }
}

สุดท้ายนี้ ตรวจสอบให้แน่ใจว่า tsconfig.json ของคุณ (ถ้ามี) รวมการกำหนดค่า ESLint ใหม่ของคุณ และเปิดใช้งาน strictNullChecks แล้ว

{
  "compilerOptions" : {
    "strictNullChecks" : true
  }
}

การใช้งาน

Ultracite จะทำการ Lining แก้ไข และจัดรูปแบบโค้ดของคุณโดยอัตโนมัติเมื่อบันทึก หากคุณต้องการรัน Ultracite ด้วยตนเอง คุณสามารถทำได้โดยใช้คำสั่งต่อไปนี้:

npx ultracite

การกำหนดค่า

แม้ว่า Ultracite จะได้รับการออกแบบมาให้ไม่มีการกำหนดค่า แต่คุณสามารถแก้ไขได้ทุกอย่างที่ต้องการในไฟล์ biome.json ของคุณ ตัวอย่างเช่น หากต้องการเปิดใช้งานกฎ noAutofocus คุณสามารถทำสิ่งต่อไปนี้:

{
  "extends" : [ " ultracite " ],
  "linter" : {
    "rules" : {
      "a11y" : {
        "noAutofocus" : " off "
      }
    }
  }
}

คุณยังสามารถปิดใช้งานกฎในแต่ละบรรทัดได้โดยเพิ่มความคิดเห็นที่ท้ายบรรทัด:

 // biome-ignore lint/security/noDangerouslySetInnerHtml: I do what I want mate.
< div dangerouslySetInnerHTML = { { ... } } / > 

หมายเหตุ

ก่อนหน้านี้ Ultracite ถูกสร้างขึ้นบน ESLint, Prettier และ Stylelint หากคุณต้องการใช้สแต็กนั้น คุณสามารถติดตั้ง Ultracite เวอร์ชันที่เข้ากันได้ด้วยคำสั่งต่อไปนี้:

pnpm add -D ultracite@3 eslint@8 prettier stylelint typescript jest