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.
-
deshabilitar jsx-filename-extension en
.eslintrc
:"reglas": {"react / jsx-filename-extension": [0]}
-
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);