🌐 Ngôn ngữ
prettier-plugin-classnames
Một plugin Prettier giúp tự động xuống dòng các tên class dài dựa trên tùy chọn printWidth.
Cài đặt[^1]
npm install -D prettier prettier-plugin-classnames[^1]: Nếu phiên bản prettier-plugin-classnames của bạn nhỏ hơn 0.4.0, bạn cũng cần cài đặt @prettier/sync.
Cấu hình
Ví dụ JSON:
{
"plugins": ["prettier-plugin-classnames"]
}Ví dụ JS (Module CommonJS):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};Ví dụ JS (ES module):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Tùy chọn
Thuộc tính Tùy chỉnh
Danh sách các thuộc tính của tên lớp bao quanh.
Các thuộc tính class và className luôn được hỗ trợ, ngay cả khi không có tùy chọn nào được chỉ định.
Mặc định | Ghi đè CLI | Ghi đè API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Hàm Tùy chỉnh
Danh sách các hàm của tên lớp bao quanh.
Hàm classNames luôn được hỗ trợ, ngay cả khi không có tùy chọn nào được chỉ định.
Mặc định | Ghi đè CLI | Ghi đè API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Vị trí Kết thúc
Lần đầu xuất hiện ở v0.5.0.
absolute-with-indent được thêm vào trong v0.6.0.
absolute-with-indent đã bị loại bỏ ở v0.8.0, nhưng bạn có thể nhận được đầu ra tương tự với absolute.
Giá trị mặc định đã thay đổi từ relative sang absolute trong v0.8.0.
Đây là tiêu chí để kết thúc tên lớp trên mỗi dòng khi thay thế tên lớp gốc bằng tên lớp nhiều dòng.
- ví dụ về
absolute:
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
``- ví dụ về
:
`
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
`
Mặc định | Ghi đè CLI | Ghi đè API
--- | --- | ---
| --ending-position | endingPosition: ""Biến đổi cú pháp
Lần đầu tiên có mặt ở v0.7.7.
Nếu một dòng bị ngắt trong tên lớp được viết ở cú pháp không phải biểu thức, nó sẽ được chuyển thành cú pháp biểu thức. Sự biến đổi này không hỗ trợ định dạng đảo ngược.
Mặc định | Ghi đè CLI | Ghi đè API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Tương quan phiên bản với các plugin cùng loại
Bắt đầu từ
, khi có một bản phát hành nhỏ ở một phía, tôi dự định sẽ phản ánh thay đổi đó sang phía còn lại nếu có thể.
Tương thích với các plugin Prettier khác
Nếu có nhiều hơn một plugin Prettier có thể xử lý đoạn văn bản bạn muốn định dạng, Prettier sẽ chỉ sử dụng plugin cuối cùng trong số đó.
Trong trường hợp này, bạn có thể cấu hình như sau bằng cách thêm prettier-plugin-merge để áp dụng các plugin đó tuần tự.
Ví dụ JSON:
--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---