javascript - parse - eslint-plugin-babel

¿Cómo configuro ESLint para permitir métodos de clase de flecha gruesa?

Question

ESLint está arrojando un Parsing error: Unexpected token = error cuando intento alinear mis clases de Es6. ¿Qué parámetro de configuración me falta para habilitar los métodos de clase de flecha gruesa en eslint?

Clase de muestra:

class App extends React.Component{
    ...
    handleClick = (evt) => {
        ...
    }
}

.eslint

{
  "ecmaFeatures": {
    "jsx": true,
    "modules":true,
    "arrowFunctions":true,
    "classes":true,
    "spread":true,

  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "strict": 0,
    "no-underscore-dangle": 0,
    "quotes": [
      2,
      "single"
    ],
  }
}

Answer 1

Me encontré con el mismo problema hoy

y la respuesta de @dreyescat funciona para mí.

Por defecto, babel usa 3 preajustes: es2015 , react , stage-2

Captura de pantalla con "Error de análisis: token inesperado ="

Luego, si también selecciona el preajuste de stage-1 , el error desaparecerá

Captura de pantalla sin error

Puede probarlo usted mismo en el sitio bebeljs.io.

Answer 2

Por lo que leí en el mensaje de error Error de Parsing error: Unexpected token = parece más un error de analizador que uno de linter.

Suponiendo que esté utilizando Babel como su compilador / transpilador de JavaScript y babel-eslint como su analizador de ESLint, es probable que Babel se queje de la sintaxis, no de ESLint.

El problema no es sobre las funciones de flecha sino algo más experimental (ES7 ??) que creo que se llama inicializador de propiedad o campo de instancia de clase (o ambos :)).

Si desea utilizar esta nueva sintaxis / función, debe habilitar preset-stage-1 en Babel. Este preajuste incluye el complemento syntax-class-properties que permite esa sintaxis.

Resumiendo:

1. Instale el preajuste de babel:

   npm install babel-preset-stage-1

2. Agregue este valor preestablecido a la lista de sus es2015 preestablecidos (supongo que ya está usando es2015 y los es2015 preestablecidos de react ), ya sea en su campo .babelrc o en el campo de consulta del babel-loader si está usando un paquete web.

   "presets": ["es2015", "stage-1", "react"]

Answer 3

Primero instale babel-eslint :

npm i -D babel-eslint

Luego agregue lo siguiente a su archivo .eslintrc.json :

"parser": "babel-eslint"

Answer 4

Primero instale estos complementos:

npm i -D babel-eslint eslint-plugin-babel

Luego agregue estas configuraciones a su archivo de configuración de eslint:

.eslintrc.json

{
    "plugins": [ "babel" ],
    "parser": "babel-eslint",
    "rules": {
        "no-invalid-this": 0,
        "babel/no-invalid-this": 1,
    }
}

De esta manera, puede utilizar métodos de clase de flecha gruesa y no obtendrá ningún error no-invalid-this de eslint.

Feliz codin ''

Answer 5

Si desea usar características experimentales (como flechas como métodos de clase), debe usar babel-eslint como analizador. El analizador predeterminado (Espree) no admite funciones experimentales.

Answer 6

Su muestra no es ES6 válida, por lo que no hay forma de configurar eslint para permitirlo