JSX non autorisé dans les fichiers avec extension".js ' avec eslint-config-airbnb
j'ai installé eslint-config-airbnb qui est censé pré configurer ESLINT pour Réagir:
notre export par défaut contient toutes nos règles ESLint, y compris ECMAScript 6+ et React. Il nécessite eslint, eslint-plugin d'importation, eslint-plugin-react, et eslint-plugin-jsx-a11y.
Mon .eslintrc extension de sa configuration:
{ "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
}
}
Malheureusement j'obtiens l'erreur suivante lors de peluchage un .fichier js avec Réagir JSX code à l'intérieur:
error JSX not allowed in files with extension '.js' react/jsx-filename-extension
est-ce que la configuration eslint-config-airbnb ne réagit pas déjà au support JSX, comme indiqué ?
Que faire pour supprimer cette erreur ?
4 réponses
soit modifier vos extensions de fichier en .jsx comme mentionné ou désactiver le jsx-nom de fichier de l'extension la règle. Vous pouvez ajouter ce qui suit à votre configuration pour permettre .js extensions pour JSX.
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
C'est du travail pour moi. de l'espoir pour vous aider.
désactiver jsx-filename-extension dans
.eslintrc:"règles": { "réagir/jsx-nom de fichier d'extension": [0] }
webpack.config.js:résoudre: { extension.'[ :js','.jsx'] },
à exposer sur Martin réponse, il semble qu'il n'est pas possible, actuellement, d'utiliser JSX à Réagir Natif. A PR a été créé mais est retourné en raison de préoccupations au sujet de la fragmentation et des conséquences inconnues d'avoir des choses comme index.ios.jsx. Je ne suis pas sûr comment AirBnb fonctionne autour de cela ou s'ils le font, mais j'ai utilisé fondamentalement le même rules bloc-Martin.
Si vous ne voulez pas changer votre extension de fichier, vous pouvez exporter une fonction qui renvoie jsx, puis d'importer et d'appeler cette fonction dans votre fichier js.
// greeter.jsx
import React from 'react';
export default name => (
<div>
{`Hello, ${name}!`}
</div>
);
et
// index.js
import ReactDOM from 'react-dom';
import greeter from './components/greeter';
const main = document.getElementsByTagName('main')[0];
ReactDOM.render(greeter('World'), main);