Nextjs Reactjs：使用eslint时出现意外令牌'<'错误答案

【问题标题】：Nextjs Reactjs: Unexpected token '<' Error when using eslintNextjs Reactjs：使用eslint时出现意外令牌'<'错误
【发布时间】：2017-06-15 23:38:27
【问题描述】：

我正在开发一个 Nextjs-React 应用程序，当我运行 npm run lint 错误：../../Projects/app/pages/index.js ESlint Parsing error: Unexpected token < 为所有包含 jsx 的 .js 文件时出现此错误。所以在我看来eslint 不喜欢在扩展名为“.js”的文件中包含 JSX

这些是我的 babel eslint 包：

 "babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.7",
"babel-plugin-rewire": "^1.0.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-react-optimize": "^1.0.1",
"babel-types": "^6.18.0",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.6.0",
"webpack": "^1.13.3",
"webpack-hot-middleware": "^2.13.2",
"webpack-middleware": "^1.5.1"

这些是我的规则：

"babel": {
"presets": [
  "react",
  "latest"
],
"plugins": [
  "syntax-trailing-function-commas",
  "transform-async-to-generator",
  "transform-es2015-destructuring",
  "transform-es2015-parameters",
  "transform-es2015-duplicate-keys",
  "transform-es2015-modules-commonjs",
  "transform-exponentiation-operator",
  "transform-runtime"
],
"env": {
  "test": {
    "plugins": [
      "rewire"
    ]
  }
}},

Eslint 配置：

"eslintConfig": {
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
  "browser": true
},
"rules": {
  "jsx-quotes": [
    2,
    "prefer-double"
  ],
  "no-confusing-arrow": 0,
  "react/jsx-filename-extension": [
    1,
    {
      "extensions": [".js", ".jsx"]
    }
  ],
  "react/jsx-quotes": 0,
  "react/jsx-boolean-value": 0,
  "jsx-a11y/anchor-has-content": "off",
  "import/extensions": "off",
  "comma-dangle": [
    2,
    {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "ignore"
    }
  ],
  "no-plusplus": [
    2,
    {
      "allowForLoopAfterthoughts": true
    }
  ]
}},

不知道如何解决这个问题，我已经在网上检查了其他答案，但没有任何帮助。设置特定规则 "rules": { "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] } 也没有帮助。代码构建得很好，只是 linter 失败了

【问题讨论】：

您在 linting 或 transpiling 时遇到错误吗？
我将其视为 linting 错误
你看过这个问题吗？ github.com/yannickcr/eslint-plugin-react/issues/…
我做到了，我正在按照他的建议做，正在使用 "parser": "babel-eslint" 而不是 babel 作为我的解析器，但仍然卡住

标签： reactjs react-jsx babeljs eslint next.js

【解决方案1】：

解决了这个answer。问题是我没有编译 webpack 配置代码，因为 .babelrc 会覆盖我在 webpack 级别的配置

【讨论】：