当前位置: 首页 > 面试题库 >

使用React和Webpack设置Airbnb ESLint

于意智
2023-03-14
问题内容

我正在尝试在我的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",

并且,请执行本教程:使用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"
    }


 类似资料:
  • 问题内容: 我对文档的理解 我看到Babel 6目前具有三个预设:es2015,react和stage-x。我读到我可以像这样设置它们: 或直接在package.JSON中,如下所示: 我可以进一步将babel-loader与webpack结合使用,如下所示: 我的问题 因此,为了将所有内容都编译得井井有条,我在Webpack配置中添加了刚刚更新为与Babel6配合使用的内容: 现在,当我 没有

  • 我看到巴别塔6现在有三个预设:es2015,反应和阶段x。我读到我可以在中设置这些: 或者直接包装。像这样: 我可以将babel loader与以下网页一起使用: 因此,为了编译一切漂亮和干净,我添加了,它刚刚更新为与Babel6一起工作,到webpack配置如下: 现在,当我编译没有在根或预设选项设置在,即只有在webpack配置中设置了Babel-loader es2015预设的情况下,我才会

  • 这本小书的目的是引导你进入 React 和 Webpack 的世界。他们两个都是非常有用的技术,如果同时使用他们,前端开发会更加有趣。

  • 本文向大家介绍webpack Webpack,React JSX,Babel,ES6,简单配置,包括了webpack Webpack,React JSX,Babel,ES6,简单配置的使用技巧和注意事项,需要的朋友参考一下 示例 确保您安装了正确的npm依赖项(babel决定将其自身拆分为一堆软件包,与“对等依赖项”有关): npm install webpack webpack-node-ext

  • Angular 2采用将应用程序分为许多不同组件的方法,每个组件可以有多个文件。以这种方式分离应用程序逻辑对程序员是有好处的,但是会减损用户体验,因为这样做会增加页面加载时间。 HTTP2旨在以一种方式解决这个问题,但是直到更多的知道它的效果,我们将需要捆绑我们的应用程序的不同部分,并压缩它。 我们的平台,浏览器,必须继续提供所有现有代码的向后兼容性,并且这需要慢慢移动添加到HTML / CSS

  • 当我启动应用程序时,我没有看到任何错误,但是是一个空数组。组件本身位于。我试着直接加载图像: 但无论我指定的路径是什么,如果出现错误,它就不能正常工作了。但是,我需要从文件夹加载所有图像,而不是静态加载,因为我事先不知道图像的名称。如有任何建议,将不胜感激。