Prettier-vscode: Prettier always expand multiline import statements

[lupu60]

Force prettier to always expand import statements regardless of line width like this:

import {
  package
} from 'path';

[kachkaev]

Technically, an option t do so could be implemented in the upstream Prettier module. However, given the Prettier’s option philosophy, this looks impractical.

What makes you willing to expand short import statements @lupu60?

[lupu60]

Airbnb JavaScript Style:

// 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';

[kachkaev]

Prettier will never merge or reorder imports, because such changes can have side effects and break your code. This can happen if the modules you import are sensitive to things like the presence of global variables set by other modules.

As of single line / multiline formatting, Prettier already does it, but chooses to break lines only when all imports don't fit your max line length (80 characterss by default).

If you do want a short statement like import { package } from 'path'; to occupy three lines instead of one for some reason, you can do this by adding a comment:

1. Original (formatted by you or Prettier):

   import { package } from 'path';
   

2. Your change:

   import { package //
   } from 'path';
   

3. Prettier's reaction to this:

   import {
     package, //
   } from "./path";
   

   Removing // will squash things to one line again, because this looks prettier 🙂

I totally agree with you that having two statements that import things from one module is an issue, Prettier is just not a tool to solve it. I'm personally dealing with such things using TSLint given that my code is usually written in TypeScript. After configuring TSLint for the project and installing TSLint extension for VSCode, I've set "tslint.autoFixOnSave": true, and my import statements have begun to sort themselves automatically. Possible duplicates are vividly marked as a TSLint error and I fix it straight away. If you are writing in JavaScript instead of TypeScript, a similar thing can be achieved with ESLint I guess.

[lupu60]

ok, thank you for your time. I will investigate this on ESLint 😄 .

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.