with react not files filename extension allowed javascript reactjs eslint eslint-config-airbnb

javascript - react - eslint jsx not allowed in files with extension js



JSX no está permitido en archivos con extensión ''.js'' con eslint-config-airbnb (5)

Cambie sus extensiones de archivo a .jsx como se mencionó o desactive la regla jsx-filename-extension . Puede agregar lo siguiente a su configuración para permitir extensiones .js para JSX.

"rules": { "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], }

He instalado eslint-config-airbnb que se supone que preconfigura ESLINT para React:

Nuestra exportación predeterminada contiene todas nuestras reglas de ESLint, incluidos ECMAScript 6+ y React. Requiere eslint, eslint-plugin-import, eslint-plugin-react y eslint-plugin-jsx-a11y.

Mi .eslintrc extiende su configuración:

{ "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }], "react/no-multi-comp": 0, "import/default": 0, "import/no-duplicates": 0, "import/named": 0, "import/namespace": 0, "import/no-unresolved": 0, "import/no-named-as-default": 2, "comma-dangle": 0, // not sure why airbnb turned this on. gross! "indent": [2, 2, {"SwitchCase": 1}], "no-console": 0, "no-alert": 0, "linebreak-style": 0 }, "plugins": [ "react", "import" ], "settings": { "import/parser": "babel-eslint", "import/resolve": { "moduleDirectory": ["node_modules", "src"] } }, "globals": { "__DEVELOPMENT__": true, "__CLIENT__": true, "__SERVER__": true, "__DISABLE_SSR__": true, "__DEVTOOLS__": true, "socket": true, "webpackIsomorphicTools": true } }

Desafortunadamente, recibo el siguiente error al alinear un archivo .js con el código React JSX dentro de él:

error JSX not allowed in files with extension ''.js'' react/jsx-filename-extension

¿Eslint-config-airbnb configurado no reaccionó para admitir JSX ya, como se indicó?

¿Qué se debe hacer para eliminar ese error?


Es trabajo para mi. Espero ayudarte.

  1. deshabilitar jsx-filename-extension en .eslintrc :

    "reglas": {"react / jsx-filename-extension": [0]}

  2. en webpack.config.js :

    resolver: {extensiones: [''.js'', ''.jsx'']},


Llámame un muñeco si no te funciona

"rules": { "react/jsx-filename-extension": [0], "import/extensions": "off" }


Para exponer respuesta , parece que actualmente no es posible usar JSX en React Native. Se creó un RP pero se revirtió debido a preocupaciones sobre la fragmentación y las consecuencias desconocidas de tener cosas como index.ios.jsx . No estoy seguro de cómo funciona AirBnb alrededor de esto o si lo hacen, pero he usado básicamente el mismo bloque de rules que Martin.


Si no desea cambiar su extensión de archivo, puede exportar una función que devuelva jsx, y luego importar y llamar a esa función en su archivo js.

// greeter.jsx import React from ''react''; export default name => ( <div> {`Hello, ${name}!`} </div> );

y entonces

// index.js import ReactDOM from ''react-dom''; import greeter from ''./components/greeter''; const main = document.getElementsByTagName(''main'')[0]; ReactDOM.render(greeter(''World''), main);