javascript - ESLint 出现解析错误 Unexpected token/

Question

我有这样的代码:

import 'app/css/normalize.css'
import 'app/css/app.css'

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <div>
      <h1>Finances</h1>
      <a href="/test.txt" target="_blank">Test</a>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

ESLint 提示 /在</h1>是无效的。这是为什么？

我的 ESLint 配置

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "indent": [
      "error",
      4
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "never"
    ]
  }
};

ESLint 输出

> finances-web@1.0.0 lint /home/jiewmeng/Dropbox/finances2019/web
> eslint scripts/**/*.js


/home/jiewmeng/Dropbox/finances2019/web/scripts/app.js
  10:20  error  Parsing error: Unexpected token /

✖ 1 problem (1 error, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! finances-web@1.0.0 lint: `eslint scripts/**/*.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the finances-web@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jiewmeng/.npm/_logs/2018-12-23T04_08_42_410Z-debug.log

会不会和我的react版本有关？

{
  "name": "finances-web",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "lint": "eslint scripts/**/*.js",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --hot --color --history-api-fallback --config webpack.config.js"
  },
  "author": "Jiew Meng <jiewmeng@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^2.0.1",
    "eslint": "^5.10.0",
    "eslint-plugin-react": "^7.11.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.5.0",
    "react-hot-loader": "^4.6.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "lodash": "^4.17.11",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  }
}

Answer 1

好的...意识到我的错误。在 eslintrc 我需要添加

"parser": "babel-eslint",