📜 jsconfig.json

jsconfig.json을 여기저기서 따라쓰긴 하였는데 어떤 역할을 하는 file인지 짚고 넘어가고 싶어 알아보려 한다.

Why do I need a jsconfig.json file?

jsconfig.json 파일을 사용하는 이유가 뭘까?
프로젝트 디렉터리 루트에 jsconfig.json을 생성함으로써 해당 프로젝트가 js 관련 프로젝트라는 것을 알려줄 수 있다.

만약 jsconfig.json 파일이 없다면 서로 다른 각각의 파일은 같은 프로젝트(project context)를 참조하고 있지 않는다.

따라서 해당 파일을 처리하고 해석하는데 경우에 따라서 차이가 있을 수 있다.

또한 프로젝트에 포함할 파일, 제외할 파일, 컴파일 옵션도 설정할 수 있다.

Location of jsconfig.json

jsconfig.json의 위치는 다음과 같이 프로젝트 root 위치에 있어야한다.

여러 프로젝트로 구성해야하는 프로젝트라면 다음과 같이도 구성할 수도 있다.

이렇게 지정하였을 때 각각의 config옵션을 가질 수 있다.

exclude

exclude 옵션은 프로젝트내에서 제외할 파일명을 지정해줄 수 있는 옵션이다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

프로젝트 규모가 크다면 성능(intellisense)이 낮아질 수 있는데 이 때 내가 실질적으로 사용하지 않는 파일들을 제외해줄 수 있다.

include

반대로 include옵션은 포함할 파일들을 명시해준다.
default값으로 모든 파일을 포함하도록 설정되어있다.

하지만 아래처럼 명시해준다면 프로젝트에 해당 파일만 포함하도록 설정이 된다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

compilerOptions

여러 가지 컴파일 옵션을 설정할 수 있는 옵션이다.

주요옵션들을 다음과 같다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
     "baseUrl":".",
    "paths":{
    "@app/*": ["app/*"]
    }
  }
}

• target | 사용할 javascript 문법 버전을 선택할 수 있다.
  선택 옵션은 다음과 같다.
  "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext"

• module | module system을 명시해준다.
  선택 옵션은 다음과 같다.
  amd", "commonJS", "es2015", "es6", "esnext", "none", "system", "umd"

주로 사용되는 것이 es6나 commonJS일텐데 commonJS는 노드에서 사용될 때 지정되는 옵션이다.

• baseURL | 프로젝트의 베이스 경로를 지정해줄 수 있다.
  경로가 복잡한 경우, 특정 경로를 지정하여 편리하게 상대경로를 지정해줄 수 있겠다

• paths | baseURL을 기준으로, 파일을 불러올 때 기준점을 설정할 수 있는 옵션이다.

이해가 잘 안되니 다음 예시를 살펴보자.

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"], // @는 안 붙여줘도 됨.
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

기본 경로를 src 폴더로 설정을 한 뒤에 paths에 경로를 설정해준다.

다음으로 app폴더에 있는 파일들을 불러오려 할때 다음과 같이 @app/index로 불러오면 된다.

import { Example } from '@app/index';

폴더 구조가 복잡하지 않다면 굳이 설정해줄 필요가 없지만 폴더 구조가 복잡하다면 굳이 설정해줄 필요가 없을 것 같다.

또한 Autoimport( vscode 자동 import extension)가 설치되어있다면 알아서 import해줄테니 굳이 사용해줄 필요는 없겠지만 복잡하다면 유지보수측면에서 설정해주는 것도 나쁘지 않을 것 같다.

주의
paths 옵션을 지정하기 위해선 baseURL 옵션이 명시되있어야한다.

정리

내가 프로젝트를 구성할 때 jsconfig.json을 사용하는 경우가 잘 없었는데, 이에 대해 한번 알아보니 프로젝트가 복잡하거나 이에 관한 특수한 경우가 있다면 jsconfig.json파일을 설정해주도록 해야겠다.

-이상-

Reference

https://code.visualstudio.com/docs/languages/jsconfig