config.json

jsconfig.json이 무엇인가요?

디렉토리에 jsconfig.json파일이 있으면 해당 디렉토리가 JavaScript 프로젝트의 루트 디렉토리임을 나타냅니다.

선택적으로 프로젝트에 속한 파일, 프로젝트에서 제외할 파일 및 컴파일러 옵션을 나열할 수 있습니다

 

jsconfig 옵션

option	Description
noLib	Do not include the default library file (lib.d.ts)
target	Specifies which default library (lib.d.ts) to use. The values are "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext".
module	Specifies the module system, when generating module code. The values are "amd", "commonJS", "es2015", "es6", "esnext", "none", "system", "umd".
moduleResolution	Specifies how modules are resolved for imports. The values are "node" and "classic".
checkJs	Enable type checking on JavaScript files.
experimentalDecorators	Enables experimental support for proposed ES decorators.
allowSyntheticDefaultImports	Allow default imports from modules with no default export. This does not affect code emit, just type checking.
baseUrl	Base directory to resolve non-relative module names.
paths	Specify path mapping to be computed relative to baseUrl option.

target : 사용할 기본 라이브러리를 지정한다

module : 모듈 코드를 생성할 때 모듈 시스템을 지정

baseUrl : 상대적이지 않은 기본 리렉토리 설정

paths : baseUrl 옵션을 기준으로 계산할 경로 매핑 지정

 

 

절대경로 path의 필요성

index.js 혹은 App.js등 각 파일에서 다른 파일들을 import할때 기본적으로 상대경로로 잡혀있는 것을 볼 수 있습니다. 나중에 프로젝트의 규모가 커지고 또 복잡해지면 상대경로에 의한 관리시 다른 파일들을 import할 때 굉장히 번거로워지기 때문에 절대경로로 세팅해주어야 합니다.

 

 

jsconfig.json파일 생성

프로젝트 최상위폴더(root)에 jsconfig.json파일을 추가

 

1_ src를 기본경로로 세팅하는 코드

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

 

2_VS Code에서 탭이 열려있지 않은 상태의 컴포넌트를 자동완성 시키려고 하면 자동으로 경로가 작성이 되지 않는다.

    탭이 열려있지 않은 상태에서도 import자동완성이 될 수 있도록 하는 코드

{
  "compilerOptions": {
    "target": "es2020"
  }
}