ESLint

Qué é un linter

Un linter é unha ferramenta de análise estática de código que revisa os teus ficheiros fonte en busca de erros de sintaxe, estilos inconsistentes, malas prácticas ou posibles fallos. O seu nome vén do "lint", as pelusas que se acumulan na roupa, xa que "limpa" o código de pequenos problemas que poden dar lugar a bugs difíciles de detectar.

Os linters máis comúns en desenvolvemento web son:

• ESLint (para JavaScript/TypeScript)
• Stylelint (para CSS)
• Pylint (para Python)
• RuboCop (para Ruby).

No caso de ESLint, permite definir regras personalizables, engadir plugins para frameworks como Vue ou React, e corrixir automaticamente moitos problemas coa opción --fix.

Como empregar ESLint por liña de comandos nun proxecto VUE

Para usar ESLint nun proxecto Vue dende o terminal, sigue estes pasos:

Instalación (se non o tes xa)

Asegúrate de ter ESLint instalado como dependencia de desenvolvemento:

npm install --save-dev eslint eslint-plugin-vue

IMPORTANTE. Eu fixen a instalación e configuración básica seguindo a documentación oficial con este comando
npm init @eslint/config@latest

Configuración básica

Crea un ficheiro .eslintrc.js na raíz do proxecto:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended'  // para Vue 3
  ],
  env: {
    browser: true,
    node: true,
    es2021: true
  }
};

Executar ESLint por liña de comandos

Revisar todos os ficheiros .vue e .js dentro de src/:

npx eslint src/**/*.{vue,js}

Corrixir automaticamente os problemas que se poidan:

npx eslint src/**/*.{vue,js} --fix

Gardar nun ficheiro de informe (ex. JSON):

npx eslint src/ --format json --output-file eslint-report.json

Integración con scripts do package.json

Engade no package.json:

"scripts": {
  "lint": "eslint src/**/*.{vue,js}",
  "lint:fix": "eslint src/**/*.{vue,js} --fix"
}

Despois podes executar npm run lint ou npm run lint:fix.

Exemplo

eslint desde terminal sen erro e cun erro forzado

Executo eslint contra un ficheiro main.js:

• npx eslint main.js

• Cando non hai erros non indica nada na saída.
• Cando forzo o erro introducindo aa (algo non definido), indica un problema, que neste caso é o erro

Relaciones

Pódese usar conxuntamente con Vue Mess Detector.