Automatizar a formatação e corrigir o código JavaScript com Prettier e ESLint

Lintar e imprimir seu código JavaScript pode ajudá-lo a detectar erros antecipadamente, tornar seu código mais legível e melhorar a qualidade do código. No entanto, quando você usa um formatador (para impressão bonita) e um linter lado a lado, pode haver algum atrito. Por exemplo, o formatador pode fazer algo que o linter considera um problema. O linter pode sobrescrever as alterações de estilo do formatador. Eles podem puxar em diferentes direções.

Para usá-los juntos com sucesso, você precisa colocá-los na mesma página. Neste artigo, discutirei como você pode usar o formatador mais popular, Mais bonito , com o linter mais popular, ESLint . Mostrarei como configurá-los e usá-los juntos na linha de comando e em Visual Studio Code (VS Code) para corrija e formate seu código automaticamente.

Eu vi métodos diferentes para lidar com como usá-los juntos, mas alguns são soluções hacky por causa das limitações dos editores de código. Vou discutir os méritos e deméritos de alguns deles. Você pode decidir o que é melhor.

Primeiro, vamos ter uma ampla visão geral das regras de linting para que possamos entender qual deve ser a demarcação entre um linter e um formatador.

Regras de linting

Existem duas categorias amplas de regras de linting:

1. Regras de formatação : essas regras afetam o estilo do código. Essas regras não se preocupam com bugs. Por exemplo, a regra ‘no-mixed-spaces-and-tabs’ regra em ESLint garante que apenas tabulações ou espaços sejam usados ​​para indentação. Mais bonito tem uma opção de ‘guias’ para a mesma coisa.
2. Regras de qualidade do código : essas regras melhoram a qualidade do código e podem evitar ou detectar bugs. Por exemplo, a regra ‘no-implicit-globals’ em ESLint não permite variáveis ​​de escopo global. As colisões de nomes podem ocorrer com variáveis ​​globais criadas a partir de outros scripts. Isso geralmente leva a erros de tempo de execução ou comportamento inesperado.

O problema é que as regras do Prettier e do ESLint se sobrepõem. Preferiríamos que não!

Geralmente, queremos Mais bonito para lidar com a primeira categoria e ESLint para lidar com a segunda. Existem regras que podem ser difíceis de categorizar como uma ou outra. Não precisamos ser pedantes sobre em que categoria eles se encaixam. Nosso interesse é garantir que o Prettier ou o ESLint executem uma ação específica e não se esbarrem.

Quanto à ordem de executá-los, é melhor executar o Prettier antes do ESLInt. O mais bonito formata documentos reimprimindo todo o programa do zero de maneira consistente para eliminar qualquer possibilidade de erros de formatação. Portanto, se você deseja permitir que o ESLint participe do ato de formatação, deve executá-lo após o Prettier para evitar que as alterações sejam substituídas.

Se você não está familiarizado com ESLint e Prettier, vamos abordar como fazer a configuração inicial deles na próxima seção. Se você estiver familiarizado, pode pular para a seção Métodos .

Configuração inicial para ESLint e mais bonito

Ambos ESLint e Prettier estão disponíveis para download em npm e Fios . Para cada projeto, você desejará criar um package.json e adicioná-lo como devDependencies .

 npm install--save-dev eslint
npm install--save-dev--save-exact mais bonita

ESLint começa como uma folha em branco. Não fará nada até que você crie uma configuração com algumas regras. Coloque seu arquivo de configuração (.eslintrc. {Js, yml, json} ) em seu diretório de projeto e você estará pronto para lint. Você pode definir uma configuração global, mas o ESLint a tornou obsoleta (desencoraja). Ainda uso uma configuração global.

Com uma configuração definida, você pode executar o ESLint a partir da linha de comando conforme abaixo. Você pode ler o Guia de primeiros passos da ESLint para obter mais detalhes.

Por outro lado, Prettier tem uma configuração padrão. Ele pode ser executado sem criar seu próprio arquivo de configuração, para que você possa começar a usá-lo imediatamente. A recomendação é usar uma versão específica do Prettier em grandes projetos, caso contrário, as atualizações podem causar mudanças em muitos arquivos e adicionar ruído aos seus commits git. Você provavelmente deve usar um arquivo .prettierignore para ignorar coisas que não devem ser formatadas também. Você pode ler o guia de instalação de Prettier para obter mais informações.

Um package.json típico será parecido com o que tenho a seguir. Eu direciono os arquivos nas pastas src e test para meus scripts npm. Eu prefiro pular os arquivos .eslintignore e .prettierignore se possível-mais simples é preferível!

 { "nome":"projeto básico", "versão":"1.0.0", "main":"index.js", "scripts": { "lint":"npx eslint src test", "lint: fix":"npm run lint---fix", "mais bonita":"teste src npx mais bonita--check", "mais bonita: fix":"npm run mais bonita---write", }, "autor":"rob o'leary", "licença":"ISC", "devDependencies": { "eslint":"^ 7.25.0", "mais bonito":"^ 2.2.1" }
}

Todos os principais editores de código têm extensões para ESLint e Prettier. Para o código do VS, as extensões oficiais são Mais bonito-formatador de código e ESLint .

Vários métodos para criar e imprimir seu código

Eu recomendaria o primeiro método abaixo. É o mais limpo e eficiente.

1. Remova as regras conflitantes e execute em série

