Javascript Export语句上的ESLint分析错误
我正在学习一门课程,作者以以下方式导出了一个组件:Javascript Export语句上的ESLint分析错误,javascript,reactjs,babeljs,eslint,Javascript,Reactjs,Babeljs,Eslint,我正在学习一门课程,作者以以下方式导出了一个组件: export MainContainer from./Main/MainContainer' 默认的正确方法是从“/Main/MainContainer”导出{default as MainContainer},这不是很干净。作者可以用babel eslint包实现这一点,但是在我安装了该包之后,仍然会出现lint错误 文件结构: 预期 在containers/index.js中使用“/Main/maincainer”中的export ma
export MainContainer from./Main/MainContainer'
默认的正确方法是从“/Main/MainContainer”导出{default as MainContainer},这不是很干净。作者可以用babel eslint包实现这一点,但是在我安装了该包之后,仍然会出现lint错误
文件结构:
预期
在containers/index.js中使用“/Main/maincainer”中的export maincainer时,没有ESlint错误。export语句应该允许config/routes.js像这样导入MainContainer:
从“../containers”导入{maincainer}
结果
ESlint错误:
containers/Main/MainContainer.js
import React from 'react'
export default class MainContainer extends React.Component {
render () {
return (
<p>Hello World</p>
)
}
}
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运行lint脚本:
"lint": "eslint app/.; exit 0",
B.法律改革委员会
{
presets: [
'react',
'es2015',
'stage-0',
'stage-1'
],
"plugins": ["transform-export-extensions"]
}
埃斯林先生
{
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
}
}
默认的正确方法是从“./Main/MainContainer”导出{default as MainContainer}
你从哪里得到的信息?根据报告,您可以:
export { MainContainer as default } from './Main/MainContainer'
或
在我的应用程序中,当我执行eslint--init
时,我选择json
作为选项之一
这创建了一个.eslint.json
文件,因此我有两个eslint文件,我的原始.eslintrc
和json版本
我相信.json
版本覆盖了非json版本
以下是原始文件中添加的内容:
现在,我在使用时没有收到错误或警告:
从“/Main/MainContainer”导出MainContainer
从TylerMcginnis课程中,应用程序工作正常,只是ESlint。我刚刚解决了问题。发布我自己的答案,将等待反馈。
export { MainContainer as default } from './Main/MainContainer'
export default MainContainer from './Main/MainContainer'
{
"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
}
}