VSCode 캔버스(Canvas), WebGL 자동완성 안됨 해결 방법: @type

VIsual Studio Code 상에서 html canvas나 WebGL 작업을 하는데,

아래처럼 아무런 자동완성이 뜨지 않을 때가 있다.

매번 명령어를 검색해보기도 귀찮다.

---

# 해결방법

: @type을 통해 VS Code에게 힌트를 주면, Canvas나 WebGL 컨텍스트 객체도 자동완성이 된다.

1. CanvasRenderingContext2

: canvas컨텍스트 객체 생성 전에, 아래처럼 @type 태그 주석을 달아준다

 /** @type {CanvasRenderingContext2D} */ 

const canvas = document.getElementById("canvas_main");

/** @type {CanvasRenderingContext2D} */
const ctx = canvas.getContext("2d");

 

2. WebGLRenderingContext

: WebGL 컨텍스트 객체 생성 전에, 아래처럼 @type 태그 주석을 달아준다

 /** @type {WebGLRenderingContext} */ 

---코드 생략---

---

# 결과

아래 화면처럼, 캔버스의 context 그리기 객체에 자동완성이 잘 뜬다!

---

@type 태그에 대한 자세한 내용은 아래의 JSDoc 문서를 확인해보기 바란다.

https://jsdoc.app/tags-type.html