Question

我已经安装了eslint-config-airbnb，它应该为React预先配置ESLINT：

我们的默认导出包含所有ESLint规则，包括 ECMAScript 6+和React。它需要eslint，eslint-plugin-import， eslint-plugin-react，和eslint-plugin-jsx-a11y。

我的.eslintrc扩展了其配置：

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

不幸的是，当我在其中使用React JSX代码绘制.js文件时，我收到以下错误：

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

如上所述，配置eslint-config-airbnb已经配置了对支持JSX的反应吗？

如何删除该错误？

Answer 1

如上所述，将文件扩展名更改为target 'SmartSpaces' do xcodeproj 'SmartSpaces/SmartSpaces.xcodeproj' pod 'CorePlot', :git => 'https://github.com/core-plot/core-plot.git' pod 'Fingertips' pod 'ReactiveCocoa', '~> 2.3.0' pod 'CocoaLumberjack', '~> 2.0.2' pod 'RestKit', '~> 0.26' end post_install do |installer| installer.pods_project.targets.each do |target| if target.to_s == 'RestKit' target.build_configurations.each do |config| config.build_settings['OTHER_LDFLAGS'] = '$(inherited) -framework "CocoaLumberjack"' end end end或禁用jsx-filename-extension规则。您可以将以下内容添加到配置中，以允许JSX的Diff([1,2,3,4] [1,2,3]) = [4] Diff([1,2,2,2], [1,2]) = [2,2] Diff([2, 2, 1, 2], [1,2]) = [2,2] Diff([1,1,1,1,1,1,2,2,2,2,2,2], [1,1,2,2]) = [1,1,1,1,2,2,2,2] public static void main(String[] args) { int[] a = {1,2,3,4}; int[] b = {1,2,3}; Arrays.sort(a);// The sorting only required for input example 3. Arrays.sort(b);// List<Integer> listA = new ArrayList<>(); for( int i = 0; i < a.length; i++ ) { if( i >= b.length ) { listA.add(a[i]); } for( int j = i; j < b.length; j++ ) { if( a[i] == b[j] || listA.contains(a[i])) { break; } else { listA.add(a[i]); } } }//end of for loop System.out.println(listA); } With is algorithem, only example 4 won't work.扩展名。

.jsx

Answer 2

这对我有用。希望能帮到你。

在.eslintrc中禁用jsx-filename-extension：

“规则”：{ “react / jsx-filename-extension”：[0] }
：

解决：{ 扩展名：['。js'，'。jsx'] }，

Answer 3

如果您不想更改文件扩展名，则可以导出一个返回jsx的函数，然后导入并在js文件中调用该函数。

UIApplication.shared.statusBarStyle = .lightContent

然后

// greeter.jsx

import React from 'react';

export default name => (
  <div>
    {`Hello, ${name}!`}
  </div>
);

Answer 4

要解释Martin's答案，目前似乎无法在React Native中使用JSX。 A PR已创建，但由于担心像index.ios.jsx这样的事情造成的碎片化和未知后果而被恢复。我不确定AirBnb是如何解决这个问题的，或者如果他们这样做，但我使用的基本上与Martin一样rules块。

Answer 5

跟随React documentation：

每个JSX元素只是调用React.createElement（component，props，... children）的语法糖。

在Airbnb's style guide之后：

请勿使用React.createElement ，除非您要从非JSX的文件中初始化应用程序。

您可以这样做：

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));

Answer 6

如果它对您不起作用，请给我一个假人

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

Answer 7

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

JSX不允许在扩展名为＆＃39;的文件中的.js＆＃39;与eslint-config-airbnb

7 个答案: