reactjs - 使用 React 和 Webpack 设置 Airbnb ESLint

标签 reactjs webpack eslint eslint-config-airbnb

我正在尝试在我的 React 项目上使用 Airbnb 的 Javascript 标准设置 linting,它使用 webpack。

根据评论更新了最新的软件包。

"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 配置中还有一个预加载器设置

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 文件,其中包含以下内容

{
  "extends": "airbnb",
   "env": {
      "node": true,
      "es6": true
   }
 }

这给了我以下错误:

Configuration for rule "react/jsx-sort-props" is invalid:
Value "data["0"].shorthandLast" has additional properties.

如果我删除我认为可能存在冲突的 .eslintrc 文件,则会收到以下错误:

 error  Parsing error: The keyword 'const' is reserved

随后出现 npm 错误,导致任务退出。

最佳答案

所以,我遇到了同样的问题,但我使用当前软件包的最新版本修复了此错误:

"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",

请完成本教程: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 文件

    {
      "extends": "airbnb"
    }

关于reactjs - 使用 React 和 Webpack 设置 Airbnb ESLint,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38757885/

相关文章:

reactjs - 如何验证传递给 Formik 中匿名组件的 props?

reactjs - 使用钩子(Hook)将 Prop 从父组件传递给子组件?

reactjs - 使用 create-react-app 后,我安装的任何软件包会破坏我的代码吗?

javascript - 获取数据时显示加载页面 - React Redux

javascript - 样式组件和自定义样式?

symfony - 在外部js文件中使用Twig变量

javascript - Webpack 开发服务器重新加载,但页面未更改

javascript - webpack 2.2.1 以错误的顺序/位置排列依赖项

用于带有规则文件的 Gulp 的 PHP Linter?

typescript - 哪个规则可以在 ESLint CLI 输出中抛出 "Module has no exported member"?