Anúncios incomodam? Ir Sem anúncios Hoje 

Lar › Geradores › Gerador de Configuração do Prettier

Compartilhar no Facebook Compartilhar no X Compartilhe no LinkedIn Compartilhar por e-mail

Link de cópia

Gerador de Configuração do Prettier

DadosDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático Lado cliente

Alternar largura Entrar/Sair da tela cheia

Formato de saída

O JSON é o mais comum; escolha um formato JS se precisar de configuração dinâmica ou de alterações por ambiente.

Opções Principais

printWidth

Comprimento da linha que o impressor irá quebrar. Valor padrão do Prettier: 80.

tabWidth

Número de espaços por nível de indentação. Valor padrão do Prettier: 2.

useTabs — indentar com tabs em vez de espaços

semi — imprimir pontos e vírgulas no final de declarações

singleQuote — usar aspas simples em vez de aspas duplas

quoteProps

Alterar quando os nomes das propriedades de objetos são colocados entre aspas.

trailingComma

Imprimir vírgulas no final em construções multilinhas.

bracketSpacing — espaços dentro de literais de objetos { foo }

bracketSameLine — manter > de elementos multilinhas de HTML/JSX na última linha

arrowParens

Parênteses ao redor de um único parâmetro de função de seta.

endOfLine

Estilo de terminador de linha para arquivos escritos.

JSX

jsxSingleQuote — usar aspas simples nos atributos do JSX

singleAttributePerLine — um atributo HTML/JSX por linha

Markdown & HTML

proseWrap

Como o Prettier trata o wrapping de texto em Markdown.

htmlWhitespaceSensitivity

Como o Prettier trata o espaço em branco em HTML.

Sobrescritas por Linguagem

Adicione um overrides bloco para ajustar configurações para tipos específicos de arquivos.

Markdown (*.md, *.mdx) — proseWrap: sempre, printWidth: 100

HTML (*.html) — printWidth: 120, singleAttributePerLine: true

YAML (*.yml, *.yaml) — tabWidth: 2, singleQuote: false

JSON (*.json) — printWidth: 200, trailingComma: none

Opções de Saída

Incluir comentário de cabeçalho descritivo (apenas para formatos JS e YAML)

Também gerar um modelo .prettierignore

SAÍDA

Lado cliente

Alternar largura Entrar/Sair da tela cheia

Configuração gerada

.prettierignore

ANUNCIADO Remover?

Relacionadas

Algumas outras ferramentas semelhantes a Gerador de Configuração do Prettier que você pode achar útil.

Calculadora de Média de Custo em Dólar (DCA)

DadosDesenvolvedor

Gerador de Configuração do ESLint

DadosDesenvolvedor

Taxa de Abandono & Calculadora de Retenção

DadosDesenvolvedor

Guia

Gerador de Configuração do Prettier

Construa uma configuração correta do Prettier sem procurar nas documentações. Escolha cada opção de formatação de uma lista, adicione sobrescritas por linguagem para Markdown, HTML, YAML e JSON, e exporte o resultado como .prettierrc.json, .prettierrc.yaml, um módulo ES, um módulo CommonJS ou uma chave pronta para colar "prettier" para package.json. Um modelo correspondente é gerado ao lado dele para que seu repositório esteja pronto para formatação na primeira commit. .prettierignore — JSON para o arquivo mais simples e compartilhável, YAML para edição amigável para humanos, um módulo JS quando você precisa de lógica condicional, ou a chave no package.json quando você quer um arquivo menos no repositório.

Como usar

Escolha um formato de saída opções principais
Defina o : largura da linha, largura da tabulação, pontos e vírgulas, estilo de aspas, vírgulas no final, espaços dentro de colchetes, parênteses em funções de seta e estilo do final da linha.Ajuste o
bloco se seu códigobase usa React, e o JSX Markdown & HTML bloco para o wrapping de texto e tratamento do espaço em branco. Ative qualquer
sobrescrita por linguagem para aplicar regras diferentes para tipos específicos de arquivos — por exemplo, uma largura maior para JSON, ou um atributo por linha para HTML. printWidth no arquivo gerado. Coloque-o na raiz do seu projeto e execute
Clique cópia de ou Download Todas as opções oficiais do Prettier npx prettier --write ..

