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

Question

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

linter
linter-eslint

他们似乎不认识 JSX syntaxis。

我在命令行上使用它，但不得不使用其他插件，如 esprima-fb 和 eslint-plugin-react。看起来 Atom 编辑器没有这样的插件，想知道你们中是否有人知道解决这个问题的方法。

Answer 1

我使用 Atom，它工作得很好。您只需要在项目根目录中添加一个 .eslintrc 即可，它告诉 ESLint 您正在使用 eslint-plugin-react.

Answer 2

让 Eslint 与 React.js 良好地工作：

安装 linter 和 linter-eslint 插件
运行 npm install eslint-plugin-react
将 "plugins": ["react"] 添加到您的 .eslintrc 配置文件
将 "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 3

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

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

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

Answer 4

您需要在本地编辑一个项目.eslintrc file that will get picked up by ESLint. If you want integration with Atom, you can install the plugins linter and linter-eslint。

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

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

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

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

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

Answer 5

对于 Mac 用户：转到 Atom --> 首选项 --> 安装 --> 搜索包 linter-eslint --> 单击安装
对于 Ubuntu 用户：转到编辑 --> 首选项 --> 安装 --> 搜索包 linter-eslint --> 单击安装
转到命令行 ---> npm install --save-dev eslint-config-rallycoding
来atom制作新文件.eslintrc并扩展rallycoding。

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

How to config ESLint for React on Atom Editor

reactjs

atom-editor

react-jsx

eslint