🌐 Idioma
prettier-plugin-classnames
Um plugin do Prettier que quebra nomes de classes longos com base na opção printWidth.
Instalação[^1]
npm install -D prettier prettier-plugin-classnames[^1]: Se sua versão do prettier-plugin-classnames for inferior a 0.4.0, você também precisará instalar o @prettier/sync.
Configuração
Exemplo de JSON:
{
"plugins": ["prettier-plugin-classnames"]
}Exemplo de JS (módulo CommonJS):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};Exemplo JS (módulo ES):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Opções
Atributos Personalizados
Lista de atributos que envolvem nomes de classe.
Os atributos class e className são sempre suportados, mesmo que nenhuma opção seja especificada.
Padrão | Substituição CLI | Substituição API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Funções Personalizadas
Lista de funções que envolvem nomes de classe.
A função classNames é sempre suportada, mesmo que nenhuma opção seja especificada.
Padrão | Substituição CLI | Substituição API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Posição Final
Disponível pela primeira vez na v0.5.0.
absolute-with-indent foi adicionada na v0.6.0.
absolute-with-indent foi removida na v0.8.0, mas você pode obter o mesmo resultado com absolute.
O valor padrão mudou de relative para absolute na v0.8.0.
Este é o critério para terminar o nome da classe em cada linha ao substituir o nome de classe original por um nome de classe multilinha.
- Exemplo de
absolute:
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
``- Exemplo de
:
`
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
`
Padrão | Substituição CLI | Substituição API
--- | --- | ---
| --ending-position | endingPosition: ""Transformação de Sintaxe
Disponível pela primeira vez na v0.7.7.
Se ocorrer quebra de linha em um nome de classe escrito em sintaxe não-expressão, ele é transformado em sintaxe de expressão. Esta transformação não suporta formatação reversível.
Padrão | Substituição CLI | Substituição API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Correlação de versões com plugins irmãos
A partir da versão
, quando houver um lançamento secundário de um lado, pretendo refletir essa alteração no outro lado também, se possível.
Compatibilidade com outros plugins do Prettier
Se mais de um plugin do Prettier puder processar o texto que você deseja formatar, o Prettier usará apenas o último desses plugins.
Neste caso, você pode configurar da seguinte forma, adicionando o prettier-plugin-merge para aplicar esses plugins sequencialmente.
Exemplo em JSON:
--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---