reactjs - for - react in atom

Cómo configurar ESLint para React on Atom Editor

Question

En Atom Editor instalé los siguientes complementos

1. linter
2. linter-eslint

Parece que no reconocen la sintaxis JSX.

Lo tengo trabajando en la línea de comando pero tuve que usar otros complementos como esprima-fb y eslint-plugin-react . Parece que no hay tales complementos para Atom Editor y me gustaría saber si alguno de ustedes conoce una forma de hackear esto.

Answer 1

1. Para usuarios de Mac: vaya a Atom -> preferencias -> Instalar -> buscar paquete linter-eslint -> haga clic en instalar

2. Para usuarios de Ubuntu: Vaya a Editar -> preferencias -> Instalar -> buscar paquete linter-eslint -> haga clic en instalar

3. vaya a la línea de comando ---> npm install --save-dev eslint-config-rallycoding

4. Ven a atom hacer un nuevo archivo .eslintrc y extender la codificación de rally.

Answer 2

Para que Eslint funcione bien con React.js:

1. Instalar complementos linter y linter-eslint
2. Ejecute npm install eslint-plugin-react
3. Agregue "plugins": ["react"] a su archivo de configuración .eslintrc
4. Agregue "ecmaFeatures": {"jsx": true} a su archivo de configuración .eslintrc

Aquí hay un ejemplo de un archivo de configuración .eslintrc :

{
    "env": {
        "browser": true,
        "node": true
    },

    "globals": {
        "React": true
    },

    "ecmaFeatures": {
        "jsx": true
    },

    "plugins": [
        "react"
    ]
}

Estoy usando Eslint v1.1.0 en este momento.

Nota al margen: tuve que instalar eslint y eslint-plugin-react como dependencias del proyecto (por ejemplo, npm install eslint eslint-plugin-react --save-dev ). Espero que esto ayude.

Answer 3

Respuesta actualizada para 2016: simplemente instale el paquete react en Atom y agregue un archivo .eslintrc en la raíz del proyecto (o en el directorio de inicio) que contenga lo siguiente:

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true
  }
}

Y vuelva a abrir cualquier archivo que contenga JSX y debería funcionar.

Answer 4

Yo uso Atom y funciona bien. Solo necesita un .eslintrc en la raíz del proyecto que le dice a ESLint que está utilizando eslint-plugin-react .

Answer 5

.eslintrc editar un archivo .eslintrc local del proyecto que .eslintrc recogerá. Si desea la integración con Atom, puede instalar los complementos linter y linter-eslint .

Para configurar rápidamente ESLint para las mejores prácticas de React, la mejor opción actual es instalar el paquete eslint-plugin-react y extender su configuración recommended lugar de alternar muchas reglas manualmente:

{
  "extends": [ "eslint:recommended", "plugin:react/recommended" ],
  "plugins": [ "react" ]
}

Esto habilitará eslint-plugin-react y las reglas recomendadas de los ajustes preestablecidos de ESLint & React. Hay más información valiosa en la última guía de user-guide ESLint.

Aquí hay un ejemplo de opciones de analizador optimizadas para ES6 y webpack:

{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "impliedStrict": true,
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  }
}