blocks|key|133231|text|我使用Atom，它工作得很好。您只需要在项目根目录中创建一个.eslintrc，它将告诉ESLint您正在使用eslint-plugin-react。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|133232|entityMap^0|U|9|1J|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I use Atom and it works just fine. You just need an <code>.eslintrc</code> in your project root which tells ESLint that you're using <code>eslint-plugin-react</code>.

blocks|key|2701388|text|要让Eslint与React.js很好地协同工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2701389|2701390|Install+linter+&linter|ordered-list-item|2701391|Run+npm+install+eslint-plugin-react|offset|length|style|CODE|2701392|Add+"plugins":+["react"]+to+your+.eslintrc+config+file|2701393|将"ecmaFeatures":+{"jsx":+true}添加到.eslintrc配置文件|2701394|<代码>G212|2701395|以下是.eslintrc配置文件的示例：|2701396|{
++++"env":+{
++++++++"browser":+true,
++++++++"node":+true
++++},

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

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

++++"plugins":+[
++++++++"react"
++++]
}|code-block|syntax|javascript|2701397|我现在使用的是Eslint+v1.1.0。|2701398|附注:我必须同时安装eslint和eslint-plugin-react作为项目依赖项(例如，npm+install+eslint+eslint-plugin-react+--save-dev)。希望这能有所帮助。|2701399|entityMap^0|0|0|0|4|V|0|4|K|0|1|T|0|0|3|9|0|0|0|1B|1D|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|17|8|@$H|18|I|19|J|K]]|9|@]|A|$]]|$1|L|3|M|5|E|7|1A|8|@$H|1B|I|1C|J|K]]|9|@]|A|$]]|$1|N|3|O|5|E|7|1D|8|@$H|1E|I|1F|J|K]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1G|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1H|8|@$H|1I|I|1J|J|K]]|9|@]|A|$]]|$1|T|3|U|5|V|7|1K|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1M|8|@$H|1N|I|1O|J|K]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|13|$]]

To get Eslint working nicely with React.js:

<ol>
<li>Install linter &amp; linter-eslint plugins</li>
<li>Run <code>npm install eslint-plugin-react</code></li>
<li>Add <code>"plugins": ["react"]</code> to your .eslintrc config file</li>
<li>Add <code>"ecmaFeatures": {"jsx": true}</code> to your .eslintrc config file</li>
</ol>

Here is an example of a <code>.eslintrc</code> config file:

<pre><code>{
 "env": {
 "browser": true,
 "node": true
 },

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

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

 "plugins": [
 "react"
 ]
}
</code></pre>

I am using Eslint v1.1.0 at the moment.

Side note:
I had to install both eslint and eslint-plugin-react as project dependencies (e.g., <code>npm install eslint eslint-plugin-react --save-dev</code>). Hopefully this helps.

blocks|key|2913465|text|更新2016年的答案:只需在Atom中安装react包，并在项目根目录(或主目录)中添加包含以下内容的.eslintrc文件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2913466|{
++"parserOptions":+{
++++"ecmaFeatures":+{
++++++"jsx":+true
++++}
++},
++"env":+{
++++"es6":+true
++}
}|code-block|syntax|javascript|2913467|并重新打开任何包含JSX的文件，它应该可以工作。|2913468|entityMap|0|LINK|mutability|MUTABLE|url|https://orktes.github.io/atom-react/^0|L|5|1F|9|L|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Updated answer for 2016: just install the <a href="https://orktes.github.io/atom-react/"><code>react</code></a> package in Atom and add a <code>.eslintrc</code> file in your project root (or in your home dir) containing the following:

<pre><code>{
 "parserOptions": {
 "ecmaFeatures": {
 "jsx": true
 }
 },
 "env": {
 "es6": true
 }
}
</code></pre>

And re-open any files containing JSX and it should work.

