🌐 Lingua
prettier-plugin-classnames
Un plugin di Prettier che suddivide nomi di classi verbosi 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',
};Override Markdown/MDX
Questo plugin non supporta Markdown e MDX, ma se questo plugin supporta un linguaggio all'interno dei blocchi di codice (ad es. Vue), potrebbe verificarsi una formattazione indesiderata all'interno dei blocchi di codice.
Per evitare formattazioni indesiderate, puoi utilizzare delle impostazioni di override per Markdown e MDX.
Esempio JSON:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}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=60
export function Callout({ children }) {
return (
{children}
);
}
``- esempio di
:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
Predefinito | Override CLI | Override API
--- | --- | ---
| --ending-position | endingPosition: ""Trasformazione della Sintassi
Disponibile per la prima volta nella versione v0.7.7.
Se si verifica un ritorno a capo in un nome di classe scritto in sintassi non-espressione, esso viene trasformato in sintassi espressione. Questa trasformazione non supporta la formattazione reversibile.
Predefinito | Override CLI | Override API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Larghezza di Stampa dei Nomi Classe
Disponibile per la prima volta nella versione v0.10.0.
Specifica la larghezza di stampa del nome della classe. Se non viene fornito alcun valore, viene utilizzato come predefinito il valore di
.
Predefinito | Override CLI | Override API
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: Correlazione della versione con plugin correlati
A partire dalla versione
, quando c’è un rilascio minore da una parte, intendo riflettere tale modifica anche dall’altra parte se possibile.
Compatibilità con altri plugin Prettier
Se più di un plugin Prettier può gestire il testo che vuoi 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:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---