conserta o linter

[joaoprocopio]

esse pull request visa fazer o ESLint formatar o código junto com o VSCode.

para habilitar essa função dentro do VSCode, você deve seguir esse passo a passo:

1. Instale a extensão ESLint dentro do VSCode (link)

2. Aperte o atalho CTRL + , (este atalho vai abrir a aba de Configurações)

3. Dentro da aba de configurações você deve procurar por "eslint format"

4. Você vai encontrar uma opção chamada "Eslint > Format: Enable", você deve ativar ela!

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
trot-geo-tracking	✅ Ready (Inspect)	Visit Preview	Feb 1, 2023 at 1:13AM (UTC)

[huogerac]

@joaoprocopio vou ver pq não está formatando, mas estas configurações não era para ser necessária dado que temos o settings.json com elas! Ou seja, quando a gente coloca no vscode isto, pode ter outros projetos que usam outro formatador, dai temos q ficar mudando isto para todo projeto. Se cada projeto tem seu .vscode/settings.json nunca precisariamos ficar alterando as settings...

Vou tentar entender pq não está formatando mesmo assim. Guentae

[joaoprocopio]

@huogerac o linter não funcionava por que não tava configurado o .eslintrc.js

mechi um pouco nele e deu tudo certo

[huogerac]

@joaoprocopio

Eu criei uma máquina virtual com um ubuntu ZERADO para testar pq o linter não funcionou na sua máquina.

• Fiz update, instalei o git
• Instalei o vscode
• instalei o NVM e o node 16
• clonei o projeto (na main sem o conteúdo desta branch aqui) okay?
• fiz npm install
• abri o projeto com vscode
• o vscode detectou que eu precisava instalar 3 plugins (pq temos o arquivo .vscode/extensions.json)
• instalei as 3 recomendações acima (volar, eslint e prettier)
• PRONTO, com zero configurações no vscode ou em qualquer outro arquivo, a formatação automática ao salvar funcionou

ou seja, talvez seu vscode já tinha configurações ou outros plugins conflitantes...

vou tentar ver no note do @lgohere pq na dele não funcionou também. Mas consegui validar q em uma maquina zerada, so clonar e instalar as dependencias + os plugins o linter + auto format funcionam

Logo, a princípio não precisamos destas alterações!

[joaoprocopio]

@huogerac boa noite professor!

então, eu acho legal essas alterações feitas por que elas estão trazendo mais regras de linting.

e nós dentro do projetos podemos decidir pelas duas opções:

1.

ESLint (extensão) como Linter Prettier (extensão) como Formatador

2.

ESLint (extensão) como Linter e Formatador

eu vou fazer um teste, nessa mesma branch pra testar esse dois casos e ver se fica tudo perfeitinho pra ambos. caso você queira fazer junto e compartilhar os resultados vai ser interessante.

[huogerac]

Show! Só lembrando que já estava usando o prettier como formatador, mas este PR vai trocar ao invés de usar a extension prettier direto vai usar vue/prettier. Bora lá testar assim!

estava vendo, quando usamos um template padrão do JS, ele faz assim! Gostei!

❯ npm create vite@latest
✔ Project name: … linter-test
✔ Select a framework: › Vue
✔ Select a variant: › Customize with create-vue ↗

Vue.js - The Progressive JavaScript Framework

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /tmp/linter-test...

Done. Now run:

  cd linter-test
  npm install
  npm run lint
  npm run dev

/tmp on ☁️  sjc took 27s 
❯ cd linter-test 

/tmp/linter-test via 🤖 v16.19.0 on ☁️  sjc 
❯ code .

/tmp/linter-test via 🤖 v16.19.0 on ☁️  sjc 
❯ cat .eslintrc.cjs 
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

Valeu