TypeScript type assertion in .vue files seems to confuse ESLint

Question

I want to tell TypeScript to treat my ref as a canvas element so it is happy about me calling getContext.

So I do this: this.context = (<HTMLCanvasElement>this.$refs.canvas).getContext('2d');

As far as ts is concerned, it's now happy about me calling getContext, however, now I get an eslint error:

Module Warning (from ./node_modules/eslint-loader/index.js):

D:\Projects\image-parser\image-parser\src\components\CanvasPanScale.vue
  51:32  error  Parsing error: '}' expected

✖ 1 problem (1 error, 0 warnings)

It's actually referring to code a few lines down:

this.context = (<HTMLCanvasElement>this.$refs.canvas).getContext('2d');
this.context.imageSmoothingEnabled = false;
if (this.imageToDraw) {
  this.drawImageToCanvas(); // <-- ESLint is angry about this closing parentheses
}

This seems to be related to the fact that I am inside a .vue file rather than a .ts file, and since both html elements and ts types are allowed in the same file, it gets confused by the angle brackets? Removing the angle brackets does fix it.

I can fix the error by doing:

const canvas = this.$refs.canvas as HTMLCanvasElement;
this.context = canvas.getContext('2d');
this.context.imageSmoothingEnabled = false;
if (this.imageToDraw) {
  this.drawImageToCanvas();
}

But I'm creating a variable for no purpose other than to treat it as a canvas, and I feel like the other way shouldn't break ESLint. Anyone know a fix for this? Or am I doing something wrong that I'm not noticing?

Rob Louie · Accepted Answer · 2020-04-18 15:43:59Z

1

Found the answer and figured I'd post in case others have similar issues. I made the mistake of installing the Vue Extension Pack for VSCode, which in turn just installs like 8 other plugins. One of those plugins is an ESLint config that completely breaks TypeScript linting and autocomplete. I'm sure somewhere within that giant pack of plugins I could have found some setting to fix it, but rather than deal with that I uninstalled the whole pack then only installed Vuter. Now everything is fine.

answered Apr 18, 2020 at 15:43

Rob Louie

2,6911 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript type assertion in .vue files seems to confuse ESLint

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related