Web Analytics

prettier-plugin-classnames

⭐ 175 stars Italian by ony3000

🌐 Lingua

prettier-plugin-classnames

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

Un caso d'uso per questo plugin.

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.

  --------------------------------------------------| 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.

Correlazione delle versioni.

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 ---