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

[@BrunoEduardoDeMouraFerreira]

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 }

[@BrunoEduardoDeMouraFerreira]

@@rafamartins92 vc remove essa declaração ( "prettier.eslintIntegration": true, ) e coloca essa acima, pra ajudar mais vai a referência : github.com/prettier/prettier-vscode

[@jonasamj]

realmente aparece essa mensagem de erro: This setting has been deprecated. See [documentation for more details](github.com/prettier/prettier-vscode#linter-integration)

[@leonaldonunes1378]

Valeu mano

[@leonardoferreira3430]

Vlw man

[@dioneibianchati]

Merece um beijo na boca seu lindo. Brigadão aushaushauhs

[@willianalmeida3670]

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

[@_thaizamedeiros]

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

[@tadeuagostini4601]

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

[@oDougui]

É só instalar a dependência q funciona normal ou precisa fazer alguma configuração?

[@Leonardo-ux3fg]

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

[@ericquadros9802]

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

[@caiomantovaniborba1906]

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

[@brunagomesdasilva7777]

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

[@dhsweb1985]

O melhor conteúdo sempre!

[@josevalente1667]

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

[@robsonlocatelli8126]

Ajudou demais! Show de bola

[@gabriel.ferreiraa]

É 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.

[@FagnerGomesPlus]

show de bola Diego! Vlw

[@tiago100haga]

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

[@harrisonhenri5984]

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

[@guerrero_beto]

criar .eslintignore aí coloca pra ignorar todas extensões .css igual vc faria na .gitignore

[@naeliio]

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

[@lucassalatiel884]

Top, obrigado por mais um video!

[@einsteinxavier1133]

Alguém conhece a extensão ou puglin que o Diego está utilizando para sinalizar o estado dos arquivos e diretórios ao lado direito? Pode-se observar no tempo: 2:45.

[@robsonlocatelli8126]

O estado de tracked/untracked? quando vc habilita extensão do Git no VSCode ele faz isso a partir do momento que vc deu um 'git init' no diretório

[@rezendenetto]

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?

[@lazarok0963]

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": " ", isso vai redefinir a regra pra aceitar ; no final

[@murilomaia7519]

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

[@vitormelo22]

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,

[@luisgabrielmxm]

voce conseguiu? eu queria a mesma coisa =/

[@jonathanrodrigues26]

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.

[@guilhermeluis9302]

Muito bom, obrigado!

[@KevinMadalossoVeiga]

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

[@carlosricardoziegler2650]

que massa vou editar meu vscode valewww

[@brunoaderaldo7490]

Boa Diego, vídeo top 👍🏻

[@enriqueizel]

Excelente vídeo 👏🏽

[@wellingtonbatistabarbosa4324]

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

[@neevs0]

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

[@rocketseat]

Hahaha Valeeu pelo feedback Lucas! 💜

[@joaovt2]

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

[@brunosoges]

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

[@GustavoRodovalho]

Daria pra aplica o EsLint, Prettier e EditorConfig em projetos php? por exemplos desenvolvimentos de temas wordpress?

[@rocketseat]

Não tenho conhecimento direto sobre isso mas o PHP tem suas próprias ferramentas. Dê uma olhada em: code.visualstudio.com/docs/languages/php#_linting, marketplace.visualstudio.com/items?itemName=Sophisticode.php-formatter

[@fel1914]

EsLint como o nome já diz é pra EcmaScript. Para o PHP tem o CodeSniffer e se não me engano tu configura o CS de acordo com as PSR

[@programadorcarioca2662]

Top

[@returneddyt9361]

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?

[@name.victor]

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!

[@daviconomod]

Aqui pra mim tbm n aparece

[@ingridid92]

Estou tentando fazer o passo descrito no minuto 9:26 porém não consigo editar o arquivo :c (ele abre com o nome defautSettings.json) Alguém sabe o que pode ser?

[@580lucas]

3 anos atrasado, mas para quem tiver o mesmo problema e quiser saber a resposta, é só usar o userSettings.json ao invez do defaut.

[@janfranciscoramalho7661]

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

[@leonardocamargo5412]

O idela é fazer isso, mas vc pode instalar ele globalmente, aí não precisa ficar instalando em todos os projetos.

[@douglasbrandao391]

Muito Bom!

[@DevGuedes]

Mestre para o React-Native seriam as mesmas configurações que para REACT? por exemplo: em Rules, as instruções a partir da linha 10, tem "react/jsx-filename-extension": [{}], para usar no react-native seria a mesma coisa ou incluiria "react-native/jsx-filename-extensio":[{}], Valeu pelo Vídeo. Cara gosto muito, vai direto ao assunto, sem muita enrolação!

[@rocketseat]

Mesma coisa, apesar do React Native ser para mobile, ele ainda utiliza o React por baixo dos panos e por isso a regra não muda. Tamo junto!

[@DevGuedes]

Maravilha!

[@DevGuedes]

oi Para o react-native eu tive de instalar o babel-eslint manualmente fiz pelo npm: npm install --save-dev eslint-babel. Aí parou de dar o erro de que não estava encontrando o babel-eslint.

[@DevGuedes]

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á

[@rocketseat]

É comum utilizar muito o const no React mesmo. Ele permite você usar o let apenas se você redefinir o valor de uma varíavel depois. No mais, tente utilizar const sempre que possível.

[@DevGuedes]

Me tira outra dúvida que configuração de estilo é essa do VS COde que a seta da arrow function fica toda unida, estilizada e o código de cores fica com o background da cor escolhida?

[@davi-sousa]

@@DevGuedes kzbin.info/www/bejne/mWizYWahoNd4fZo

[@maikerhelmet]

Tem alguma maneira de indicar para o VSCode instalar uma extensão automaticamente pelo arquivos settings.json que ele criar em espaço de trabalho?

[@rocketseat]

Infelizmente não tem :(

[@rbltv]

top

[@rodolphonetto1]

Qual o tema do terminal?

[@DaviRodrigues-vd1pr]

Spaceship ZSH

[@PupiloDoChina]

Dá para usar o Prettier por projeto? Tenho alguns projetos que não gostaria de utilizá-lo pois tenho medo de surgir conflitos no GIT caso algum dev esteja editando uma parte do código no mesmo arquivo, e aí o prettier formatar todo o arquivo e bagunçar o arquivo inteiro.

[@rocketseat]

Sim, quando você abre o JSON de configurações do VSCode, tem duas abas lá em cima, a que usamos define configurações globais e existe outra "Workspace Settings" que define por projeto :)

[@geovanildsilva]

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

[@rocketseat]

Faala, Geovani! Você pode mandar essa dúvida na nossa comuniade aberta 💜 Segue o link: www.rocketseat.com.br/comunidade 💜

[@geovanildsilva]

@@rocketseat consegui arrumar colocando no .prettierrc "endOfLine": "auto" Deu certo agora o pq não sei Hehehehehe

[@myvisionsolucoes8875]

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

[@Firejaps]

github.com/prettier/prettier-vscode#vscode-eslint-and-tslint-integration

[@dhsweb1985]

Na versão mais atual não precisa colocar essa linha, pois agora está "deprecated", é só deixar no settings.json as linhas: "editor.formatOnSave": true, "eslint.autoFixOnSave": true, que já resolve. Abs

Great!

[@RodrigoBarrocal]

Pode desligar o JSHint ?

[@rocketseat]

Se estiver batendo contra alguma validação do ESLint sim.

[@TiagoCaus]

Você usa algum style no terminal?

[@danilovieira4442]

É o tema dracula, com Oh My Zsh, Spaceship.. blog.rocketseat.com.br/terminal-com-oh-my-zsh-spaceship-dracula-e-mais/

[@gubmx20]

Top as dicas Diego. Eu utilizo angular. Creio que a style guide da google seria a mais indicada, certo? Ou tanto faz? Vocês são inspiração!

[@rocketseat]

Se não me engano o Angular vai precisar usar o TSLint ao invés do ESLint, ou fazer a integração entre eles. Não sei exatamente qual Style Guide seguir nesse caso mas procurando no Google tem algumas que parecem interessantes.

[@lucasperrotta]

versão 2022 pls

[@matheuscondini4457]

Você usa o Airbnb tanto para react web como para react native?

[@rocketseat]

Sim :D

[@eduardolima806]

prettier.eslintIntegration unknown configuration setting

[@davialves474]

Qual o nome desse tema que vc usa no ZSH, é o "'spaceship"?

[@rocketseat]

Isso, só removi algumas coisas que acho desnecessárias :)

