Vamos falar sobre como migrar tslint para eslint em Angular

 ng adicionar @angular-eslint/esquemas

Resultados em execução:

• O arquivo .eslintrc.json é gerado automaticamente na raiz e o plug-in @angular-eslint eslint é usado por padrão.

 {
  "raiz": verdadeiro,
  "ignorePatterns": [
    "projetos/**/*"
  ],
  "substituições": [
    {
      "arquivos": [
        "*.ts"
      ],
      "parserOptions": {
        "projeto": [
          "tsconfig.json"
        ],
        "createDefaultProgram": verdadeiro
      },
      "estende": [
        "plugin:@angular-eslint/recomendado",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "regras": {
        "@angular-eslint/seletor de diretiva": [
          "erro",
          {
            "tipo": "atributo",
            "prefixo": "aplicativo",
            "estilo": "camelCase"
          }
        ],
        "@angular-eslint/seletor de componente": [
          "erro",
          {
            "tipo": "elemento",
            "prefixo": "aplicativo",
            "estilo": "caso de kebab"
          }
        ]
      }
    },
    {
      "arquivos": [
        "*.html"
      ],
      "estende": [
        "plugin:@angular-eslint/template/recomendado"
      ],
      "regras": {}
    }
  ]
}

• A seguinte configuração CLI relacionada ao eslint é adicionada ao angular.json. Se você gerar lib ou aplicativo por meio da linha de comando ng no futuro, .eslintrc.json será gerado automaticamente neste módulo.

 "cli": {
	    "defaultCollection": "@angular-eslint/esquemas"
  }

2. Remova ou substitua arquivos ou configurações relacionadas ao tslint

• Exclua tslint.json no diretório raiz ou módulo
• Exclua pacotes de dependência de desenvolvimento relacionados ao tslint, como tslint ou typescript-tslint-plugin etc.
• (Se houver) Exclua a configuração relacionada ao plug-in tslint em tsconfig.json, como

• Altere a configuração do tslint (se houver) em angular.json para eslint, que pode precisar ser modificado manualmente.

Configuração original do tslint:

Configuração eslint modificada (por exemplo, configurada para executar lint no diretório projects/lint-test):

3. Se você precisar desligar temporariamente a verificação eslint de alguns códigos ou arquivos

• Adicione o seguinte comentário acima do código para desativar temporariamente a verificação do eslint para esse código

 /* eslint-disable */
const some_un_used_var;

• Você pode adicionar a regra quando a verificação eslint relatar um erro no comentário para indicar o motivo da desativação temporária da verificação. Por exemplo, no código a seguir, você não deseja que uma variável não utilizada seja verificada por eslint e um erro seja gerado.

 /* eslint-disable @typescript-eslint/no-unused-vars */
const some_un_used_var;

• Se precisar desativar a verificação eslint de alguns arquivos, você pode adicionar o arquivo .eslintignore na raiz.
• Padrões que requerem verificação de lint podem ser configurados em .eslintrc (este artigo não entrará em detalhes, introdução oficial)

4. Verifique se pode ser usado

Execute o comando lint

 fiapo

Se for executado com sucesso, parabéns por concluir a migração!

(Opcional) Outros plug-ins eslint de suporte

• eslint-plugin-deprecation: Verifique se o código está obsoleto
• eslint-plugin-header: Verifique se os comentários do cabeçalho do arquivo seguem certas regras (podem ser usados ​​para versão, verificação de patente, etc.)
• eslint-plugin-import: Verifique a ortografia do endereço de importação ou erros de nome, gramática, etc.
• eslint-plugin-prefer-arrow: Valide usando funções de seta
• eslint-plugin-unicorn: Verifique a sintaxe js, ts relacionada
• eslint-plugin-jsdoc: Documentação relacionada
• ...

Pode ser configurado em .eslintrc.json (documentação oficial)

(Opcional) Configurar código VS

Instale o plugin eslint

O código VS corrige automaticamente problemas relacionados ao eslint ao salvar

Definido em .vscode/settings.json

 "editor.codeActionsOnSave": { "source.fixAll.eslint": verdadeiro }

Ou pesquise as configurações onsave em Arquivo->Preferências->Configurações para encontrar as configurações relacionadas ao eslint.