问如何在Atom编辑器上配置React的ESLint

EN

要让Eslint与React.js很好地协同工作：

1. Install linter &linter
2. Run npm install eslint-plugin-react
3. Add "plugins": ["react"] to your .eslintrc config file
4. 将"ecmaFeatures": {"jsx": true}添加到.eslintrc配置文件

<代码>G212

以下是.eslintrc配置文件的示例：

{
    "env": {
        "browser": true,
        "node": true
    },

    "globals": {
        "React": true
    },

    "ecmaFeatures": {
        "jsx": true
    },

    "plugins": [
        "react"
    ]
}

我现在使用的是Eslint v1.1.0。

附注:我必须同时安装eslint和eslint-plugin-react作为项目依赖项(例如，npm install eslint eslint-plugin-react --save-dev)。希望这能有所帮助。

更新2016年的答案:只需在Atom中安装react包，并在项目根目录(或主目录)中添加包含以下内容的.eslintrc文件：

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true
  }
}

并重新打开任何包含JSX的文件，它应该可以工作。

您需要编辑将由ESLint拾取的项目本地.eslintrc文件。如果你想与Atom集成，你可以安装插件linter和linter-eslint。

为了快速为React最佳实践设置ESLint，当前的最佳选择是安装npm包eslint-plugin-react并扩展其recommended配置，而不是手动切换许多规则：

{
  "extends": [ "eslint:recommended", "plugin:react/recommended" ],
  "plugins": [ "react" ]
}

这将启用ESLint和React预设中的eslint-plugin-react和推荐规则。在最新的ESLint user-guide中有更多有价值的信息。

以下是针对ES6和webpack优化的解析器选项的示例：

{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "impliedStrict": true,
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  }
}