[@mateusveloso2949]

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

[@saulo9404]

Também estou com essa dúvida.

[@mateusveloso2949]

to usando dessa maneira e tem funcionado muito bem

[@saulo9404]

@@mateusveloso2949 estou dando um yarn run eslint --init mas ele me envia informações diferentes, temo em configurar algo errado.

[@saulo9404]

? How would you like to use ESLint? To check syntax only ? What type of modules does your project use? JavaScript modules (import/export) ? Which framework does your project use? React ? Does your project use TypeScript? (y/N)

[@mateusveloso2949]

@@saulo9404 Aconteceu isso comigo. Muda a versão do eslint para 5.16.0 e instala tambem uma dependencia chamada eslint-config-airbnb

[@andersonschererdacosta2084]

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

[@rocketseat]

O TypeScript é excelente, não é essencial mas traz muitos benefícios pra quem já trabalha em time e controla vários projetos :)

[@igorj000]

Que terminal é esse?

[@lsbash6141]

zch customizado, recomendo também o tmux

[@rocketseat]

Isso, Oh My Zsh.

[@Santiagodocavaco]

NodeJs ou PHP?

[@rocketseat]

NoooooooodeJS :D

[@brunofleglerdalcol6804]

Ae Diegão, boa tarde, seguindo suas dicas do eslint, mas surgiu um erro que aparentemente não conseguir resolver. "...Expected the Promise reason to be an Error". Segue o exemplo do meu código: Ex: reject({ data: { message: 'Erro de exemplo' }, status: 401 })

[@rocketseat]

Brunão, o JS geralmente aconselha a retornar um objeto do tipo Error quando você dá reject. Tente com reject(new Error({ data: { message: 'Erro de exemplo' }, status: 401 })).

[@brunofleglerdalcol6804]

Pois é já tinha tentado dessa forma, mas o parâmetros do Error é uma string e não entende como um objeto! Existe a possibilidade de sobrescrever a regra e desabilitar para essa situação?

[@rocketseat]

Sim, dentro do .eslintrc na propriedade "rules" adicione: "prefer-promise-reject-errors": "off"

[@brunofleglerdalcol6804]

Show! Acabei de testar essa propriedade! Mesmo conhecendo o eslint algumas vezes até parei de usar por falta de dicas como essas desse vídeo, parabéns e obrigado pela ajuda! Obrigado!

[@kaiparado]

prettier.eslintIntegration is deprecated

[@jonasfreire5943]

Muito bom !