Nextjs Reactjs：使用 eslint 时出现意外的标记“<”错误

Question

我正在开发 Nextjs-React 应用程序，当我运行 npm run lint 错误时收到此错误：../../Projects/app/pages/index.js ESlint Parsing error: Unexpected token < 所有 .js 文件其中有 jsx。所以在我看来 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
    }
  ]
}},

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

Answer 1

已解决。问题是我没有转译 webpack 配置代码，因为 .babelrc 会在 webpack 级别覆盖我的配置

Nextjs Reactjs：使用 eslint 时出现意外的标记“<”错误

Nextjs Reactjs: Unexpected token '<' Error when using eslint

reactjs

react-jsx

babeljs

eslint

next.js