prettier eslint

mais bonito-eslint

Formata seu javascript usando prettier seguido por eslint --fix

O problema

O recurso fix do eslint é ótimo e pode ser um formato automático/consertar grande parte do seu código de acordo com a sua configuração ESLint. prettier é um formatador automático mais poderoso. Uma das coisas legais sobre mais bonita é o quão opinativo é. Infelizmente, não é o suficiente e/ou algumas opiniões diferem das minhas. Então, depois de formatos mais bonitos do código, começo a obter erros de linha.

Esta solução

Isso formata seu código por meio prettier e depois passa o resultado disso para eslint --fix . Dessa forma, você pode obter os benefícios dos recursos de formatação superior da prettier , mas também se beneficiar dos recursos de configuração do eslint .

Para arquivos com uma extensão de .css , .less , .scss ou .json , isso só é prettier já que eslint não pode processar.

Instalação

Este módulo é distribuído via NPM, empacotado com o nó e deve ser instalado como uma das devDependencies do seu projeto:

 npm install --save-dev prettier-eslint

Uso

Exemplo

 const format = require ( 'prettier-eslint' ) ;

// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar' ;

const options = {
  text : sourceCode ,
  eslintConfig : {
    parserOptions : {
      ecmaVersion : 7
    } ,
    rules : {
      semi : [ 'error' , 'never' ]
    }
  } ,
  prettierOptions : {
    bracketSpacing : true
  } ,
  fallbackPrettierOptions : {
    singleQuote : false
  }
} ;

const formatted = await format ( options ) ;

// notice no semicolon in the formatted text
formatted ; // const { foo } = bar

opções

texto (string)

O código -fonte para formatar.

filepath (? string)

O caminho do arquivo que está sendo formatado pode ser usado para substituir eslintConfig (o ESLint será usado para encontrar a configuração relevante para o arquivo).

EslintConfig (? Objeto)

A configuração a ser usada para formatar com ESLint. Pode ser substituído com filePath .

Prettieroptions (? Objeto)

As opções para passar para formatar com prettier . Se não for fornecido, prettier-eslint tentará criar as opções com base no eslintConfig (seja fornecido ou derivado via filePath ). Você também pode fornecer algumas das opções e ter as opções restantes derivadas através da sua configuração ESLINT. Isso é útil para opções como parser .

Nota: Essas opções substituem a configuração ESLint. Se você deseja que as opções de fallback sejam usadas apenas no caso de a regra não ser deduzida do ESLint, consulte "FallbackPrettierOptions" abaixo.

FallbackPrettierOptions (? Objeto)

As opções para passar para a formatação com prettier se prettier-eslint não conseguir criar as opções com base no eslintConfig (seja fornecido ou derivado via filePath ). Essas opções serão usadas apenas no caso de que a regra de ESLint correspondente não pode ser encontrada e a opção mais bonita não foi definida manualmente nas prettierOptions . Se o fallback não for dado, prettier-eslint usará apenas o valor prettier padrão nesse cenário.

Loglevel (? Enum: ['Trace', 'Debug', 'Info', 'Warn', 'Error', 'Silent']))

prettier-eslint faz um pouco de log, se você quiser. Passe isso para definir o número de logs que você deseja ver. O padrão é process.env.LOG_LEVEL || 'warn' .

EslintPath (? String)

Por padrão, prettier-eslint tentará encontrar o módulo eslint (e prettier ) relevante com base no filePath . Se não conseguir encontrar um, usará a versão que prettier-eslint instalou localmente. Se você deseja especificar um caminho para o módulo eslint que gostaria de ter um uso prettier-eslint , poderá fornecer o caminho completo com a opção eslintPath .

PrettierPath (? String)

Isso é basicamente o mesmo que eslintPath , exceto pelo módulo prettier .

Prettierlast (? Boolean)

Por padrão, prettier-eslint será mais prettier e depois eslint --fix . Isso é ótimo se você quiser usar prettier , mas substitua alguns dos estilos que você não gosta de usar eslint --fix .

Uma abordagem alternativa é usar ferramentas diferentes para preocupações diferentes. Se você fornecer prettierLast: true , ele será executado eslint --fix primeiro, depois prettier . Isso permite que você use eslint para procurar bugs e/ou práticas ruins e use prettier para aplicar o estilo de código.

joga

prettier-eslint propagará apenas erros de análise quando o prettier ou eslint falhar. Além de propagar os erros, ele também registrará uma mensagem específica, indicando o que estava fazendo no momento da falha.

NOTA: format não mostrará nenhuma mensagem sobre regras quebradas no prettier ou eslint .

Captura de mensagens ESLint

 const { analyze } = require ( "prettier-eslint" ) ;

const text = 'var x = 0;' ;
const result = await analyze ( {
  text ,
  eslintConfig : {
    rules : { 'no-var' : 'error' }
  }
} )    
console . log ( result . messages ) ;

produz no console

 [{
  ruleId: 'no-var',
  severity: 2,
  message: 'Unexpected var, use let or const instead.',
  line: 1,
  column: 1,
  nodeType: 'VariableDeclaration',
  messageId: 'unexpectedVar',
  endLine: 1,
  endColumn: 11
}]

