VS code + jsconfig.json

많은 분들께서 js 또는 typescript 내에 import path 경로를 불러오실때, ../../ 형태로 중복해서 불러오는 것을 싫어하셔서, webpack 또는 babel 사용시에 module resolver를 많이 사용하실겁니다. webpack에는 resolve option에 alias 등을 사용하실 것이고, babel에서는 babel-plugin-module-resolver를 사용하셔서 module에 대한 alias를 설정하고, 모듈들을 import 하실것 같습니다.

그러나, 이러한 부분들은 프로젝트 내에서 npm plugin을 통해서 지정하는 것이기 때문에, 에디터 내에서 import를 하면서, alias에 맞게 작업시에 파일을 불러오지 못하는 경우가 생깁니다. webpack 또는 babel로 alias만 설정했기 떄문에 실제로 editor에는 적용이 되지 않고, 빌드되는 과정에서만 alias를 적용하게 됩니다.

이번 포스팅에는 VS code내에서 사용되는 jsconfig.json을 이용하여 import 시에 설정한 alias에 맞게 자동 완성(auto complete)되는 기능을 적용하는 방법을 포스팅 하고자 합니다.

Module alias

폴더 구조가 다음과 같이 설정되어 있다고 가정합니다.

react 프로젝트시에 흔하게 확인하실수 있는 src 폴더 내에 component 폴더 등 src내에 하위 폴더들을 가지고 있습니다. 만약 /src/components/test/Test.js가 있다고 가정한다면, constants 폴더 내에 variables.js라는 모듈을 가져오기 위해서 우리는 다음과 같이 import 하게 됩니다.

// Test.js
import variables from '../../../constants/variables';

../가 중복으로 들어가기 때문에, 많은 분들이 설정하시는 방법으로는 webpack 또는 babel plugin을 사용하십니다. webpack은 resolve option을 통해서 가장 상위 root 폴더 혹은 path 등의 플러그인을 사용해서 다음과 같이 정의하실 겁니다.

// webpack.config.js
{
  resolve: {
    alias: {
      components: "./components",
      constants: "./constants"
    }
  }
}

만약 babel plugin중, babel-plugin-module-resolver를 사용하신다면, .babelrc 파일 내에서 다음과 같이 설정하실 거라고 생각합니다.

// .babelrc
{
  "plugins": [
    [
      "module-resolver", {
        "alias": {
          "components": "./components",
          "constatns": "./constants"
        }
      }
    ]
  ]
}

그러나, 이 부분들은 프로젝트내에 npm plugin을 통해서 설정한 것이기 때문에, editor내에서 파일에 대한 import 자동완성 기능을 사용할 수 없습니다. VS code내에서는 자동완성 기능을 jsconfig.json을 통해서 사용이 가능합니다. 사용방법은 간단합니다.

jsconfig.json

VS code는 jsconfig.json이라는 파일을 이용하여 에디터에 대한 설정및 기타 javascript에 대한 설정을 조작할 수 있습니다. typescript의 경우는 tsconfig.json을 통해서 조작하며, vscode 내에서 configuration은 javascript, typescript 모두 동일합니다.

jsconfig.json 에서는 paths라는 option을 통해서 alias와 동일하게 설정이 가능합니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["./src/components/*"],
      "constants/*": ["./src/constants/*"]
    }
  }
}

jsconfig.json에서의 path 설정을 보시면, baseUrl을 설정하는 부분이 존재하고, paths 내에 components 폴더 내의 /* 스키마를 통해서 폴더 내의 모든 파일을 autocomplete화 합니다. 해당 alias를 적용하고자 하는 경로는 배열 형태로 나열해주면 됩니다.

Atom에도 jsconfig.json 설정 후에 autocomplete를 적용하는 부분이 있을거라고 생각됩니다. 현재 사용되는 editor가 vscode 인지라.. 문의사항은 댓글로 문의주시면 답변 드리겠습니다!! :)