🌐 Idioma
prettier-plugin-classnames
Un complemento para Prettier que ajusta nombres de clases verbosos según la opción printWidth.
Instalación[^1]
npm install -D prettier prettier-plugin-classnames[^1]: Si su versión de prettier-plugin-classnames es inferior a 0.4.0, también necesitará instalar @prettier/sync.
Configuración
Ejemplo en JSON:
{
"plugins": ["prettier-plugin-classnames"]
}Ejemplo de JS (módulo CommonJS):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};Ejemplo JS (módulo ES):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Anulación de Markdown/MDX
Este complemento no admite Markdown ni MDX, pero si este complemento admite un lenguaje dentro de los bloques de código (por ejemplo, Vue), puede producirse un formato no deseado dentro de los bloques de código.
Para evitar un formato no deseado, puede usar anulaciones de configuración para Markdown y MDX.
Ejemplo de JSON:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}Opciones
Atributos Personalizados
Lista de atributos que encierran nombres de clase.
Los atributos class y className siempre son compatibles, incluso si no se especifican opciones.
Predeterminado | Anulación CLI | Anulación API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Funciones Personalizadas
Lista de funciones que encierran nombres de clase.
La función classNames siempre es compatible, incluso si no se especifican opciones.
Predeterminado | Anulación CLI | Anulación API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Posición de Finalización
Disponible por primera vez en v0.5.0.
absolute-with-indent se agregó en v0.6.0.
absolute-with-indent se eliminó en v0.8.0, pero puede obtener la misma salida con absolute.
El valor predeterminado cambió de relative a absolute en v0.8.0.
Este es el criterio para terminar el nombre de clase en cada línea al reemplazar el nombre de clase original con un nombre de clase de varias líneas.
- Ejemplo de
absolute:
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
``- Ejemplo de
:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
Predeterminado | Anulación CLI | Anulación API
--- | --- | ---
| --ending-position | endingPosition: ""Transformación de Sintaxis
Disponible por primera vez en la v0.7.7.
Si ocurre un salto de línea en un nombre de clase escrito en sintaxis no expresiva, se transforma a sintaxis de expresión. Esta transformación no admite formato reversible.
Predeterminado | Anulación CLI | Anulación API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Ancho de Impresión de Classnames
Disponible por primera vez en la v0.10.0.
Especifica el ancho de impresión del nombre de la clase. Si no se proporciona un valor, se utiliza el valor de
como predeterminado.
Predeterminado | Anulación CLI | Anulación API
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: Correlación de versión con plugins hermanos
A partir de la
, cuando haya una versión menor en uno de los lados, planeo reflejar ese cambio en el otro lado también si es posible.
Compatibilidad con otros plugins de Prettier
Si más de un plugin de Prettier puede manejar el texto que desea formatear, Prettier solo usará el último de esos plugins.
En este caso, puede configurarlo de la siguiente manera agregando prettier-plugin-merge para aplicar esos plugins secuencialmente.
Ejemplo de JSON:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---