Javascript: Best Practices for Multi-Line Imports?

[machineghost]

It would be great if the style guide could weigh in on import lines that exceed the character limit (and thus need to be broken up on to multiple lines) ...

 import {longNameA, longNameB, longNameC, longNameD, longNameE} from '/some/pretty/long/path/

vs.

 import {longNameA, longNameB, longNameC, longNameD, longNameE}
 from '/some/pretty/long/path/

vs.

 import {longNameA, longNameB, longNameC, longNameD, 
         longNameE} from '/some/pretty/long/path/

vs.

 import {longNameA, longNameB, longNameC, longNameD, 
         longNameE
} from '/some/pretty/long/path/

vs.

 import {
      longNameA,
      longNameB, 
      longNameC,
      longNameD,
      longNameE
  } from '/some/pretty/long/path/

vs.

 import {
      longNameA,
      longNameB, 
      longNameC,
      longNameD,
      longNameE
  } 
  from '/some/pretty/long/path/

[ljharb]

The only example that would be acceptable is:

import {
  a,
  b,
  c,
} from 'path';

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

Adding a section on that to https://github.com/airbnb/javascript#modules would be great.

[machineghost]

Great, thanks for the response.

[karanjthakkar]

@ljharb I've tried to word a section on this in a PR. Have a look and tell me if it matches what the styleguide would like to convey.

[petersendidit]

Is there an eslint rule that could enforce this? If not should it be part of core eslint or eslint-plugin-import?

[ljharb]

@petersendidit there does not yet appear to be. I think it probably belongs as a core rule, but would be fine in eslint-plugin-import as well.

[SKempin]

@petersendidit Also looking for an eslint rule for exactly this, did you ever make any progress?

[SKempin]

@petersendidit This is a TSLint rule for preventing multi line imports from being on a single line

```// noMultilineImportRule.ts

import * as Lint from 'tslint';
import * as ts from 'typescript';

class NoMultilineWalker extends Lint.RuleWalker {
public visitImportDeclaration(importDeclaration: ts.ImportDeclaration): void {
const importText: string = importDeclaration.getText().toLowerCase();

    if (importText.match('^[import {].*,.*[} from ].*$')) {
        this.addFailureAtNode(
            importDeclaration,
            'Multiple imports must be seperated onto new lines'
        );
    }
}

}

export class Rule extends Lint.Rules.AbstractRule {
public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
return this.applyWithWalker(new NoMultilineWalker(sourceFile, this.getOptions()));
}
}```