Olá Habr! Meu nome é Bogdan, trabalho na liderança da equipe PIC Digital Front-End. Estamos desenvolvendo a maioria dos projetos no Angular, e recentemente decidi revisar nossos guias de estilo, além de adicionar novas ferramentas para um trabalho mais conveniente.Como linter, decidi usar o ESLint, pois eles planejam transferir o Angular para ele em breve. E neste artigo, quero compartilhar instruções sobre como mudar do TSLint para o ESLint e, ao mesmo tempo, informar como executar o Prettier a partir do ESLint, como adicionar regras de guia de estilo AirBnB e como tornar o lint conveniente e invisível, definindo ganchos de código e Git do VS.Prettier & ESLint
ESLint é uma ferramenta para análise de código estático, as regras são divididas em dois grupos:- Formatação - para colocar o código em uma única exibição: comprimentos de linha, vírgulas, ponto e vírgula, etc.
- Qualidade do código - procurando modelos de código problemáticos: código desnecessário, erros.
Prettier é uma ferramenta de formatação automática de código.A pergunta que me interessou foi: por que usar o Prettier se o ESLint também pode formatar o código?A resposta é simples - Prettier formata o código muito melhor: remove toda a formatação e reescreve completamente o código em um único estilo. Isso permite que os desenvolvedores esqueçam a formatação do código e não percam tempo discutindo o estilo do código para revisão. Por exemplo, temos uma longa linha de código:
Se tentarmos alterar a formatação através do ESLint, isso simplesmente nos dará um erro:eslint example.ts --fix
output:
error This line has a length of 97. Maximum allowed is 80
Esse exemplo mostra que o linter nem sempre pode ajudar na formatação do código, e os desenvolvedores podem formatar esse código de maneiras diferentes, com base em suas considerações pessoais.Se salvarmos ou formatarmos o arquivo com o Prettier, a linha assumirá a forma:
Prettier fornece um estilo uniforme em toda a base de código. Portanto, ele pode e deve ser usado junto com o ESLint, mas você precisa configurá-los para que eles não interfiram.Configuração ESLint
A essência da aprendizagem usando ESLint está nos analisadores que transformam o código em AST (Abstract Syntax Tree) para processamento adicional de software e nos plugins que contêm regras, por exemplo, regras recomendadas para regras de guia de códigos AirScript ou lipo TypeScript ou AirBnB.Instalação
Para migrar um aplicativo Angular para o ESLint, precisamos das seguintes dependências:Para instalá-los, basta executar o comando:ng add @angular-eslint/schematics
No momento da redação deste texto, typescript-eslint e angular-eslint não possuem todos os equivalentes para as regras na configuração padrão do Codelyzer para TSLint, mas a maioria já existe. Você pode monitorar o status atual da transferência de regras do TSLint para o ESLint nos mono-repositórios Angular ESLint e TypeScript ESLint .Configuração de configuração
Tudo o que precisamos para aprender aplicativos angulares foi instalado. Agora vamos prosseguir para a configuração do ESLint. Vamos criar um arquivo .eslintrc.js e adicionar as configurações recomendadas para o Angular ESLint:module.exports = {
extends: ['plugin:@angular-eslint/recommended'],
rules: {
'@angular-eslint/directive-selector': [
'error',
{ type: 'attribute', prefix: 'app', style: 'camelCase' },
],
'@angular-eslint/component-selector': [
'error',
{ type: 'element', prefix: 'app', style: 'kebab-case' },
],
},
overrides: [
{
files: ['*.component.ts'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: ['@angular-eslint/template'],
processor: '@angular-eslint/template/extract-inline-html',
},
],
};
As configurações podem ser descritas em diferentes formatos: arquivo JavaScript, JSON ou YAML. Você pode deixar comentários em JavaScript.
“Plugin: @ angular-eslint / recommended” contém configurações para 3 plug-ins de uma vez: “@ typescript-eslint / eslint-plugin”, “@ angular-eslint / eslint-plugin” e “@ angular-eslint / eslint-plugin-template " Você pode ler quais regras ele define aqui .Atualização do comando ng lint
Também na configuração angular.json, você precisa atualizar o comando ng lint para executar @ angular-eslint / builder :"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"eslintConfig": ".eslintrc.js",
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
A configuração básica do ESLint está pronta, agora você pode iniciar o ESLint com o comando ng lint padrão .Instale plugins adicionais
Para instalar o plug-in para ESLint, por exemplo, para testes de unidade de linting no Angular, é necessário fazer o download e adicionar o plug - in Jasmine às configurações :npm install eslint-plugin-jasmine --save-dev
E adicione um novo bloco de configurações para arquivos com a extensão * .spec.ts na propriedade "overrides":overrides: [
...,
{
files: ['src/**/*.spec.ts', 'src/**/*.d.ts'],
parserOptions: {
project: './src/tsconfig.spec.json',
},
extends: ['plugin:jasmine/recommended'],
plugins: ['jasmine'],
env: { jasmine: true },
rules: {
'@typescript-eslint/no-unused-vars': 'off',
},
}
],
Por analogia, você pode adicionar outros plugins para diferentes extensões de arquivo.Adicionando Guias de Guia de Estilo
Para obter maior consistência da base de código, você pode selecionar e adicionar as regras de um dos guias de estilo populares à configuração do ESLint:- AirBnB : a mais popular e mais rigorosa das três vírgulas e ponto-e-vírgula.
- Google : semelhante ao AirBnB em termos de formatação, mas menos rigoroso, comentários obrigatórios no JSDoc.
- StandartJS : proíbe o uso de vírgulas e ponto-e-vírgula.
Escolha um guia de estilo mais adequado para sua equipe. Você pode se revezar tentando todos os guias de estilo em algum projeto grande, ver quais erros o linter produz e com base nisso fazer uma escolha.Escolha uma implementação do guia de estilo TypeScript, porque as regras JavaScript podem não funcionar corretamente no TypeScript.
Como exemplo, vamos adicionar o guia de estilo AirBnB à nossa configuração ESLint. Para fazer isso, instale a configuração com as regras do AirBnB para TypeScript e o plug-in com as regras para trabalhar com a sintaxe de importação / exportação:npm install eslint-plugin-import eslint-config-airbnb-typescript --save-dev
Para não alterar as configurações de nível superior, criaremos um novo bloco de regras na propriedade “overrides” com as regras do guia de estilo AirBnB e o analisador TypeScript necessário para seu trabalho:module.exports = {
...,
overrides: [
...,
{
files: ['*.ts'],
extends: [
'airbnb-typescript/base',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
},
]
}
Para adicionar outro guia de estilo, você precisa instalar um conjunto de regras para o TypeScript, criar um novo bloco de regras em "substituições" com as regras do guia de estilo e especificar o analisador necessário para o seu trabalho.Regras de personalização
Se você deseja desativar ou redefinir algumas regras no estilo do guia, faça isso na propriedade "rules":module.exports = {
...,
overrides: [
...,
{
files: ['*.ts'],
extends: [
'airbnb-typescript/base',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
rules: {
'import/no-unresolved': 'off',
'import/prefer-default-export': 'off',
'class-methods-use-this': 'off',
'lines-between-class-members': 'off',
'@typescript-eslint/unbound-method': [
'error',
{
ignoreStatic: true,
},
],
},
},
]
}
Configurar o Prettier
Para adicionar o Prettier à nossa configuração, precisamos instalar o próprio Prettier, um plug-in com regras do Prettier, bem como uma configuração que desabilite todas as regras que possam entrar em conflito com o Prettier:npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
Nas "substituições" no bloco com as regras de arquivos com a extensão * .ts na propriedade "estende" na parte inferior, adicione as regras e as configurações do Prettier:module.exports = {
...,
overrides: [
...,
{
files: ['*.ts'],
extends: [
'airbnb-typescript/base',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
...,
},
]
}
A configuração do Prettier deve sempre estar no final da lista para substituir quaisquer regras que possam entrar em conflito com o Prettier.O `prettier / @ typescript-eslint` desativa as regras do` @ typescript-eslint`, que podem entrar em conflito com o Prettier, e o `plugin: prettier / recommended` faz três coisas:- inclui eslint-plugin-pretty,
- imprime erros de regra mais bonitos / mais bonitos no console como "erro",
- Adiciona regras de formatação mais bonitas, eslint-config-prettier.
Configuração para Prettier:
O Prettier pode formatar o código sem nenhuma configuração, mas para corresponder ao guia de estilo do AirBnB, é necessário adicionar algumas configurações. Crie o arquivo .prettierrc.js na raiz do aplicativo:module.exports = {
trailingComma: "all",
tabWidth: 2,
semi: true,
singleQuote: true,
bracketSpacing: true,
printWidth: 100
};
Essas configurações serão usadas pelo ESLint e pelo Prettier se você usá-lo para formatar arquivos no VS Code ou com o comando:prettier "--write ."
Configurar código VS
O VS Code pode destacar e corrigir os erros encontrados do ESLint ao salvar erros. Para fazer isso, baixe o plug-in ESLint para VS Code e crie um arquivo dentro do projeto com as configurações para o espaço de trabalho .vscode / settings.json: "eslint.validate": [ "javascript", "typescript", "html"],
"eslint.options": {
"extensions": [".js", ".ts", "html"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
Aqui, configuramos o ESLint para enfatizar e corrigir erros ao salvar arquivos com as extensões .js, .ts e .html.E para formatar um documento usando as combinações de teclas “shift + option + F” ou “shift + alt + F”, baixe o plug-in Prettier para VS Code e defina-o como formatador padrão.Configurando Git Hooks
Os ganchos do Git são scripts que o Git chama em certos eventos: confirmar, enviar, receber.Com a ajuda deles, podemos começar a aprender o código ao criar um commit, para que menos erros entrem no pool de solicitações. Para um trabalho mais conveniente, com ganchos Git, instale Husky , e para verificar somente o código que é adicionado ao cometer (isto é útil em grandes projectos onde linting leva muito tempo) lint-encenado :npm i husky lint-staged --save-dev
Adicione as configurações para esses plugins ao package.json:"scripts": {
...
},
"husky": {
"hooks": {
"pre-commit": "lint-staged --relative"
}
},
"lint-staged": {
"*.{js,ts}": [
"eslint --fix"
]
},
O lint-staged passa uma matriz de arquivos modificados para o comando chamado. O comando ng lint não sabe como aceitar uma matriz de arquivos e, para usá-lo, você precisa escrever um processador de script adicional. Ou você pode simplesmente chamar ESLint, como neste exemplo. Essa solução pode ser usada para pré-concessões e você pode executar ng lint para conformar todo o projeto, por exemplo, no pipeline de IC.achados
Nas versões futuras do Angular, o ESLint com regras básicas estará pronto para uso. Agora, o processo de configuração do ESLint requer algumas etapas adicionais, o ESLint não possui equivalentes para algumas regras do TSLint e o Angular ESLint ainda está na versão alfa. Portanto, você pode mudar para o ESLint agora ou não.No entanto, o código de guia, regras adicionais, Prettier, Husky e estágios de fiapos, você terá que se configurar. Espero que este artigo tenha ajudado você a descobrir como todas essas coisas funcionam juntas.A configuração de linters pode parecer uma tarefa trivial, mas inclui várias questões organizacionais importantes: escolha de guias de estilo, sincronização de soluções diferentes entre si.Mas o tempo gasto na configuração do linter no futuro economizará significativamente o tempo de discutir o estilo e a formatação do código no processo de revisão de código, reduzirá o número de erros que caem no pool de solicitações e garantirá a consistência da base de código.Um exemplo de implementação pode ser encontrado no Github .Se você encontrar um erro na configuração ou tiver complementos - escreva!Referências