🌐 Idioma
prettier-plugin-classnames
Um plugin do Prettier que quebra nomes de classes extensos 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',
};Substituição de Markdown/MDX
Este plugin não suporta Markdown e MDX, mas se este plugin suportar um idioma dentro de blocos de código (por exemplo, Vue), pode ocorrer formatação indesejada dentro dos blocos de código.
Para evitar formatação indesejada, você pode usar substituições de configuração para Markdown e MDX.
Exemplo de JSON:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}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=60
export function Callout({ children }) {
return (
{children}
);
}
``- Exemplo de
:
`
------------------------------------------------------------| printWidth=60
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. Essa transformação não suporta formatação reversível.
Padrão | Substituição CLI | Substituição API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Largura de Impressão dos Classnames
Disponível pela primeira vez na v0.10.0.
Especifica a largura de impressão do nome da classe. Se nenhum valor for fornecido, o valor de
é usado como padrão.
Padrão | Substituição CLI | Substituição API
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: Correlação de versão com plugins irmãos
A partir da versão
, quando houver um lançamento secundário de um lado, planejo refletir essa alteração do outro lado também, se possível.
Compatibilidade com outros plugins do Prettier
Se mais de um plugin Prettier puder lidar com 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 de JSON:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---