🌐 Ngôn ngữ

prettier-plugin-classnames

Một plugin Prettier giúp ngắt dòng 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',
};

Ghi đè Markdown/MDX

Plugin này không hỗ trợ Markdown và MDX, nhưng nếu plugin này hỗ trợ một ngôn ngữ bên trong các khối mã (ví dụ: Vue), định dạng không mong muốn có thể xảy ra bên trong các khối mã.

Để ngăn chặn định dạng không mong muốn, bạn có thể sử dụng các cấu hình ghi đè cho Markdown và MDX.

Ví dụ JSON:

{
  "plugins": ["prettier-plugin-classnames"],
  "customFunctions": ["clsx"],
  "overrides": [
    {
      "files": [".md", ".mdx"],
      "options": {
        "plugins": []
      }
    }
  ]
}

Tùy chọn

  ------------------------------------------------------------| printWidth=60
  export function Callout({ children }) {
    return (
      
        {children}
      
    );
  }
  ``ví dụ về relative:
  
`
  ------------------------------------------------------------| printWidth=60
  export function Callout({ children }) {
    return (
      
        {children}
      
    );
  }
  `
Mặc định | Ghi đè CLI  | Ghi đè API 
--- | --- | ---
"absolute" | --ending-position  | endingPosition: ""
Biến đổi cú pháp
Có mặt lần đầu trong v0.7.7.
Nếu có hiện tượng ngắt dòng trong tên lớp viết theo cú pháp không phải biểu thức, nó sẽ được chuyển đổi sang cú pháp biểu thức. Việc chuyển đổi này không hỗ trợ định dạng đảo ngược.

Mặc định | Ghi đè CLI  | Ghi đè API 
--- | --- | ---
false | --syntax-transformation | syntaxTransformation: 
Độ rộng in tên lớp
Có mặt lần đầu trong v0.10.0.
Chỉ định độ rộng in của tên lớp. Nếu không cung cấp giá trị, giá trị printWidth sẽ được sử dụng làm mặc định.

Mặc định | Ghi đè CLI  | Ghi đè API 
--- | --- | ---
undefined | --classnames-print-width  | classnamesPrintWidth: 
Liên hệ phiên bản với các plugin cùng loại
Bắt đầu từ 0.6.0, khi có một bản phát hành nhỏ ở một bên, tôi dự định sẽ phản ánh sự thay đổi đó ở bên 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 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 đó lần lượt.
Ví dụ JSON:

json
{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-merge"
  ]
}

Stargazers over time

--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---

prettier-plugin-classnames

prettier-plugin-classnames

Cài đặt[^1]

Cấu hình

Ghi đè Markdown/MDX

Tùy chọn

Thuộc tính Tùy chỉnh

Hàm Tùy chỉnh

Vị trí Kết thúc

`Biến đổi cú pháp`

`Độ rộng in tên lớp`

`Liên hệ phiên bản với các plugin cùng loại`

`Tương thích với các plugin Prettier khác`

Stargazers over time