🌐 語言
prettier-plugin-classnames
一個 Prettier 外掛，可依據 printWidth 選項自動換行冗長的 class 名稱。
安裝[^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 模組）：
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 取得相同輸出。
預設值在 v0.8.0 從 relative 改為 absolute。
這是當用多行類名取代原本類名時，每行類名的結尾判斷標準。
absolute範例：
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
``
範例：
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
預設值 | CLI 覆蓋 | API 覆蓋
--- | --- | ---
| --ending-position | endingPosition: ""語法轉換
首次於 v0.7.7 提供。
如果在非表達式語法撰寫的類名發生換行，將會轉換為表達式語法。此轉換不支援可逆格式化。
預設值 | CLI 覆蓋 | API 覆蓋
--- | --- | ---
| --syntax-transformation | syntaxTransformation: 類名列印寬度
首次於 v0.10.0 提供。
指定類名的列印寬度。若未提供數值，則預設使用
的值。
預設值 | CLI 覆蓋 | API 覆蓋
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: 與兄弟插件的版本相關性
從
開始，當其中一端有次版本釋出時，我會盡可能在另一端反映該變更。
與其他 Prettier 插件的相容性
若有多個 Prettier 插件可以處理您要格式化的文字，Prettier 只會使用這些插件中的最後一個。
在此情況下，您可以透過新增 prettier-plugin-merge 來依序套用這些插件，配置方式如下。
JSON 範例：
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---