[JS] 선언한 모듈로 이동하기 (alias) - Go to declaration

이채현

💡 Javascript Babel & IDE `Go to declaration`

문제

많은 사람들은 선언한 모듈들을 command/ctrl + click으로 해당 파일로 바로 이동하거나 자동완성이 되게하는 IDE나 Editor의 기능을 사용할 것이다. 그리고 babel-plugin-module-resolver을 통해 모듈의 경로를 별칭으로 바꿔서 사용할 것이다. 하지만 별칭으로 바꾸면서 위 기능이 깨지는 문제가 종종 있다. 그리고 이 문제는 플러그인쪽에서는 해결되지 않고 있다. npm에 올라온 최신버전은 이미 2년이 지났다.

babel-plugin-module-resolver

해결

우리는 jsconfig.json을 사용하여 IDE가 사용자 지정 resolve규칙을 따르도록 하는 것이 좋다. 이 접근 방식은 Webstorm과 VS Code 모두 작동한다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "#api/*": [
        "./src/api/*"
      ],
      "#assets/*": [
        "./src/assets/*"
      ],
      "#common/*": [
        "./src/common/*"
      ],
      "#component/*": [
        "./src/component/*"
      ],
      "#constant/*": [
        "./src/constant/*"
      ],
      "#container/*": [
        "./src/container/*"
      ]
    }
  }
}