模块

10.1 经常使用官方的模块(import/export)而不是非标准的模块系统。你可以为你自己喜欢的模块系统编译

为什么?模块化是未来,让我们拥抱未来

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

10.2 不要使用通配符引入

为什么? 这样能确保你有一个default export

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

10.3 不要直接从import里export

为什么?虽然写在一行会比较简洁,但让代码单一职责能够保持更好的一致性

// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

10.4 一个相同的路径,只引用一次

eslint: no-duplicate-import

为什么?多行引入相同的路径会使代码难以维护

// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';

// good
import foo, { named1, named2 } from 'foo';

// good
import foo, {
  named1,
  named2,
} from 'foo';

10.5 不要export可变的量

eslint: import/no-mutable-exports

为什么?在导出值的时候,可变量应该通常要被禁止。虽然某些特殊的场景可能用的到,但是通常导出的应该是一个常量

// bad
let foo = 3;
export { foo };

// good
const foo = 3;
export { foo };

10.6 如果只导出一个值,使用default export会比使用命名导出更好

eslint: import/prefer-default-export

为什么?来推动更多的文件只输出一个值,这样能有更好的可读性和可维护性

// bad
export function foo() {}

// good
export default function foo() {}

10.7 把所有import语句放在最前面

eslint: import/first

为什么?因为import存在变量提升,把它们放在最上面会避免出现一些意想不到的行为

// bad
import foo from 'foo';
foo.init();

import bar from 'bar';

// good
import foo from 'foo';
import bar from 'bar';

foo.init();

10.8 多行export应该像多行数组和对象一样缩进

为什么?大括号遵循与指南中的每个其他大括号相同的缩进规则,句尾的逗号也一样

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';

10.9 在模块引入的语句里不要使用Webpack loader的语法

eslint: import/no-webpack-loader-syntax

为什么?因为使用Webpack语法会把代码耦合进模块打包器中。最好在webpack.config.js里去用loader 语法

// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';

// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';

results matching ""

    No results matching ""