É fácil desativar as regras que entram em conflito com o Prettier no ESLint usando as seguintes configurações:

• eslint-config-prettier para JavaScript
• tslint-config-mais bonita se você usa TypeScript

Primeiro, instale a configuração. Isso é apenas para JavaScript:

 $ npm install--save-dev eslint-config-mais bonita

Em seguida, anexe esse nome de configuração ao array extends em seu array local .stylelintrc. * Arquivo de configuração ESLint. Certifique-se de colocar a configuração mais bonita por último, para que substitua as configurações de outras configurações.

Exemplo .eslintrc.json :

 { //... estende: [ //... 'eslint: recomendado', "mais bonita"//Certifique-se de que esta é a última ], //...
}

Agora, você está livre para executar o Prettier e o ESLint juntos, sem quaisquer efeitos colaterais.

Você pode executar o mais bonito e o ESLint um após o outro, como faria na linha de comando, definindo-os como scripts npm. Veja como isso fica em um package.json :

 { "nome":"configuração sem preocupações", "versão":"1.0.0", "scripts": { "lint":"npx eslint src test", "lint: fix":"npm run lint---fix", "mais bonita":"teste src npx mais bonita--check", "mais bonita: fix":"npm run mais bonita---write", "format":"npm run mais bonita: fix && npm run lint: fix", } //...
}

Agora, você pode executar o comando npm run format para formatar e corrigir todo o seu código de uma vez.

Configuração no código VS

1. Instale as extensões: ESLint , Prettier e Formatar ação do código .
2. Atualize suas configurações de usuário ( settings.json ), conforme abaixo:

    { //... "editor.defaultFormatter":"esbenp.prettier-vscode", "eslint.probe": [ "javascript", "javascriptreact", "vue" ], "editor.formatOnSave": false, //Corre mais bonito, depois ESLint "editor.codeActionsOnSave": [ "source.formatDocument", "source.fixAll.eslint" ], "vetur.validation.template": falso //...
   } 

Primeiro, você precisa desativar a formatação do editor ao salvar ( editor.formatOnSave ). Queremos lidar com tudo por meio de ações de código.

Em março de 2020 (v1.44) , a propriedade editor.codeActionsOnSave foi atualizada para aceitar uma matriz de ações de código, o que permite ações de código ordenadas. Se instalarmos a extensão Formatar ação do código , nós pode disponibilizar a formatação como uma ação de código. Agora, podemos executar o Prettier e o ESLint como ações de código na ordem que quisermos. Legal!

Neste exemplo, executamos o Prettier primeiro com a ação source.formatDocument (ele usa o formatador padrão) e, em seguida, executamos eslint--fix com o ação source.fixAll.eslint .

A propriedade slint.probe é usada para direcionar os idiomas que o ESLint deve validar. Você pode usar eslint.validate se quiser ver as mensagens pop-up.

Se você usar a extensão Vetur, certifique-se de que ela não faça sua própria validação. Há uma configuração vetur.validation.template , que você não deve habilitar.

2. Execute Prettier seguido por ESLint programaticamente

Os aplicativos a seguir oferecem uma maneira unificada de executar mais bonito seguido imediatamente por eslint--fix nos arquivos:

• prettier-eslint para JavaScript
• prettier-tslint para TypeScript

Primeiro, instale o pacote. Isso é apenas para JavaScript:

 $ npm install--save-dev mais bonito-eslint

Em seguida, você precisa escrever sua própria implementação para direcionar seus arquivos e executar a formatação.

Abaixo está um exemplo básico de formatação de uma string:

 const format=require ("mais bonito-eslint"); //observe, sem ponto-e-vírgula no texto original
const sourceCode="const {foo}=bar"; opções const={ text: sourceCode, eslintConfig: { parserOptions: { ecmaVersion: 7, }, as regras: { semi: ["erro","nunca"], }, }, prettierOptions: { bracketSpacing: true, }, fallbackPrettierOptions: { singleQuote: false, },
}; const formatado=formato (opções); //não observe nenhum ponto-e-vírgula no texto formatado
formatado;//const {foo}=bar

Obviamente, esse método requer mais trabalho para direcionar os arquivos, ler o conteúdo e gravar a saída.

Configuração no código VS

Você pode instalar e usar a extensão Prettier ESLint . Você pode ler o README para obter instruções.

3. Execute mais bonito como se fosse uma regra ESLint

Isso geralmente não é recomendado porque:

1. Você obtém problemas de formatação relatados como problemas pelo ESLint. Deseja linhas vermelhas onduladas para coisas que o Prettier corrigirá automaticamente para você de qualquer maneira?
2. É um pouco mais lento do que executar o Prettier diretamente.
3. Você tem outra camada onde os bugs podem ser introduzidos.

Você pode usar plug-ins ESLint que permitem executar o Prettier como se fosse uma regra de linter:

• eslint-plugin-mais bonito para JavaScript
• tslint-plugin-mais bonito para TypeScript

Primeiro, instale o plugin. Isso é apenas para JavaScript:

 $ npm install--save-dev eslint-plugin-mais bonito

Em seguida, anexe o (s) plugin (s) ao array plugins em seu arquivo .stylelintrc. * .

Exemplo .eslintrc.json<”:

 { "plugins": ["mais bonito"], "as regras": { "mais bonita/mais bonita":"erro" }
}