Style guides Javascript com ESLint, Prettier e EditorConfig | Diego Fernandes

versão 2022 pls

Vim do futuro para dizer que este tutorial do passado é melhor que os tutoriais do presente...😁

Alguém sabe se é possível com o prettier deixar por exemplo a formatação da invocação de um .map() na linha abaixo do array que ele está sendo encadeado? O problema é que sempre que salvo o prettier volta o método pra mesma linha, tem como resolver isso nas configurações de formatação?

top

prettier.eslintIntegration is deprecated

Pra quem tá com problema no prettier corrigir o arquivo colocando ; e o eslint acusar erro -> no arquivo .eslintrc.json em baixo de extends adicionar : "windows": "\r\n",
isso vai redefinir a regra pra aceitar ; no final

Muito top o conteúdo!! Já assisti uns 3 vídeos seu e estou aprendendo muito!!

qual o nome dessa primeira tela onde vc digita os repositorios?

Eslint maravilhoso! Essencial para um código de qualidade. O editorconfig é massa demais também, padroniza o sistema. Já o prettier é ridículo, coisa de dev preguiçoso que não arruma o próprio código sozinho. Kkkkkkk. No demais, vídeo ficou muuuuuito massa! Tmj

da pra dizer que são essenciais o ESLint, Prettier e EditorConfig

Estou usando só o prettier só que ele esta removendo "( )" quando não é pra remover, alguém sabe qual é a config para desabilitar isso?

Como eu faco para desabilitar o ponto vírgula no final das linhas???

Boa tarde Diego, parabéns pelo canal, gostaria de saber pq quando eu crio um novo arquivo.js em meu projeto... eu preciso rodar o comando "yarn eslint --fix src --ext .js" para ele validar tudo e retirar os erros. gostaria de saber tb se existe a possiblidade de somente salvar "ctrl+s" e ele executar a validação automaticamente. obrigado... Utilizo o vscode.

Amei o vídeo, ferramentas muito úteis e que facilitam bastante no desenvolvimento. Obrigada Rocketseat!

O meu quando abre algum código fica cheios de erros mesmo estando tudo certo... Mas alguém com esse problema?

prettier.eslintIntegration unknown configuration setting

E para Java EE, usando Spring, qual seria uma dica de ferramenta para lint?

Diego, obrigado pelo ótimo vídeo! Gostaria de saber qual a estratégia para fazer com que o eslint ignore arquivos css.

agora a integração do prettier com o eslint é assim :
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
}

gostaria de saber qual o Lint que vc. esta usando no seu terminal ?

Você usa algum style no terminal?

Não entendi: Ele instalou o ESLint pela linha de comando com o Yarn add, e depois instalou o plugin no VSCode. Então toda as vez que eu criar um projeto React Native, eu vou ter que instalar o ESLint na pasta do projeto? Alguem pode me tirar esta dúvida

Top

Ajudou demais! Show de bola

Boa mesmo é uma mão na roda!
Apenas que para quem está instalando as versões mais recentes do eslint o comando no settings: pretting.eslintIntegration está "[ DEPRECATED ]" isso é ele não é mais utilizado!


Invés disso podemos instalar ele como uma dependência de desenvolvimento da seguinte forma:
no npm: npm install --save-dev prettier-eslint
no yarn: yarn add prettier-eslint -D


Isso permitirá usar o prettier da mesma forma que é demonstrado nesse vídeo do Diego

O melhor conteúdo sempre!

estou obtendo esse error ao tentar configurar o sdk pra rodar o emulador quando tento rodar esse comando: PS C:\Android\Sdk\tools\bin> .\sdkmanager.bat "platform-tools" "platforms;android-27" "build-tools;27.0.3" estou recebendo essa msg de error: Get-Process : Não é possível localizar um parâmetro posicional que aceite o argumento '.\sdkmanager.bat'.
No linha:1 caractere:1

+ PS C:\Android\Sdk\tools\bin> .\sdkmanager.bat "platform-tools" "plat ...

+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

+ CategoryInfo : InvalidArgument: (:) [Get-Process], ParameterBindingException

+ FullyQualifiedErrorId : PositionalParameterNotFound,Microsoft.PowerShell.Commands.GetProcessCommand

alguém pode me ajudar com isso?

que massa vou editar meu vscode valewww

Muito bom, obrigado! <3

Recomenda eu usar todas essas configurações normalmente com React Native?

Amigo, esta dando o seguinte erro quando coloco "prettier.eslintIntegration": como true
Cannot find module './utils/ast-utils'

Rocketseat sempre ajudando na produtividade, parabéns, fã do canal...

show de bola Diego! Vlw

Muito bom !

Parabéns... ótima aula como sempre!

Dúvida, o .editorconfig ou as configurações do Prettie, qual teria prioridade caso coloquei as regras diferentes?

Até hoje eu não consegui fazer o Prettie usar tab como indentador principal. Se alguém souber, minha configuração está assim.

"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.useTabs": true,
"prettier.tabWidth": 4,

Tento usar com o node, mas não aparece opções de Airbnb nem Standard, ele usa o "eslint:recommended".
Nem no React ele mostra a opção do Airbnb!

Diego, qual a tua opinião sobre TS com React?

Pode desligar o JSHint ?

Great!

Qual o tema do terminal?

muito bom, vou adotar, vai me ajudar muito ...

É interessante colocar um:
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
},

Para o eslint entender seus alias e não dar erro de não conseguir resolver o path.

Muito Bom!

Estou utilizando as 3 ferramentas e não consigo mais ficar sem em meus projetos! Obrigado Diego :D

Já tinha visto sobre o prettier mas ainda faltava um empurrãozinho para utilizar, muito boa Diego! Obrigado pela dica! Continue nos vídeos! Só valeu! :B

Pessoal na boa, anão sei como resolver uma parada aqui! eu instalei o babel-eslint, eslint e eslint-plugin-react-native. COntudo agora toda vez que declaro uma let, ou uma var, o vsCode muda automáticamente para const, o que está me gerando problemas, alguém sabe como mudar isso? já vasculhei o vsCode e não encontrei nada que referencia-se a este comportamento. Obrigado de desde já