Formatting breaks @ts-ignore comments

edited by @thorn0, citing this comment:

@ts-ignore ignores one line of code, not one expression or statement (a behavior diametrically opposed to code beautifiers which operate on the AST). It therefore almost always affects code where Prettier condenses or spreads out TypeScript code.

Prettier 1.19.1 Playground link

--parser typescript

Input:

// @ts-ignore
const result = evaluate(chain, opts.filename, args.map(arg => arg.node.value))

Output:

// @ts-ignore
const result = evaluate(
  chain,
  opts.filename,
  args.map(arg => arg.node.value)
);

The original code example is below. Prettier doesn’t break it anymore, but the general problem with @ts-ignore comments hasn’t been solved.

original code example

Prettier 1.15.1 Playground link

# Options (if any):
--single-quote

Input:

export class WebpackTranslateLoader implements TranslateLoader {
  public getTranslation<T>(lang: string): Observable<T> {
    return from(
      // @ts-ignore 
      import('dinamicModule')
    );
  }
}

Output:

export class WebpackTranslateLoader implements TranslateLoader {
  public getTranslation<T>(lang: string): Observable<T> {
    return from(
      import(// @ts-ignore
      "dinamicModule")
    );
  }
}

Expected behavior:

Same as input. The comment is mean to ignore the function call, but by moving the comment inside the function, the meaning of the comment is lost.

[lydell]

As a workaround, this might work:

Prettier 1.16.4 Playground link

--parser babylon

Input:

function flattenOptions(
  options: ReactSelectOption[]
): ReactSelectOptionObject[] {
  return options.reduce(
    (acc: ReactSelectOptionObject[], option: ReactSelectOption) =>
      option.hasOwnProperty("options")
        // dummy comment to make ts-ignore work
        // @ts-ignore: totally legal thing to do
        ? flattenOptions(option.options)
        // dummy comment to make ts-ignore work
        // @ts-ignore: another totally legal thing to do
        : acc.concat([option]),
    []
  );
}

Output:

function flattenOptions(
  options: ReactSelectOption[]
): ReactSelectOptionObject[] {
  return options.reduce(
    (acc: ReactSelectOptionObject[], option: ReactSelectOption) =>
      option.hasOwnProperty("options")
        ? // dummy comment to make ts-ignore work
          // @ts-ignore: totally legal thing to do
          flattenOptions(option.options)
        : // dummy comment to make ts-ignore work
          // @ts-ignore: another totally legal thing to do
          acc.concat([option]),
    []
  );
}

[thorn0]

@glen-84 It’s not worth the trouble. @ts-ignore is like the with statement or the comma operator. We just don’t want Prettier to break them. That’s it. We shouldn’t really care how they look in the end. That said, if you feel like trying to implement a more sophisticated solution, I’ll be glad to review the PR.