导出语句上的ESLint解析错误 [英] ESLint parsing error on Export statement

问题描述

我正在学习课程，作者以以下方式导出了组件:

I'm following a course and the author exports out a Component in the following manner:

export MainContainer from './Main/MainContainer'

默认正确的方法是export { default as MainContainer } from './Main/MainContainer'，它不是那么干净.作者可以使用babel-eslint软件包来执行此操作，但是在我安装了该软件包后，仍然出现了lint错误.

The default correct way is export { default as MainContainer } from './Main/MainContainer' which is not as clean. The author is able to do this with a babel-eslint package, however after I installed that package I still get the lint error.

回购链接

Repo link

文件结构:

在container/index.js中使用export MainContainer from './Main/MainContainer'时没有ESlint错误.该导出语句应允许config/routes.js像这样导入MainContainer:

No ESlint errors when using export MainContainer from './Main/MainContainer' in containers/index.js. That export statement should allow config/routes.js to import the MainContainer like so:

import { MainContainer } from '../containers'

ESlint错误:

containers/Main/MainContainer.js

containers/Main/MainContainer.js

import React from 'react'

export default class MainContainer extends React.Component {
  render () {
    return (
      <p>Hello World</p>
    )
  }
}

containers/index.js

containers/index.js

export MainContainer from './Main/MainContainer'
// export { default as MainContainer } from './Main/MainContainer'

config/routes.js

config/routes.js

import ReactDom from 'react-dom'
import routes from './config/routes'

ReactDom.render(
  routes,
  document.getElementById('app')
)

我安装了以下软件包:

"devDependencies": {
  "babel-core": "^6.25.0",
  "babel-eslint": "^8.0.0-alpha.15",
  "babel-loader": "^7.1.1",
  "babel-plugin-transform-export-extensions": "^6.22.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-0": "^6.24.1",
  "babel-preset-stage-1": "^6.24.1",
  "css-loader": "^0.28.4",
  "eslint": "^4.2.0",
  "eslint-config-standard": "^10.2.1",
  "eslint-plugin-promise": "^3.5.0",
  "eslint-plugin-react": "^7.1.0",
  "eslint-plugin-standard": "^3.0.1",
  "html-webpack-plugin": "^2.29.0",
  "style-loader": "^0.18.2",
  "webpack": "^3.2.0",
  "webpack-dev-server": "^2.5.1"
}

npm运行棉绒脚本:

The npm run lint script:

"lint": "eslint app/.; exit 0",

.babelrc

{
  presets: [
    'react',
    'es2015',
    'stage-0',
    'stage-1'
  ],
  "plugins": ["transform-export-extensions"]
}

.eslintrc

.eslintrc

{
  parser: "babel-eslint",
  env: {
    es6: true,
    browser: true
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true
    }
  },
  plugins: [
    "react",
  ],
  extends: ["eslint:recommended", "plugin:react/recommended", "standard"],
  "rules": {
    "no-console": [2, {allow: ["warn", "error"]}],
    "comma-dangle" : [2, "always-multiline"],
    "semi": [2, "never"],
    "no-extra-semi": 2,
    "jsx-quotes": [2, "prefer-single"],
    "react/jsx-boolean-value": [2, "always"],
    "react/jsx-closing-bracket-location": [2, {selfClosing: "after-props", nonEmpty: "after-props"}],
    "react/jsx-curly-spacing": [2, "never", {"allowMultiline": false}],
    "react/jsx-max-props-per-line": [2, {maximum: 3}],
    "react/jsx-no-literals": 2,
    "react/self-closing-comp": 2,
    "react/sort-comp": 2
  }
}

推荐答案

在我的应用程序中，当我执行eslint --init时，我选择json作为选项之一.

In my app when I did eslint --init I choose json as one of the options.

这创建了一个.eslint.json文件，所以我有2个eslint文件，我的原始.eslintrc和json版本.

This created a .eslint.json file, so I had 2 eslint files, my original .eslintrc and the json version.

我相信.json版本将覆盖非JSON版本.

I believe the .json version was overriding the non-JSON version.

以下是带有原始文件添加内容的文件:

Here is the file with the additions from the original:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
      "no-console": [2, {"allow": ["warn", "error"]}],
      "indent": ["error", 2],
      "linebreak-style": ["error", "unix"],
      "quotes": ["error","single"],
      "semi": [2,"never"],
      "no-extra-semi": 2,
      "jsx-quotes": [2, "prefer-single"],
      "react/jsx-boolean-value": [2, "always"],
      "react/jsx-closing-bracket-location": [
        2, {"selfClosing": "after-props", "nonEmpty": "after-props"}
      ],
      "react/jsx-max-props-per-line": [2, {"maximum": 3}],
      "react/self-closing-comp": 2,
      "react/sort-comp": 2
    }
}

现在使用时我没有收到错误或警告

Now I do not get the error or warning when using:

export MainContainer from './Main/MainContainer'

这篇关于导出语句上的ESLint解析错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！