Eslint

Después de varias horas de estar peleando para arreglar el error “Parsing 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: “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.

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 “new” 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 “app” 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