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

Question

在Atom Editor中,我安装了以下插件

1. 棉短绒
2. 棉短绒,eslint

它们似乎无法识别JSX语法.

我有它在命令行上工作但必须使用像esprima-fb和的其他插件eslint-plugin-react.看起来Atom编辑器没有这样的插件,想知道你是否有人知道如何解决这个问题.

Answer 1

让Eslint与React.js很好地配合:

1. 安装linter&linter-eslint插件
2. 跑 npm install eslint-plugin-react
3. 添加"plugins": ["react"]到.eslintrc配置文件
4. 添加"ecmaFeatures": {"jsx": true}到.eslintrc配置文件

以下是.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).希望这会有所帮助.

Answer 2

更新了2016年的答案:只需react在Atom中安装软件包,然后.eslintrc在项目根目录(或家庭目录)中添加一个包含以下内容的文件:

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

并重新打开包含JSX的任何文件,它应该工作.

Answer 3

您需要编辑.eslintrc将由ESLint拾取的项目本地文件.如果你想用的Atom集成,您可以安装插件棉短绒和棉短绒,eslint.

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

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

这将启用eslint-plugin-react和推荐ESLint和React预设的规则.最新的ESLint 用户指南本身提供了更多有价值的信息.

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

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