{ source code formatters}

feat: pesquisar eslint, prettier, tslint, editorconfig para frontend #6217

PoC sobre ESLint Prettier TSLint para frontend, com objetivo de tirar as dúvidas de programas e configurações para não acontecer conflitos e deixar o código mais padrão possível entre programadores.

Critérios de aceitação:

TypeScript:

métodos e propriedades devem explicitar o encapsulamento
métodos e propriedades devem explicitar o retorno
ordenar propriedades public, protected, private e não precisa de alfabética
ordenar métodos public, protected, private e em ordem alfabética
nomes de propriedades deve ser:

public: UpperCamelCase, lowerCamelCase
protect: UpperCamelCase, lowerCamelCase
private: _lowerCamelCase

nome de métodos deve ser:

public: lowerCamelCase
protect: lowerCamelCase
private: _lowerCamelCase

nomes de parâmetros deve ser pUpperCamelCase
nomes de variáveis deve ser xUpperCamelCase
nomes de interfaces deve iniciar com I ex: INomeClasse
nomes de funções top level deve ser lowerCamelCase
imports deve de separado de dependências de terceiros
imports deve ser ordenado (ambos em ordem alfabética):

sem escopo
* as algumaCoisa
com escopo (dentro do braces deve ser em ordem alfabética)

	Prettier	ESLint	TypeScript-EsLint	EditorConfig
formatar automático	✅	🟡	🟡	🟡
encapsulamento	❌	❌	✅
retorno explicit	❌	❌	✅
ordenar propriedades	❌	❌	✅
ordenar métodos	❌	❌	✅
nomes de propriedades	❌	❌	✅
nome de métodos	❌	❌	✅
nomes de parâmetros	❌	❌	✅
nomes de variáveis	❌	❌	✅
nomes de interfaces	❌	❌	✅
nomes de funções top level	❌	❌	✅
imports separado	❌	❌	🟡
imports ordenado	❌	❌	🟡
array callback return	❌	✅	❌
inferrable-types	❌	❌	✅

Informações:

ESLint quando configurado com prettier, o eslint passa a usar o prettier como formatador.

ESLint não respeita 100% o imports, então foi feito algo aceitável veja em EsLint sort-import.

EditorConfig não é concorrente dos outros pois somente mantém a codificação do arquivo, ex: UTF8 CRLF/LF com ou sem linha em branco no fim do arquivo.

HTML:

mais de 3 attributes quebrar linha
attributes ordem alfabética

	Prettier	EditorConfig
mais de 3 attributes	🟡	❌
attributes ordem alfabética	❌	❌

Informações:

Prettier formata HTML mas não consegue fazer somente quando é com mais de 3 attributes, ele é configurado pela quantidade de colunas na linha.

EditorConfig não é concorrente dos outros

Styles (sass, scss, less, css):

	Prettier	EditorConfig	StyleLint
deve formatar automático	✅	❌	✅
suporte a rules	🟡	❌	✅

Informações:

Prettier formata CSS mas não consegue fazer regras para isso uso o StyleLint.

EditorConfig não é concorrente dos outros

Suporte a IntelliSense

Sobre esse assunto encontrei um extensão que consegue fazer, seque link

Conclusão:

Prettier e ESLint trabalham juntos, existe conflitos veja comparison. Para trabalhar com Angular o ideal foi seguir os passos:

Remove as extensões VSCode: vsc-organize-imports, Prettier ESLint
Instalar as extensões VSCode: Angular Language Service, ESLint Prettier StyleLint
Instalar o angular
Instalar o angular-eslint
Instalar o prettier
Instalar o editorconfig
configurar arquivos do .vscode
configurar arquivos do .editorconfig
configurar arquivos do .eslintrc
configurar arquivos do .prettierrc
configurar arquivos do .stylelintrc

Consegui concluir um projeto em angular com uma estrutura bem definida e com padrões. Sobre os imports não consegui forçar as regras, mas vou seguir o style-guide-03-06 do Angular2 deixando uma linha vazia entre as importações de terceiros e as importações de aplicativo e quando o erro persistir desativo o eslint no arquivo corrente.

Segue um repositório com as definições no text

wzuqui / poc-angular-formatters-rules