Características

— printWidth, tabWidth, useTabs, semi, singleQuote, quoteProps, jsxSingleQuote, trailingComma, bracketSpacing, bracketSameLine, arrowParens, endOfLine, proseWrap, htmlWhitespaceSensitivity, singleAttributePerLine. Cinco formatos de saída
— JSON, YAML, ESM (.mjs), CommonJS (.cjs) e um fragmento do package.json. Blocos de sobrescrita por linguagem
para Markdown, HTML, YAML e JSON com padrões sensatos que podem ser copiados diretamente ou ajustados. Modelo gerado automaticamente
que cobre saídas de build, dependências, arquivos de bloqueio, ativos minificados e pastas comuns de cache de framework. .prettierignore JSDoc
anotação @type nos outputs de módulos JS para que editores sejam ativados com autocompletar e verificação de tipos. — cada alteração atualiza a saída imediatamente, permitindo que você compare rapidamente combinações de opções em segundos.
Pré-visualização em tempo real Por que o Prettier tem tanta pouca quantidade de opções?

 Perguntas frequentes

O objetivo de design do Prettier é acabar com debates sobre estilo ao ser opiniativo. Cada opção existente foi adicionada com relutância, porque não foi possível alcançar consenso sobre o 'padrão certo'. A equipe resiste deliberadamente a novas opções para manter configurações portáteis e revisões previsíveis entre projetos. É por isso que algo como 'espaços ao redor de palavras-chave' não é configurável — o Prettier trata as decisões de formatação como decisões comerciais, e não como expressões pessoais.

Qual a diferença entre trailingComma 'es5' e 'all'?
'es5' adiciona vírgulas no final onde o ECMAScript 5 permitia — arrays e objetos — mas não em parâmetros de funções ou chamadas. 'all' também adiciona em listas de parâmetros de função e em locais de chamada, o que é válido no ES2017+ e dá diffs mais limpos quando argumentos são adicionados ou removidos. 'all' é o padrão atual do Prettier e a escolha recomendada para qualquer projeto que almeje JavaScript moderno ou que seja transpilado.

Como o Prettier interage com o ESLint?
O Prettier trata a formatação; o ESLint trata a correção. Eles se sobrepõem em regras estilísticas como aspas e pontos e vírgulas, o que causa conflitos onde o ESLint relata problemas que o Prettier simplesmente reescreve. A solução é o eslint-config-prettier — uma configuração compartilhável que desativa todas as regras do ESLint que o Prettier já controla. Execute o Prettier primeiro para formatação, depois o ESLint para detectar erros. Plugins como eslint-plugin-prettier que executam o Prettier como uma regra de validação não são mais recomendados porque atrasam o ESLint e obscurecem as fontes de erro.

O que faz proseWrap nos arquivos Markdown?
'preserve' mantém seus quebras de linha existentes. 'always' força o wrapping do texto em printWidth, tornando o conteúdo legível em qualquer editor, o que funciona bem para repositórios de documentação. 'never' une os parágrafos quebrados em uma única linha, o que é a escolha correta para arquivos que serão editados por ferramentas ou renderizados em ambientes onde quebras de linha seriam mostradas como parágrafos separados. O padrão é 'preserve' porque quebras de linha em Markdown podem mudar o significado em algumas versões.

Quando devo usar uma configuração em JS em vez de JSON?
Use JSON quando a configuração for estática e compartilhada entre a equipe — é a forma mais simples e portátil. Use uma configuração em JS quando você precisar importar regras compartilhadas de um pacote, trocar opções com base em uma variável de ambiente, derivar sobrescritas a partir de listas globais no código ou usar tipos TypeScript via importação do JSDoc @type. Configurações em JS são mais lentas para carregar porque o Prettier precisa executá-las, mas o custo é invisível nas velocidades de salvamento do editor.

Gerador de Configuração do Prettier 1