🌐 言語
prettier-plugin-classnames
printWidth オプションに基づき冗長なクラス名を折り返す Prettier プラグインです。
インストール方法[^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 ---