• Do not use wildcard imports.

    1. // bad
    2. import * as AirbnbStyleGuide from './AirbnbStyleGuide';
    3. // good
    4. import AirbnbStyleGuide from './AirbnbStyleGuide';

  • 10.3 And do not export directly from an import.

    Why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent.

    1. // bad
    2. // filename es6.js
    3. export { es6 as default } from './AirbnbStyleGuide';
    4. // good
    5. // filename es6.js
    6. import { es6 } from './AirbnbStyleGuide';
    7. export default es6;
  • Only import from a path in one place.
    eslint: no-duplicate-imports

  • 10.6 In modules with a single export, prefer default export over named export.
    eslint:

    Why? To encourage more files that only ever export one thing, which is better for readability and maintainability.

    1. // bad
    2. export function foo() {}
    3. // good
    4. export default function foo() {}
  • 10.7 Put all imports above non-import statements.
    eslint:

  • Multiline imports should be indented just like multiline array and object literals.

    Why? The curly braces follow the same indentation rules as every other curly brace block in the style guide, as do the trailing commas.

    1. // bad
    2. // good
    3. import {
    4. longNameA,
    5. longNameB,
    6. longNameC,
    7. longNameD,
    8. longNameE,
    9. } from 'path';

  • Disallow Webpack loader syntax in module import statements.
    eslint: import/no-webpack-loader-syntax

    1. // bad
    2. import fooSass from 'css!sass!foo.scss';
    3. import barCss from 'style!css!bar.css';
    4. // good