รีวิว @shadcn/lint — linter สำหรับ Tailwind ที่เขียน error ให้ AI agent แก้เองได้

คืออะไร

@shadcn/lint (repo shadcn-ui/lint) เป็น linter ที่ทำงานกับ Tailwind v4 project โดยไม่ได้บังคับว่าต้องใช้ shadcn/ui คอนเซปต์หลักคือ “คุณกำหนดว่าอะไรที่อนุญาต” แล้วเมื่อ agent เขียนโค้ดผิดกฎ ข้อความ error จะอธิบายว่าผิดอะไร และแนะนำวิธีแก้จาก components, variants และ theme ของเราเอง

เขียนด้วย TypeScript, MIT License, มี ⭐ 3,160 | forks 63 | open issues 11 (ข้อมูล ณ 11 ต.ค. 2026)

จุดเด่น

• error message ยกตัวอย่างจริงจาก README: <Button> owns its spacing. Use a size (sm, lg), or margin here or gap on the parent for space around it. คือมันบอกวิธีแก้ ไม่ใช่แค่บอกว่าผิด
• ต่างจากการบังคับด้วย TypeScript type ตรงๆ: README อธิบายว่า TS error แค่บอกว่า padding ไม่อนุญาต แต่ไม่ได้บอกว่าจะขนาด Button ยังไง ส่วน linter บอก guidance มาจาก design system
• contracts ให้กำหนดกฎแยกเป็นราย component เช่น อนุญาตให้ CardTitle เปลี่ยน typography ได้แต่เปลี่ยน font ไม่ได้ ขณะที่ CardContent เปลี่ยน spacing ได้แต่ typography ไม่ได้
• custom messages และ placeholders เขียนเองได้ เช่น Use a {{component}} size: {{sizes}}. หรือชี้ไปหา theme color ที่ {{file}}
• รองรับ 6 rules: no-restyle, no-raw-colors, no-arbitrary-values, no-inline-styles, no-unknown-classes, require-static-classes
• ใช้ได้ทั้ง ESLint และ Oxlint และใช้กับ React, Vue, Svelte โดยไม่ต้อง fork component หรือเขียน wrapper (README: “No forks. No wrappers.”)
• เอกสารระบุว่าทดสอบกับ coding agents มากกว่า 150 task runs และในตารางผลของ Sonnet 5, Haiku 4.5, Opus 5, GPT 5.6 Terra ลด error เหลือ 0 หลังรับ lint feedback หนึ่งรอบแก้ (GPT 5.6 Sol ทำได้ 6/8) พร้อมบอกว่าใน control runs ของ Claude การแก้ด้วย lint feedback คุ้มกว่ากฎอย่างเดียว 10%-48%

เหมาะกับใคร

• ทีมที่ใช้ coding agent เขียน UI แล้วเจอปัญหา agent ไปเขียน className มั่วเช่น padding, raw color, arbitrary value ที่ขัดกับ design system
• คนที่มี design system อยู่แล้ว (Tailwind v4) และอยากบังคับกฎโดยไม่ต้องแก้ API ของ component เดิม
• คนที่ใช้ component จาก third-party package และอยากบังคับกฎกับมันโดยไม่ต้อง fork
• องค์กรที่ต้องการ share config ของ design system เดียวกันไปหลายโปรเจกต์ แต่ละโปรเจกต์เพิ่มกฎของตัวเอง

เริ่มต้นใช้งาน

วิธีที่ README แนะนำคือส่ง prompt นี้ให้ coding agent:

Read https://github.com/shadcn-ui/lint/blob/main/SETUP.md
and set up @shadcn/lint in this project.

ถ้าตั้งค่าเอง ตัวอย่างสำหรับ React กับ ESLint (ต้องใช้ Node.js 20.19 ขึ้นไป และ ESLint 9.30 ขึ้นไป):

npm install -D @shadcn/lint eslint @typescript-eslint/parser

import { plugin as shadcn } from "@shadcn/lint"
import tsParser from "@typescript-eslint/parser"
import { defineConfig } from "eslint/config"

export default defineConfig([
  {
    files: ["**/*.{js,jsx,ts,tsx}"],
    languageOptions: {
      parser: tsParser,
      parserOptions: { ecmaFeatures: { jsx: true } },
    },
    plugins: { shadcn },
    rules: {
      "shadcn/no-arbitrary-values": "error",
    },
  },
])

npx eslint .

ถ้าอยากใช้ Oxlint (ต้องใช้ Oxlint 1.80 ขึ้นไป) ติดตั้งแบบนี้และสร้าง .oxlintrc.json:

{
  "jsPlugins": ["@shadcn/lint"],
  "rules": {
    "shadcn/no-arbitrary-values": "error"
  }
}

npx oxlint

หลังตั้งเสร็จ README แนะนำให้เพิ่มคำสั่ง lint เป็น script lint ใน package.json แล้วใส่ใน AGENTS.md ว่า:

After making changes, run `npm run lint` and fix all errors.

Vue และ Svelte มีวิธีติดตั้งแยกในหน้า React, Vue, Svelte ของ docs ครับ

ข้อควรรู้

• License: MIT License ใช้เชิงพาณิชย์ได้ตามเงื่อนไข MIT ปกติ
• ความสดใหม่: push ล่าสุด 11 ต.ค. 2026, โปรเจกต์สร้างเมื่อ 2 ก.ย. 2026 อายุราว 1 เดือน ยังใหม่และเปลี่ยนตัวเร็ว ควรลองกับโปรเจกต์จริงก่อน
• ข้อจำกัดด้านเวอร์ชัน: ต้องเป็น Tailwind v4, Node.js 20.19 ขึ้นไป, ESLint 9.30 ขึ้นไป หรือ Oxlint 1.80 ขึ้นไป
• Oxlint อ่านเฉพาะ block <script> ของไฟล์ .vue และ .svelte ไม่ได้อ่าน template/markup ตามที่ README ระบุ
• ถ้าเฟรมเวิร์กของคุณตั้ง ESLint ไว้แล้ว README แนะนำให้คง parser setup เดิมไว้ แล้วเพิ่ม plugin กับ rule เข้าไป
• ตัวเลข eval ในหัวข้อ Built for agents เป็นผลจาก test ของผู้พัฒนาเอง และมีบางโมเดลทำได้ไม่ครบ 8/8 (GPT 5.6 Sol ทำได้ 6/8) วิธีวัดละเอียดอยู่ใน docs/evals.md
• ตัวอย่างใน README ส่วนใหญ่ใช้ className ซึ่งเป็น React style

🔗 https://github.com/shadcn-ui/lint

ข้อมูลจาก GitHub ณ 11 ต.ค. 2026: ⭐ 3,160 | ภาษา TypeScript | license MIT