prettier-plugin-organize-imports icon indicating copy to clipboard operation
prettier-plugin-organize-imports copied to clipboard

Import organization adds extra empty lines

Open Thunderkill opened this issue 2 years ago • 1 comments

On a typescript react project when you have (2+) named imports commented out, this prettier plugin will insert new lines and duplicate them unnecessarily.

Steps to reproduce:

  1. Have a typescript react project (not sure if it only applies to this)
  2. Have a block comment around 2 imports, one of these has to be a named import For example: /* import { styled } from "@mui/material/styles"; import TextField from "@mui/material/TextField"; */
  3. Prettify the file, and it will insert a blank line between those 2 imports, if you keep prettifying the file, it will duplicate the amount of lines and add an extra one

Here's a gif of the problem 2021-10-15_14-52-10

Also a note: It does not happen with the default VSCode's "Organize Import" (shift + alt + o) functionality.

Thunderkill avatar Oct 15 '21 12:10 Thunderkill

Hey @Thunderkill sorry for the late reply, I somehow missed this issue in my notifications.

Thanks for checking that this doesn't happen with the built-in action. It could still be a bug in TypeScript though, because afaik VS Code's "Organize Imports" action uses the TypeScript version that comes bundled with VS Code, whereas the plugin uses the version that's installed locally (i. e. the version that's specified in package.json). So before trying to reproduce this, could you please just let me know the VS Code version (Code -> About Visual Studio Code) and the TypeScript version (npm ls typescript)?

It could really be a bug around Prettier's preprocess plugin hook as well though... I've seen similar issues when working on Vue.js support.

simonhaenisch avatar Nov 10 '21 08:11 simonhaenisch

test('does not insert new lines into block comments', (t) => {
	const code = `import PickersDay, { PickersDayProps } from "@mui/lab/PickersDay";
/* import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField"; */
import endOfWeek from "date-fns/endOfWeek";

console.log(PickersDay as PickersDayProps, endOfWeek);
`;

	const formattedCode = prettify(code);

	t.is(formattedCode, code);
});

I just tried adding the above test case to reproduce this but wasn't able to 🤷🏻‍♂️ Also haven't gotten a reply, so for now I'll close this as won't-fix, until someone can provide a proper reproducible example.

simonhaenisch avatar Aug 15 '22 17:08 simonhaenisch