Broken with typescript@4.3 override feature

[Saul-Mirone]

export class Blockquote extends Node {
    id = 'blockquote';

   // ->  error  Parsing error: ';' expected  prettier/prettier
    override inputRules = () => [];
}

[lydell]

Hi!

You have reported this issue in eslint-config-prettier. All the config does is turning off a bunch of ESLint rules, so your problem can’t possibly come from this repo.

The error message says prettier/prettier – that’s the ESLint rule name that reported the error. That rule comes from eslint-plugin-prettier. But that rule is just a small wrapper around the actual Prettier package – that’s the root of the problem.

If you go to Prettier’s issue tracker you’ll see a pinned issue right at the top – TypeScript 4.3.

That issue says that currently you need to use the babel-ts parser to use override: https://github.com/prettier/prettier/issues/10642#issuecomment-849879761

Your example seems to work in the Prettier playground when switching to the babel-ts parser:

Prettier 2.3.0 Playground link

--parser babel-ts

Input:

export class Blockquote extends Node {
    id = 'blockquote';

   // ->  error  Parsing error: ';' expected  prettier/prettier
    override inputRules = () => [];
}

Output:

export class Blockquote extends Node {
  id = "blockquote";

  // ->  error  Parsing error: ';' expected  prettier/prettier
  override inputRules = () => [];
}

Please try to investigate a little bit more yourself next time, it’s not super hard! 🙏

[Saul-Mirone]

Hi!

You have reported this issue in eslint-config-prettier. All the config does is turning off a bunch of ESLint rules, so your problem can’t possibly come from this repo.

The error message says prettier/prettier – that’s the ESLint rule name that reported the error. That rule comes from eslint-plugin-plugin. But that rule is just a small wrapper around the actual Prettier package – that’s the root of the problem.

If you go to Prettier’s issue tracker you’ll see a pinned issue right at the top – TypeScript 4.3.

That issue says that currently you need to use the babel-ts parser to use override: prettier/prettier#10642 (comment)

Your example seems to work in the Prettier playground when switching to the babel-ts parser:

Prettier 2.3.0 Playground link

--parser babel-ts

Input:

export class Blockquote extends Node {
    id = 'blockquote';

   // ->  error  Parsing error: ';' expected  prettier/prettier
    override inputRules = () => [];
}

Output:

export class Blockquote extends Node {
  id = "blockquote";

  // ->  error  Parsing error: ';' expected  prettier/prettier
  override inputRules = () => [];
}

Please try to investigate a little bit more yourself next time, it’s not super hard! 🙏

Thanks for your reply! I'll close this.

[JeanMeche]

If anyone is reading this, upgrade prettier to 2.3.1+ will fix this.

[omril1]

@JeanMeche That didn't work for me