[英]How to config ESLint for React on Atom Editor
In Atom Editor I installed the following plugins 在Atom Editor中,我安装了以下插件
It seems they don't recognize the JSX syntaxis. 它们似乎无法识别JSX语法。
I have it working on the command line but had to use other plugins like esprima-fb
and eslint-plugin-react
. 我让它在命令行上工作,但不得不使用其他插件,如
esprima-fb
和eslint-plugin-react
。 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. 看起来Atom编辑器没有这样的插件,想知道你是否有人知道如何解决这个问题。
To get Eslint working nicely with React.js: 让Eslint与React.js很好地配合:
npm install eslint-plugin-react
npm install eslint-plugin-react
"plugins": ["react"]
to your .eslintrc config file "plugins": ["react"]
到.eslintrc配置文件中 "ecmaFeatures": {"jsx": true}
to your .eslintrc config file "ecmaFeatures": {"jsx": true}
到.eslintrc配置文件中 Here is an example of a .eslintrc
config file: 以下是
.eslintrc
配置文件的示例:
{
"env": {
"browser": true,
"node": true
},
"globals": {
"React": true
},
"ecmaFeatures": {
"jsx": true
},
"plugins": [
"react"
]
}
I am using Eslint v1.1.0 at the moment. 我目前正在使用Eslint v1.1.0。
Side note : I had to install both eslint and eslint-plugin-react as project dependencies (eg, npm install eslint eslint-plugin-react --save-dev
). 旁注 :我必须安装eslint和eslint-plugin-react作为项目依赖项(例如,
npm install eslint eslint-plugin-react --save-dev
)。 Hopefully this helps. 希望这会有所帮助。
Updated answer for 2016: just install the react
package in Atom and add a .eslintrc
file in your project root (or in your home dir) containing the following: 2016年的更新答案:只需在Atom中安装
react
包,并在项目根目录(或主目录)中添加一个.eslintrc
文件,其中包含以下内容:
{
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true
}
}
And re-open any files containing JSX and it should work. 并重新打开包含JSX的任何文件,它应该工作。
You need to edit a project local .eslintrc
file that will get picked up by ESLint. 您需要编辑一个项目本地
.eslintrc
文件,该文件将被ESLint选中。 If you want integration with Atom, you can install the plugins linter and linter-eslint . 如果你想用的Atom集成,您可以安装插件棉短绒和棉短绒,eslint 。
To quickly setup ESLint for React best practices, current best option is installing the npm package eslint-plugin-react
and extending their recommended
configuration instead of toggling many rules manually: 要快速设置ESLint for React最佳实践,当前最佳选择是安装npm包
eslint-plugin-react
并扩展其recommended
配置,而不是手动切换许多规则:
{
"extends": [ "eslint:recommended", "plugin:react/recommended" ],
"plugins": [ "react" ]
}
This will enable eslint-plugin-react
and recommended rules from ESLint & React presets. 这将启用
eslint-plugin-react
和React预设的eslint-plugin-react
和推荐规则。 There is more valuable information in the latest ESLint user-guide itself. 最新的ESLint 用户指南本身提供了更多有价值的信息。
Here is an example of parser options optimized for ES6 and webpack: 以下是针对ES6和webpack优化的解析器选项示例:
{
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 6,
"ecmaFeatures": {
"impliedStrict": true,
"experimentalObjectRestSpread": true,
"jsx": true
}
}
}
I use Atom and it works just fine. 我使用Atom,它工作得很好。 You just need an
.eslintrc
in your project root which tells ESLint that you're using eslint-plugin-react
. 你只需要一个
.eslintrc
项目中的根,它告诉您使用ESLint eslint-plugin-react
。
For Mac user: Go to Atom --> preferences --> Install --> search package linter-eslint --> click install 对于Mac用户:转到Atom - >首选项 - >安装 - >搜索包linter-eslint - >单击安装
For Ubuntu user: Go to Edit --> preferences --> Install --> search package linter-eslint --> click install 对于Ubuntu用户:转到编辑 - >首选项 - >安装 - >搜索包linter-eslint - >单击安装
go to command line ---> npm install --save-dev eslint-config-rallycoding 转到命令行---> npm install --save-dev eslint-config-rallycoding
Come to atom make new file .eslintrc and extend the rallycoding. 来源原子制作新文件.eslintrc并扩展拉力赛编码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.