使用React和Webpack设置Airbnb ESLint [英] Setting up Airbnb ESLint with React and Webpack
问题描述
我正在尝试在我的React项目上使用Airbnb的Javascript标准设置lint,它使用的是webpack。
I am trying to set up linting with Airbnb's Javascript standards on my React project, it uses webpack.
已根据评论更新了最新软件包。
Updated with latest packages based on comments.
"babel-eslint": "^6.1.2",
"eslint": "^3.2.2",
"eslint-config-airbnb": "^10.0.0",
"eslint-plugin-import": "^1.12.0",
"eslint-plugin-jsx-a11y": "^2.0.1",
"eslint-plugin-react": "^6.0.0",
"jshint": "^2.9.2",
"jshint-loader": "^0.8.3",
"json-loader": "^0.5.4",
我的webpack配置中也有预加载器设置
I also have a preloader setup in my webpack config
preLoaders: [
{
test: /\.jsx?$/,
loaders: ['eslint'],
// define an include so we check just the files we need
include: PATHS.app
}
],
以下内容用于运行脚本
"lint": "eslint . --ext .js --ext .jsx --ignore-path .gitignore --cache",
我也有一个 .eslintrc
具有以下内容的文件
I also have a .eslintrc
file which has the following
{
"extends": "airbnb",
"env": {
"node": true,
"es6": true
}
}
这给了我以下错误:
Configuration for rule "react/jsx-sort-props" is invalid:
Value "data["0"].shorthandLast" has additional properties.
如果我删除了 .eslintrc
文件,我认为可能会发生冲突,但出现以下错误:
If i remove the .eslintrc
file which i thought might be conflicting, I get the following error:
error Parsing error: The keyword 'const' is reserved
随后出现npm错误,导致任务退出。
Followed by a npm error which causes the task to exit.
任何帮助将不胜感激!
Any help would be appreciated!
推荐答案
所以,我遇到了同样的问题,但是我使用当前软件包的最新版本解决了该错误:
So, I had the same issue, but I fixed this error using last version of current packages:
"eslint": "3.2.2",
"eslint-config-airbnb": "10.0.0",
"eslint-loader": "1.5.0",
"eslint-plugin-import": "1.12.0",
"eslint-plugin-jsx-a11y": "2.0.1",
"eslint-plugin-mocha": "2.2.0",
"eslint-plugin-react": "6.0.0",
然后,请执行本教程:使用ESLint + Babel + Webpack来响应代码样式
And please, do this tutorial: React Code Style with ESLint + Babel + Webpack
module: {
preLoaders: [
{
test: /\.jsx?$/,
loaders: ['eslint-loader'],
include: path.join(__dirname, 'src'),
exclude: path.join(__dirname, 'src/app/container')
}
],
...
eslint: {
configFile: './.eslintrc', //your .eslintrc file
emitWarning: true
}
.eslintrc文件
.eslintrc file
{
"extends": "airbnb"
}
这篇关于使用React和Webpack设置Airbnb ESLint的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!