🌐 言語
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',
};オプション
カスタム属性
囲むクラス名の属性のリスト。
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=50
export function Callout({ children }) {
return (
{children}
);
}
``
の例:
`
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
`
デフォルト | CLI オーバーライド | API オーバーライド
--- | --- | ---
| --ending-position | endingPosition: ""構文変換
v0.7.7で初めて利用可能。
非式構文で記述されたクラス名に改行が発生した場合、それは式構文に変換されます。この変換は可逆的なフォーマットをサポートしません。
デフォルト | CLI オーバーライド | API オーバーライド
--- | --- | ---
| --syntax-transformation | syntaxTransformation: 同期プラグインとのバージョン相関
以降、片方でマイナーリリースがあった場合、可能な限りもう片方にも反映する予定です。
他のPrettierプラグインとの互換性
複数のPrettierプラグインがフォーマット対象のテキストを処理できる場合、Prettierはその中の最後のプラグインのみを使用します。
この場合、prettier-plugin-mergeを追加して、これらのプラグインを順次適用するように設定できます。
JSON例:
--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---