🌐 ภาษา
prettier-plugin-classnames
ปลั๊กอิน Prettier ที่ช่วยตัดบรรทัดชื่อคลาสที่ยาวตามตัวเลือก printWidth
การติดตั้ง[^1]
npm install -D prettier prettier-plugin-classnames[^1]: หากเวอร์ชันของ prettier-plugin-classnames ของคุณต่ำกว่า 0.4.0 คุณจะต้องติดตั้ง @prettier/sync ด้วย
การตั้งค่า
ตัวอย่าง JSON:
{
"plugins": ["prettier-plugin-classnames"]
}ตัวอย่าง JS (โมดูล CommonJS):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};ตัวอย่าง JS (ES module):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};การแทนที่ Markdown/MDX
ปลั๊กอินนี้ไม่รองรับ Markdown และ MDX แต่หากปลั๊กอินนี้รองรับภาษาในบล็อกโค้ด (เช่น Vue) อาจมีการจัดรูปแบบที่ไม่ตั้งใจเกิดขึ้นภายในบล็อกโค้ด
เพื่อป้องกันการจัดรูปแบบที่ไม่ตั้งใจ คุณสามารถใช้การแทนค่าคอนฟิกสำหรับ Markdown และ MDX ได้
ตัวอย่าง JSON:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}ตัวเลือก
คุณสมบัติที่กำหนดเอง
รายการคุณสมบัติที่ชื่อคลาสที่ครอบคลุม
แอตทริบิวต์ class และ className จะรองรับเสมอ แม้ว่าจะไม่มีการระบุออปชั่นใด ๆ
ค่าเริ่มต้น | การแทนที่ด้วย CLI | การแทนที่ด้วย API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
ฟังก์ชันที่กำหนดเอง
รายการฟังก์ชันที่ชื่อคลาสที่ครอบคลุม
ฟังก์ชัน classNames จะรองรับเสมอ แม้ว่าจะไม่มีการระบุออปชั่นใด ๆ
ค่าเริ่มต้น | การแทนที่ด้วย CLI | การแทนที่ด้วย API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
ตำแหน่งสิ้นสุด
เริ่มรองรับใน v0.5.0.
absolute-with-indent ถูกเพิ่มใน v0.6.0.
absolute-with-indent ถูกลบออกใน v0.8.0 แต่คุณสามารถได้ผลลัพธ์เดียวกันด้วย absolute.
ค่าดีฟอลต์ถูกเปลี่ยนจาก relative เป็น absolute ใน v0.8.0
นี่คือเกณฑ์สำหรับการสิ้นสุดชื่อคลาสในแต่ละบรรทัดเมื่อแทนที่ชื่อคลาสเดิมด้วยชื่อคลาสแบบหลายบรรทัด
- ตัวอย่าง
absolute:
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
``- ตัวอย่าง
:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
ค่าเริ่มต้น | คำสั่ง CLI Override | คำสั่ง API Override
--- | --- | ---
| --ending-position | endingPosition: ""การแปลงไวยากรณ์
มีให้ใช้ครั้งแรกใน v0.7.7
หากเกิดการตัดบรรทัดในชื่อคลาสที่เขียนด้วยไวยากรณ์แบบไม่ใช่นิพจน์ จะถูกแปลงเป็นไวยากรณ์แบบนิพจน์ การแปลงนี้ไม่รองรับการจัดรูปแบบย้อนกลับ
ค่าเริ่มต้น | คำสั่ง CLI Override | คำสั่ง API Override
--- | --- | ---
| --syntax-transformation | syntaxTransformation: ความกว้างในการพิมพ์ชื่อคลาส
มีให้ใช้ครั้งแรกใน v0.10.0
กำหนดความกว้างในการพิมพ์ของชื่อคลาส หากไม่ได้ระบุค่า จะใช้ค่าของ
เป็นค่าเริ่มต้น
ค่าเริ่มต้น | คำสั่ง CLI Override | คำสั่ง API Override
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: ความสัมพันธ์ของเวอร์ชันกับปลั๊กอินที่เกี่ยวข้อง
เริ่มต้นที่
เมื่อมี minor release ด้านใดด้านหนึ่ง มีแผนจะสะท้อนการเปลี่ยนแปลงนั้นไปอีกด้านด้วยหากสามารถทำได้
ความเข้ากันได้กับปลั๊กอิน Prettier อื่นๆ
หากมีปลั๊กอิน Prettier มากกว่าหนึ่งที่สามารถจัดการข้อความที่คุณต้องการจัดรูปแบบ Prettier จะใช้เฉพาะปลั๊กอินตัวสุดท้ายเท่านั้น
ในกรณีนี้ คุณสามารถกำหนดค่าได้ดังตัวอย่างต่อไปนี้โดยเพิ่ม prettier-plugin-merge เพื่อให้ปลั๊กอินเหล่านั้นทำงานตามลำดับ
ตัวอย่าง JSON:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---