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