🌐 Idioma
prettier-plugin-classnames
Un plugin de Prettier que ajusta los nombres de clase extensos 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',
};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=50
export function Callout({ children }) {
return (
{children}
);
}
``- Ejemplo de
:
`
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
`
Por defecto | Anulación CLI | Anulación API
--- | --- | ---
| --ending-position | endingPosition: ""Transformación de sintaxis
Disponible por primera vez en v0.7.7.
Si ocurre un salto de línea en un nombre de clase escrito en sintaxis no expresión, se transforma en sintaxis de expresión. Esta transformación no soporta un formato reversible.
Por defecto | Anulación CLI | Anulación API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Correlación de versiones con plugins hermanos
A partir de
, cuando hay una versión menor en un lado, 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 quieres formatear, Prettier usará solo el último de esos plugins.
En este caso, puedes configurarlo como sigue añadiendo prettier-plugin-merge para aplicar esos plugins secuencialmente.
Ejemplo JSON:
--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---