Question

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

linter
棉短绒-eslint

他们似乎无法识别JSX语法。

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

Answer 1

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

安装linter＆amp; linter-eslint plugins
运行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 2

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

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

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

Answer 3

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

要快速设置ESLint for React最佳做法，当前最佳选择是安装npm包eslint-plugin-react并扩展其<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://miromannino.github.io/Justified-Gallery/bower_components/justified-gallery/dist/js/jquery.justifiedGallery.min.js"></script> <link rel="stylesheet" href="https://miromannino.github.io/Justified-Gallery/bower_components/justified-gallery/dist/css/justifiedGallery.min.css"> <link rel="stylesheet" href=" https://miromannino.github.io/Justified-Gallery/bower_components/font-awesome/css/font-awesome.min.css "> <div id="mygallery" class="global-height scrollable"> <div class="hovereffect"> <img alt="Title 1" src="http://placehold.it/242x172" /> <div class="overlay"> <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a> </div> </div> <div class="hovereffect"> <img alt="Title 1" src="http://placehold.it/256x172" /> <div class="overlay"> <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a> </div> </div> <div class="hovereffect"> <img alt="Title 1" src="http://placehold.it/115x172" /> <div class="overlay"> <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a> </div> </div> </div>配置，而不是手动切换许多规则：

recommended

这将启用{ "extends": [ "eslint:recommended", "plugin:react/recommended" ], "plugins": [ "react" ] }和ESLint＆amp ;;的推荐规则。反应预设。最新的ESLint user-guide本身提供了更多有价值的信息。

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

eslint-plugin-react

Answer 4

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

Answer 5

对于Mac用户：转到Atom - ＆gt;偏好 - ＆gt;安装 - ＆gt; search package linter-eslint - ＆gt;点击安装
对于Ubuntu用户：转到编辑 - ＆gt;偏好 - ＆gt;安装 - ＆gt; search package linter-eslint - ＆gt;点击安装
转到命令行---＆gt; npm install --save-dev eslint-config-rallycoding
来到atom创建新文件.eslintrc并扩展rally编码。

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

5 个答案: