Question

我尝试为react-redux应用创建一个结构，我遇到了eslint默认导出规则的问题（我正在使用Airbnb指南）。

基本上我的结构如下：

src/
|-----modules/
|--------Component1/
|------------component.js
|------------index.js
|--------index.js
|-----App.js

// component.js
import React from 'react';

const Component1 = () => (
   <div>Hello</div>
);

export default Component1;

//Component1/index.js

export { default as Component1 } from './component';
// This is where I get eslint error

//modules/index.js

export * from './Component1';
// This is where I get eslint error

//App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Component1 } from './modules';

class App extends Component {
  render() {
    return (
      <Component1 />
    );
  }
}

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

因为我使用的是Redux，所以也可以从组件中导出reducer，因此我会使用带有两个参数的简单导出。

我应该采用不同的approuche还是忽略eslint规则？

编辑：我更喜欢导入/ prefer-default-export规则。我知道我可以禁用它，但我应该吗？

Answer 1

我想你在谈论prefer-default-export规则。使用命名导出是很常见的，你应该配置linter以匹配你和你的团队偏好（以及airbnb）。我个人会忽略这个规则，但这取决于你。

此外，您可以在.eslintrc中创建本地src/modules文件，您可以忽略该规则，并且在相对于此文件的子目录中也会忽略该文件。

默认导出eslint

1 个答案: