Configuración de eSlimt con EstándarJS y Webpack

Clase 7 de 53 • Curso Profesional de Vue.js 2

Resumen

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.

Jorge Israel Lombardero Juarez

student•

Después de varias horas de estar peleando para arreglar el error “Parsing error: unexpected token =” lo resolví asi:

Instala el plugin oficial de ESLint para vue con el comando

npm install eslint-plugin-vue

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

Mauricio Arturo Florentin Oliver

student•

Me estaba volviendo loco con este error!
Gracias por compartir la solución @israellomba

Oscar Guevara

student•

Excelente aporte, Mil gracias… 😃

Joseph Paucar

student•

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: "npm i -D eslint-plugin-vue" y también correr el comando "npm 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.

Daniel Antonio Montalvan

student•

¡ Gracias Joseph !

Julian Vasquez

student•

Muchas gracias me fue de mucha ayuda al caer en el mismo problema.

Christian Gómez

student•

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

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

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

  "parser": "babel-eslint",

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

Yehinson Salazar

student•

Muchas gracias, me soluciono muchos errores

Hans González

student•

Yo ya no uso eslint, porque ha sido un dolor de cabeza ...

Carlos Andres Romero Ortiz

student•

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"]
  }

Jesús Amaro

student•

¡Muchísimas gracias por tu aporte! Me has ayudado en sobremanera.

Roberto Ocando Morales

student•

5 estrellas...

Teofilo Rosales Gama

student•

Para ahorrarles el viaje aqui les va

Eslint
npm install eslint-config-standard

Dependencias de las dependencias
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

Jafet López Chaves

student•

gracias bastante util

Mauricio Hernan Cabrera

student•

Si lo quieren para sublimetext:
To install via Package Control, do the following:
Within Sublime Text, bring up the Command Palette and type install. Among the commands you should see Package Control: Install Package. If that command is not highlighted, use the keyboard or mouse to select it. There will be a pause of a few seconds while Package Control fetches the list of available plugins.
When the plugin list appears, type eslint. Among the entries you should see SublimeLinter-contrib-eslint. If that entry is not highlighted, use the keyboard or mouse to select it.
Repositorio de github

Angel Camacho

student•

Muchas gracias.

Edwar Cedeño

student•

Gracias!!

Joel Andres Bonilla Tellez

student•

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

DARIO ANTONIO RIVERA TELLEZ

student•

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

Rodrigo Ramos Xochiteotzin

student•

Gracias, buen aporte

Brandon Sanchez

student•

Muchas gracias!

Fernando Mejia

student•

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

Juan Valentin Perdomo Bonilla

student•

vue add @vue/cli-plugin-eslint

jonathan sanchez

student•

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.

Mauricio Andres Padilla Hoyos

student•

Hola… cual sería la regla para que el linter no coloque como error un comentario, ejemplo me coloca como error cuando hago esto
import Vue from ‘vue’ //import de la libreria Vue
import App from ‘./App.vue’ // import del componente App.vue

me lintea los comentarios…
Agradezco su ayuda… 😃

Nacho Anaya

teacher•

Hola, en realidad no lintea los comentarios como error. Solo te pide que coloques un espacio entre las dos barras y el mensaje: import Vue from ‘vue’ // import de la libreria Vue

Mauricio Andres Padilla Hoyos

student•

Hola Nacho… excelente… si funciona…Muchas Gracias.

Raúl Martín Anaya Rojo

student•

Mucho de lo explicado aquí en la versión 3 de VueJs ya se hace en automático ¿Será conveniente seguir viendo este curso?

Equipo Mecubro

student•

Si, tiene muchisimas cosas que aprender. Muy buenas practicas por ejemplo. Yo la estoy haciendo actualmente y es funciónal con mi conocimiento.

Allen Kevin Zapien Zamora Zapien

student•

¿Alguien sabe cómo añadir pug a vue.js? para el template en vez de manejarlo con la sintaxis de HTML manejarla con la de pug

Boris Köhli-Richter

student•

Siempre que tengas una duda sobre Vue revisa la doc oficial, es raro que no esté ahi la solucion: https://vue-loader.vuejs.org/guide/pre-processors.html#pug

Matías Criado

student•

Podrías probar instalando pug de manera local en tu proyecto con npm, y luego en tus componentes en la etiqueta template agregas lang='pug'. Y creo que con eso debería funcionar, porque para trabajar con preprocedadores es lo mismo pero en la etiqueta style.

Menkar Felipe Cantor Molina

student•

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

john goyo

student•

Hola, que tal amigo? yo tengo el mismo problema, he buscado y he tratado de solucionarlo pero igual no puedo, sera que lograste hacerlo de otra manera, o si puedes explicar mas especifico, seria de gran ayuda. gracias.

Gregory Hernandez Abad

student•

Actualización

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

Carlos Eduardo Gomez García

teacher•

En Vue 3 todo esto cambió, ¿Alguien sabe cómo hacer todas estas configuraciones de ESLint para Vue 3?

Massimo Di Berardino

student•

Hola @retaxmaster, te comparto el link de la documentación para ESlint de Vue 3

Jordan Rodriguez

student•

Hola, Por favor esta la segunda vez que hago el curso desde el inicio pero me sigue dando el mismo error: tengo este inconveniente.

Mi archivo de

"webpack.config.js

En la espera de su ayuda

Diego Alvaro Parra Abad

student•

Podrías compartir un screen del archivo "main.js", según la imagen que compartes el error se ubica en ese archivo.

Lorgio Roda

student•

Hola Jordan, Me encantaría ayudarte, pero el error se ubica en el archivo main.Js debido a una propiedad llamada getFormatter que es undefiend. Te aconsejo siempre que tengas errores, leas bien esos errores, ellos son tus mejores amigos y te trataran de explicar en que lugar exacto está el error. Un saludo, Jordan

Oscar Camilo Ruiz

student•

Opción para arreglar los errores automaticamente.

options: {
         fix: true
        }

Armando Aguilar L.

student•

Demasiados plugins plugins plugins