prettier-plugin-classnames
Un plugin Prettier che suddivide i nomi di classi troppo lunghi in base all'opzione printWidth.

Installazione[^1]
npm install -D prettier prettier-plugin-classnames[^1]: Se la tua versione di prettier-plugin-classnames è inferiore alla 0.4.0, sarà necessario installare anche @prettier/sync.
Configurazione
Esempio JSON:
{
"plugins": ["prettier-plugin-classnames"]
}Esempio JS (modulo CommonJS):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};Esempio JS (modulo ES):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Opzioni
Attributi Personalizzati
Elenco degli attributi che racchiudono i nomi delle classi.
Gli attributi class e className sono sempre supportati, anche se non vengono specificate opzioni.
Default | Sostituzione CLI | Sostituzione API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Funzioni Personalizzate
Elenco delle funzioni che racchiudono i nomi delle classi.
La funzione classNames è sempre supportata, anche se non vengono specificate opzioni.
Default | Sostituzione CLI | Sostituzione API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Posizione Finale
Disponibile per la prima volta dalla versione v0.5.0.
absolute-with-indent è stato aggiunto nella versione v0.6.0.
absolute-with-indent è stato rimosso nella versione v0.8.0, ma puoi ottenere lo stesso risultato con absolute.
Il valore predefinito è cambiato da relative a absolute nella versione v0.8.0.
Questo è il criterio per terminare il nome della classe su ogni riga quando si sostituisce il nome della classe originale con un nome classe su più righe.
- Esempio di
absolute:
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
``- esempio di
relative:
`
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
`
Default | CLI Override | API Override
--- | --- | ---
"absolute" | --ending-position | endingPosition: ""Trasformazione della Sintassi
Disponibile per la prima volta dalla versione v0.7.7.
Se si verifica un'interruzione di riga in un nome di classe scritto in sintassi non espressione, questo viene trasformato in sintassi espressione. Questa trasformazione non supporta la formattazione reversibile.
Default | CLI Override | API Override
--- | --- | ---
false | --syntax-transformation | syntaxTransformation: Correlazione delle versioni con plugin correlati
A partire dalla versione
0.6.0, quando c'è una release minore da una parte, ho intenzione di riflettere tale cambiamento anche dall'altra parte, se possibile.
Compatibilità con altri plugin Prettier
Se più di un plugin Prettier è in grado di gestire il testo che desideri formattare, Prettier utilizzerà solo l'ultimo di questi plugin.
In questo caso, puoi configurarlo come segue aggiungendo prettier-plugin-merge per applicare quei plugin in sequenza.
Esempio JSON:
json
{
"plugins": [
"prettier-plugin-tailwindcss",
"prettier-plugin-classnames",
"prettier-plugin-merge"
]
}
``--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---