A analyze de exportação adicional é idêntica ao format , exceto que ele retorna um objeto simples com output de propriedades, fornecendo a sequência exata que o format retornaria e messages que fornecem a matriz de descrições de mensagens (com a estrutura mostrada acima) produzida pela análise eslint do código. Você pode usar analyze no lugar do format , se quiser executar a formatação, mas também capturar quaisquer erros que eslint possa perceber.

Detalhes técnicos

Código ➡️ Prettier ➡️ Eslint -Fix ➡️ Código formatado

Inferindo as prettroopções via EslintConfig

O eslintConfig e prettierOptions podem ser fornecidos como um argumento. Se o eslintConfig não for fornecido, então prettier-eslint os procurará com base no fileName (se nenhum fileName for fornecido, ele usará process.cwd() ). Uma vez que prettier-eslint encontra o eslintConfig , as prettierOptions são inferidas a partir do eslintConfig . Se algumas das prettierOptions já tiverem sido fornecidas, então prettier-eslint apenas inferirá as opções restantes. Essa inferência acontece no src/utils.js .

Uma coisa importante a ser observada sobre essa inferência é que ela pode não suportar sua configuração Eslint específica. Portanto, você deseja verificar src/utils.js para ver como a inferência é feita para cada opção (quais regras são referenciadas etc.) e faça uma solicitação de tração se sua configuração for suportada.

Os padrões se você tiver todas as regras de ESLint relevantes desativadas (ou tiverem o ESLint desativado inteiramente via /* eslint-disable */ então opções mais bonitas voltarão aos padrões prettier :

 {
  printWidth : 80 ,
  tabWidth : 2 ,
  singleQuote : false ,
  trailingComma : 'none' ,
  bracketSpacing : true ,
  semi : true ,
  useTabs : false ,
  // prettier-eslint doesn't currently support
  // inferring these two (Pull Requests welcome):
  parser : 'babylon' ,
  bracketSameLine : false ,
} 

Solução de problemas

questões de depuração

Há muitas explorações disponíveis com prettier-eslint . Ao depurar, você pode usar um dos logLevel para ter uma idéia melhor do que está acontecendo. Se você estiver usando prettier-eslint-cli , poderá usar o --log-level trace , se estiver usando o plug-in do Atom, poderá abrir as ferramentas do desenvolvedor e entrar: process.env.LOG_LEVEL = 'trace' no console e execute o formato. Você verá um monte de toras que devem ajudá-lo a determinar se o problema é prettier , eslint --fix , como prettier-eslint ingere suas opções prettier ou qualquer outra coisa. Você será solicitado a fazer isso antes de apresentar problemas, então, por favor, faça?

NOTA: Quando você está fazendo isso, é recomendável que você execute isso apenas em um único arquivo, porque há muitos troncos :)

Eslint-Disisable-line

Enquanto usa // eslint-disable-line , às vezes você pode obter erros de linha após o processo ter sido processado por este módulo. Isso ocorre porque muda prettier :

 // prettier-ignore
if ( x ) { // eslint-disable-line
}

Para isso:

 if ( x ) {
  // eslint-disable-line
}

E o eslint --fix não o alterará de volta. Você pode notar que // eslint-disable-line mudou para uma nova linha. Para contornar esse problema, você pode usar //eslint-disable-next-line em vez de // eslint-disable-line como este:

 // eslint-disable-next-line
if ( x ) {
} 

Inspiração

• prettier
• eslint

Outras soluções

Nenhum que eu conheça. Sinta -se à vontade para registrar um PR se você souber de outras soluções.

Relacionado

• interface de linha de comando prettier-eslint-cli interface da linha de comando
• Plugin prettier-atom - Atom (Verifique a caixa de seleção "Eslint Integration" nas configurações)
• vs-code-prettier-eslint -plugin de código do visual estúdio
• eslint-plugin-prettier -Eslint Plugin. Enquanto o Prettttier-Eslint usa eslint --fix para alterar a saída de prettier , o Eslint-Plugin-Supretier mantém a saída prettier como é e o integra com o fluxo de trabalho da ESLint regular.
• prettier-eslint-webpack-plugin webpack-plugin de webpack

Colaboradores

Obrigado a essas pessoas (key emoji):

Kent C. Dodds ? ️	Gyandeep Singh ?	Igor Pnev ?	Benjamin Tan ?	Eric McCormick ️	Simon Lydell	Tom McKearney
Patrik Åkerstrand	Lochlan Bunn	Daniël Terwiel ? ?	Robin Malfait ?	Michael McDermott	Adam Stankiewicz	Stephen John Sorensen
Brian di Palma ?	Rob Wise	Patryk ervilhas ? ️	Thijs Koerselman ? ️	Enrique Caballero ?	Łukasz Moroz ? ️	Simon Fridlund ? ? ? ? ? ? ️ ? ✅
Oliver Joseph Ash ?	Mark Palfreeman	Alex Taylor ️	Xianming Zhong ️	Lewis Liu	Hamza Hamidi ? ? ? ?	Rajiv Ranjan Singh
Igor ?	Rebecca Vest	Chris Bobbe ?	Jounqin ? ? ? ? ? ? ? ️ ?	Jonathan Rehm	Glen Whitney

Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas!

LICENÇA

Mit