blocks|key|134521|text|您需要编辑将由ESLint拾取的项目本地.eslintrc文件。如果你想与Atom集成，你可以安装插件linter和linter-eslint。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|134522|为了快速为React最佳实践设置ESLint，当前的最佳选择是安装npm包eslint-plugin-react并扩展其recommended配置，而不是手动切换许多规则：|134523|{
++"extends":+[+"eslint:recommended",+"plugin:react/recommended"+],
++"plugins":+[+"react"+]
}|code-block|syntax|javascript|134524|这将启用ESLint和React预设中的eslint-plugin-react和推荐规则。在最新的ESLint+user-guide中有更多有价值的信息。|134525|以下是针对ES6和webpack优化的解析器选项的示例：|134526|{
++"parserOptions":+{
++++"sourceType":+"module",
++++"ecmaVersion":+6,
++++"ecmaFeatures":+{
++++++"impliedStrict":+true,
++++++"experimentalObjectRestSpread":+true,
++++++"jsx":+true
++++}
++}
}|134527|entityMap|0|LINK|mutability|MUTABLE|url|http://eslint.org/docs/user-guide/configuring#configuration-file-formats|1|https://atom.io/packages/linter|2|https://atom.io/packages/linter-eslint|3|https://github.com/yannickcr/eslint-plugin-react|4|http://eslint.org/docs/user-guide/configuring^0|K|9|K|9|0|1F|6|1|1M|D|2|0|11|J|1O|B|11|J|3|0|0|K|J|1K|A|4|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@$9|1B|A|1C|1|1D]|$9|1E|A|1F|1|1G]|$9|1H|A|1I|1|1J]]|E|$]]|$1|F|3|G|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|H|3|I|5|J|7|1S|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1T|8|@$9|1U|A|1V|B|C]]|D|@$9|1W|A|1X|1|1Y]]|E|$]]|$1|O|3|P|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|20|8|@]|D|@]|E|$K|L]]|$1|S|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]|12|$5|V|W|X|E|$Y|13]]|14|$5|V|W|X|E|$Y|15]]|16|$5|V|W|X|E|$Y|17]]]]

You need to edit a project local <a href="http://eslint.org/docs/user-guide/configuring#configuration-file-formats" rel="noreferrer"><code>.eslintrc</code></a> file that will get picked up by ESLint. If you want integration with Atom, you can install the plugins <a href="https://atom.io/packages/linter" rel="noreferrer">linter</a> and <a href="https://atom.io/packages/linter-eslint" rel="noreferrer">linter-eslint</a>.

To quickly setup ESLint for React best practices, current best option is installing the npm package <a href="https://github.com/yannickcr/eslint-plugin-react" rel="noreferrer"><code>eslint-plugin-react</code></a> and extending their <code>recommended</code> configuration instead of toggling many rules manually:

<pre><code>{
 "extends": [ "eslint:recommended", "plugin:react/recommended" ],
 "plugins": [ "react" ]
}
</code></pre>

This will enable <code>eslint-plugin-react</code> and recommended rules from ESLint &amp; React presets. There is more valuable information in the latest ESLint <a href="http://eslint.org/docs/user-guide/configuring" rel="noreferrer">user-guide</a> itself.

Here is an example of parser options optimized for ES6 and webpack:

<pre><code>{
 "parserOptions": {
 "sourceType": "module",
 "ecmaVersion": 6,
 "ecmaFeatures": {
 "impliedStrict": true,
 "experimentalObjectRestSpread": true,
 "jsx": true
 }
 }
}
</code></pre>

blocks|key|133280|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|133281|For+Mac用户:转到atom+-->首选项-->安装-->搜索软件包linter-eslint+-->单击安装|ordered-list-item|133282|For+Ubuntu用户:转到编辑-->首选项-->安装-->搜索软件包linter-eslint+-->单击安装|133283|转到命令行->+npm安装-->保存-开发eslint-config-rallycoding|133284|Come+to+Atom制作新文件.eslintrc并扩展rallycoding。|133285|133286|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|M|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|N|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|O|7|@]|8|@]|9|$]]|$1|F|3|G|4|C|6|P|7|@]|8|@]|9|$]]|$1|H|3|I|4|C|6|Q|7|@]|8|@]|9|$]]|$1|J|3|-4|4|5|6|R|7|@]|8|@]|9|$]]|$1|K|3|-4|4|5|6|S|7|@]|8|@]|9|$]]]|L|$]]

<ol>
<li>For Mac user: Go to Atom --> preferences --> Install --> search package linter-eslint --> click install</li>
<li>For Ubuntu user: Go to Edit --> preferences --> Install --> search package linter-eslint --> click install</li>
<li>go to command line ---> npm install --save-dev eslint-config-rallycoding</li>
<li>Come to atom make new file .eslintrc and extend the rallycoding.</li>
</ol>

In Atom Editor I installed the following plugins

<ol>
<li>linter </li>
<li>linter-eslint</li>
</ol>

It seems they don't recognize the JSX syntaxis. 

I have it working on the command line but had to use other plugins like <code>esprima-fb</code> and <code>eslint-plugin-react</code>. Looks like there are no such plugins for Atom Editor and would like to know if anyone of you knows a way to hack around this.

How to config ESLint for React on Atom Editor

Ubuntu

在Atom Editor中，我安装了以下插件林特linter-eslint他们似乎不能识别JSX语法。我让它在命令行上工作，但不得不使用其他插件，如esprima-fb和eslint-plugin-react。看起来Atom Editor没有这样的插件，我想知道你们中是否有人知道解决这个问题的方法。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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