VSCode에서 JavaScript CommonJS의 export 객체 속성들 <Find Reference>에 검색되지 않는 문제

"1920s france la vie parisienne magazine of Spider-Man standing with an umbrella in front of a classic car." from DALL-E 2

문제

JavaScript에서 CommonJS 형식인 module.exports를 통해 객체를 export할 수 있습니다. 아래 코드는 math.js 내의 산술연산 함수들을 export하고 있습니다.

그리고 math.js의 함수를 사용하는 index.js 가 있습니다.

지금 상황에서는 index.js가 math.js의 sum과 subtract 함수를 import 하여 사용하고 있는데요, 만약, 다양한 코드 영역에서 sum 함수를 import하여 사용하고 있을 때, sum 함수를 참조하고 있는 모든 영역을 찾고 싶을 때 어떻게 해야 할까요?

VSCode에서는 <Find Reference> 기능을 통해 선택한 속성을 참조하는 코드 영역을 모두 찾아줍니다. 그런데,  위 코드처럼 CommonJS 형식으로 export한 속성들은 같은 파일 내에서만 참조를 찾아주는 문제가 있습니다.

index.js를 찾지 못함

해외에서도 이 문제에 대해 많은 사람들이 이슈 제기를 하고 있는 상황입니다.

https://github.com/microsoft/vscode/issues/21507

“Find All References” across files for a method/function in javascript · Issue #21507 · microsoft/vscode

대안

CommonJS에서 ESModule로 넘어가는 것이 가장 좋지만, 어쩔 수 없이 CommonJS를 계속 사용해야 한다면, 아래와 같이 export 대상 객체를 Object.freeze로 한번 감싸줌으로써 <Find Reference>에서 검색이 되도록 만들 수 있습니다.

위와 같이 Object.freeze()로 객체를 감싼 후 <Find Reference>를 요청했을 때의 결과는 아래와 같습니다.

index.js의 참조를 찾아내었다.

마무리

IntelliJ와 같은 유료 프로그램에서는 굳이 Object.freeze()로 감싸지 않더라도 참조를 잘 찾아주는 것으로 알고 있는데요, VSCode는 조금 더 분발해야 겠습니다.