使用 React 和 Webpack 设置 Airbnb ESLint

Posted

技术标签:

【中文标题】使用 React 和 Webpack 设置 Airbnb ESLint【英文标题】:Setting up Airbnb ESLint with React and Webpack 【发布时间】:2016-12-10 00:27:01 【问题描述】:

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

更新了基于 cmets 的最新包。

"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 试过了吗?最近发生了某些更改,并且基于错误,这就是它中断的原因。如果由于某种原因你还不能使用 eslint 3,那么你必须使用与它兼容的旧版本的预设。 我实际上安装了 eslint 3.9.5 @JuhoVepsäläinen 版本够晚吗? 它会选择"eslint": "^2.13.1",,即使你已经全局安装了它。 我将 package.json 更新为 3.9.5,但没有任何区别 确保eslint-plugin-react 也是最新的。他们不久前发布了6.0.0,这可能会解决您的问题,因为这是错误的根源。 【参考方案1】:

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

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

【讨论】:

这正是我必须做的,我不得不删除所有的包并重新安装,因为有一些奇怪的冲突! 我不确定要删除全局 eslint 还是重新安装……我这样做了。实际上,它需要重新启动 Atom 才能消失。

以上是关于使用 React 和 Webpack 设置 Airbnb ESLint的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 react webpack 设置 bootstrap 4 scss

Jest 遇到了意外的令牌(React、Typescript、Babel、Jest 和 Webpack 设置)

在 Electron + React + Webpack 设置中找不到模块“电子”

CORS 与 React、Webpack 和 Axios

使用webpack和react搭建项目

使用 Webpack、SASS 和 React 在“main.scss”上出现错误“找不到模块”