54

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

  1. 短绒
  2. linter-eslint

似乎他们不认识 JSX 语法。

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

4

5 回答 5

68

为了让 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）。希望这会有所帮助。

于 2015-05-18T08:52:27.410 回答
36

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

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

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

于 2016-02-24T19:19:07.473 回答
7

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

为了快速为 React 最佳实践设置 ESLint，当前的最佳选择是安装 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
    }
  }
}
于 2016-08-27T10:29:37.377 回答
0

我使用 Atom，它工作得很好。你只需要.eslintrc在你的项目根目录中告诉 ESLint 你正在使用eslint-plugin-react.

于 2015-05-18T05:54:43.473 回答
0

  1. 对于 Mac 用户：转到 Atom --> 首选项 --> 安装 --> 搜索包 linter-eslint --> 点击安装

  2. 对于 Ubuntu 用户：转到编辑 --> 首选项 --> 安装 --> 搜索包 linter-eslint --> 单击安装

  3. 转到命令行---> npm install --save-dev eslint-config-rallycoding

  4. 来 atom 创建新文件 .eslintrc 并扩展 rallycoding。

于 2017-03-06T12:44:23.277 回答