🌐 Langue
prettier-plugin-classnames
Un plugin Prettier qui encapsule les noms de classes verbeux selon l’option printWidth.
Installation[^1]
npm install -D prettier prettier-plugin-classnames[^1] : Si votre version de prettier-plugin-classnames est inférieure à 0.4.0, vous devrez également installer @prettier/sync.
Configuration
Exemple JSON :
{
"plugins": ["prettier-plugin-classnames"]
}Exemple JS (module CommonJS) :
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};Exemple JS (module ES) :
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Substitution Markdown/MDX
Ce plugin ne prend pas en charge Markdown et MDX, mais si ce plugin prend en charge un langage à l'intérieur des blocs de code (par exemple, Vue), un formatage non souhaité peut se produire à l'intérieur des blocs de code.
Pour éviter un formatage non souhaité, vous pouvez utiliser des substitutions de configuration pour Markdown et MDX.
Exemple JSON :
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}Options
Attributs personnalisés
Liste des attributs qui englobent les noms de classe.
Les attributs class et className sont toujours pris en charge, même si aucune option n'est spécifiée.
Par défaut | Remplacement CLI | Remplacement API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Fonctions personnalisées
Liste des fonctions qui englobent les noms de classe.
La fonction classNames est toujours prise en charge, même si aucune option n'est spécifiée.
Par défaut | Remplacement CLI | Remplacement API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Position de fin
Disponible pour la première fois en v0.5.0.
absolute-with-indent a été ajouté en v0.6.0.
absolute-with-indent a été supprimé en v0.8.0, mais vous pouvez obtenir la même sortie avec absolute.
La valeur par défaut est passée de relative à absolute en v0.8.0.
Ceci est le critère pour terminer le nom de classe sur chaque ligne lors du remplacement du nom de classe original par un nom de classe multi-lignes.
- Exemple
absolute:
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
``- Exemple
:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
Par défaut | Remplacement CLI | Remplacement API
--- | --- | ---
| --ending-position | endingPosition: ""Transformation de la syntaxe
Disponible à partir de la v0.7.7.
Si un retour à la ligne se produit dans un nom de classe écrit en syntaxe non-expression, il est transformé en syntaxe d'expression. Cette transformation ne prend pas en charge le formatage réversible.
Par défaut | Remplacement CLI | Remplacement API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Largeur d’impression des noms de classes
Disponible à partir de la v0.10.0.
Spécifiez la largeur d’impression du nom de classe. Si aucune valeur n’est fournie, la valeur de
est utilisée par défaut.
Par défaut | Remplacement CLI | Remplacement API
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: Corrélation de versions avec les plugins frères
À partir de la version
, lorsqu’il y a une version mineure d’un côté, je prévois de répercuter cette modification de l’autre côté également si possible.
Compatibilité avec d’autres plugins Prettier
Si plusieurs plugins Prettier peuvent gérer le texte que vous souhaitez formater, Prettier n’utilisera que le dernier de ces plugins.
Dans ce cas, vous pouvez le configurer comme suit en ajoutant prettier-plugin-merge pour appliquer ces plugins de manière séquentielle.
Exemple JSON :
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---