Eslint

7/53
Recursos

Eslint es un linter de c贸digo. Es una herramienta que nos permite hacer dos tipos de chequeo. Por un lado nos permite establecer un estilo de c贸digo homog茅neo para todo el equipo de desarrollo. Permite definir ciertas reglas para que todos los desarrolladores de ese proyecto las cumplan y las apliquen en el c贸digo.
Por otro lado nos facilita la configuraci贸n usando reglas predefinidas. Estas reglas se instalan como librer铆as de NPM que ya fueron pensadas o desarrolladas por otras personas para que podamos utilizarlas.

Aportes 30

Preguntas 20

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Despu茅s de varias horas de estar peleando para arreglar el error 鈥淧arsing error: unexpected token =鈥 lo resolv铆 asi:

  1. Instala el plugin oficial de ESLint para vue con el comando
npm install eslint-plugin-vue
  1. Modifica tu archivo .eslintrc para quedar como sigue:
{
  "extends": [
    "standard",
    "plugin:vue/essential"],
  "rules": {
    "no-new":0
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "env": {
    "node": true,
    "es6": true
  },
  "plugins" : ["vue", "html"]
}

Con eso tendr铆a que funcionar. Pueden encontrar m谩s documentacion en https://github.com/vuejs/eslint-plugin-vue

En mi caso tuve problemas para terminar de configurar el .eslintrc
Les dejo la soluci贸n a la que llegue luego de ver sus comentarios y buscar un rato por StackOverflow.

Debes agregar, adem谩s de los plugins que Ignacio pone, el plugin para Vue: 鈥渘pm i -D eslint-plugin-vue鈥 y tambi茅n correr el comando 鈥渘pm i -D babel-eslint鈥.

Luego no te olvides de modificar el archivo .eslintrc de la siguiente forma:

{
    "extends": ["Vue", "standard"],

    "rules": {
        "no-new": 0
    },

    "parser": "babel-eslint",


    "plugins": ["html", "vue"]
}

Espero les ayude.

Hola, hoy 2021. Me funcion贸 esta config. en .eslintrc

{
  "extends": ["standard", "Vue"],

  "rules": {
    "no-new": 0
  },

  "parser": "babel-eslint",

  "plugins": ["html", "vue"]
}```

presente errores al realizar la instalaci贸n como lo muestra el video, al revisar los comentarios encontre la soluci贸n, a continuaci贸n relaciono los pasos.

correr los comandos de instalaci贸n para los plugins de eslint
npm i -D eslint-loader
npm i -D eslint-plugin-html
npm i -D eslint-plugin-vue

configurar .eslintrc de la siguiente forma

{
    "extends": ["plugin:vue/recommended"],
    "rules": {
      "no-new":0
    },
    "parserOptions": {
      "parser": "babel-eslint",
      "ecmaVersion": 2017,
      "sourceType": "module"
    },
    "env": {
      "node": true,
      "es6": true
    },
    "plugins" : ["vue" , "html"]
  }

actualmente con @vue/cli 4.5.13 te lo crea automaticamente cuando creas un proyecto con vue create鈥

Recientemente no existe archivo webpack.config.js dado que es autogenerado. Para agregar ESLINT existen b谩sicamente dos caminos, te invito a revisar cada uno:

https://blog.pleets.org/article/integrar-eslint-con-vuejs

Actualmente usando vue iu o la consola con el vuecli, se puede instalar por defaul eslint y te lo configura automaticamente en tu boilerplate, ademas tambien te permite configurar de inicio algunos valores para eslint, los cuales siempre se pueden sobreescribir pero por defecto ya se puede incorporar e incluso es mejor ya que es un standard

vue add @vue/cli-plugin-eslint

Eslint es un linter de c贸digo. Es una herramienta que nos permite hacer dos tipos de chequeo. Por un lado nos permite establecer un estilo de c贸digo homog茅neo para todo el equipo de desarrollo. Permite definir ciertas reglas para que todos los desarrolladores de ese proyecto las cumplan y las apliquen en el c贸digo.

  • es importante decir que al ser un curso desactualizado, es poco util lo visto en esta clase. pues ya cli-vue 3, se configura automatico el eslint al momento de crear un proyecto sencillo o con valores default.

Yo tuve el problema de que generaba error y con los comentario lo solucion茅 pero el eslint no me validaba correctamente en VSCODE, buscando encontr茅 que debia hacer un $eslint --init pero generaba un error de que no tenia permiso para abrir el archivo eslint.ps1 por lo que me toc贸 correr en el PowerShell como administrador el siguiente comando [Set-ExecutionPolicy RemoteSigned] y ah铆 si luego correr [eslint --init], configurarlo con las preguntas que me hacia y luego editar el archivo .eslintrc.js y tenia configurado era sin el .js y obviamente agregar la regla de no-new.

Espero esto le sea de ayuda a alguno

Actualizaci贸n

Agregar el plugin de eslint para vue: npm i -D eslint-plugin-vue

Demasiados plugins plugins plugins

yo no soy capaz de usar el eslint, me sale que la instalacion presento 3 vulnerabilidades (1 moderada y 2 altas) y nunca termina funcionando la correcci贸n dentro de Atom =/

Me aparece el siguiente error:

<Failed to compile.

./src/App.vue

/Users/COLEGIUM-DES-BP/Documents/Vue/platzi-music/src/App.vue
  2:10  error  Parsing error: Unexpected token =

鉁 1 problem (1 error, 0 warnings)

 @ ./src/main.js 2:0-28
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js>

y mi App.vue es:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hola Vue!'
    }
  }
}
</script>

<style lang="scss">
</style>

No entiendo donde puede estar el error.

ESLint

Este es un linter de c贸digo. Nos permite definir reglas para que todos los programadores en el grupo del proyecto escriban c贸digo con las mismas reglas.

Puedes encontrar m谩s informaci贸n en la documentaci贸n de ESLint

La instalamos con npm i -D eslint o tambi茅n la pudimos haber instalado desde la creaci贸n de la aplicaci贸n.

Aqu铆 m谩s informaci贸n

As铆 tengo .eslint.json configurado:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "plugin:vue/essential",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

La configuraci贸n de ESLint

{
  "extends": "standard",

  "rules": {
    "no-new": 0,
    "comma-dangle": 0
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "env": {
    "node": true,
    "es6": true
  },
  "plugins" : ["vue", "html"]
}

con los plugins oficiales de ESLint

npm i -D eslint-plugin-vue
npm i -D eslint-plugin-html

Yo prefiero no deshabilitar la regla que impide el uso de la expresi贸n 鈥渘ew鈥 sin una variable de asignaci贸n, en su lugar, prefiero seguir la sugerencia de ESLint para la escritura correcta con esta regla.

Al momento de configurar eslint dentro del archivo de configuraci贸n de webpack (webpack.config.js) siempre tener en cuenta de meterlo primero en la lista de objetos, ya que queremos aplicar eslint sobre el c贸digo de desarrollo, no el de producci贸n.

Alguien tiene el mismo error que me pueda orientar!!!

instale el plugin de html e hice la modificaci贸n en el archivo .eslintrc pero me sigue apareciendo el error de JSX

Ac谩 la soluci{on de como debe quedar el eslintrc https://vuejs.github.io/eslint-plugin-vue/user-guide/#faq

{
  "extends": ["plugin:vue/recommended"],
  "rules": {
    "no-new":0
  },
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  "env": {
    "node": true,
    "es6": true
  },
  "plugins" : ["vue"]
}```

Intale el plugon de ESlint en Sublime 3, pero desafortunadamente no hace nada.

Hola, me sale este error:
ERROR in ./src/main.js
Module build failed: Error: Cannot find module 'eslint鈥
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:649:15)
at Function.Module._load (internal/modules/cjs/loader.js:575:25)
at Module.require (internal/modules/cjs/loader.js:705:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object.module.exports (C:\Users\Santos\Documents\dev\platzi-music\node_modules\eslint-loader\index.js:170:17)
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Alguna orientacion?

Si a alguno no le surte efecto, capaz deban cambiar la configuracion de eslint. Por ejemplo, en mi caso tengo un .json con lo siguiente:

settings.json

{
    "eslint.enable": true
}

Uso Visual Studio Code, en los demas editores nose si funcionara de la misma manera. Capaz deban ir al archivo json de la configuracion del editor y agregar esta regla.

gracias a todos los comentarios anteriores pero a mi despues de las solucion de todos obtuve un ultimo error :
Nota : aun que pese a este error si me corre correctamente la pagina
WARNING in ./src/App.vue

C:\Developer\CursosPlatzi\vue_adv\platzi-music\src\App.vue
11:9 warning Property name 鈥渁pp鈥 is not PascalCase vue/name-property-casing

鉁 1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the --fix option.

@ ./src/main.js 2:0-28
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Buenas tardes , estoy teniendo problemas para la instalaci贸n del eslint y he tenido varios errores, espero que me puedan ayudar , muchas gracias

tengo el error del html y no paso de ahi, instale el plugin html y naranajas

馃憣

Configurar indentaci贸n en VS Code:
F1 => formatter config => change indent_size => restart vscode.

no puedo solucionar el problema de
error Parsing error: Expected corresponding JSX closing tag for <img>
a pesar de que he instalado el eslint-plugin