jsconfig.json 내가 해냄

인트로

클론 강의에서 jsconfig.json 파일을 사용하여 경로를 설정하는 내용이 나왔는데 두고두고 사용할 것 같아서 따로 포스팅을 결정했습니다. 

---

jsconfig.json란?

우선 jsconfig.json 파일은 프로젝트의 루트에 있어야 합니다. package.json이랑 같은 디렉터리에 있어야 해요.

디렉터리에 jsconfig.json 파일이 있으면 해당 디렉터리가 js프로젝트의 루트를 나타냅니다.

 

복잡한 프로젝트에서 workspace에 jsconfig.json을 한 개 이상 사용할 경우 하나의 프로젝트 코드가 다른 프로젝트의 IntelliSense(vscode 코드 편집 기능)로 사용되지 않게 할 수 있습니다.

JS 언어 서비스는 JS 프로젝트의 모든 파일을 분석하여 그것에 대한 IntelliSense를 제공하기 때문에 jsconfig.json을 사용하면 디렉터리를 제한하여 포함할 파일을 지정할 수 있습니다. 

IntelliSense in Visual Studio Code

---

Property

exclude

exclude 속성을 사용하여 소스 코드가 아닌 파일을 지정할 수 있습니다. 

빌드 프로세스에서 생성된 파일들을 exclude로 지정해 주면 IntelliSense가 느려지는 걸 막을 수 있습니다.

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

include

exclude  속성과 반대로 include 속성은 명시적으로 프로젝트에 포함할 파일만 지정해 줍니다. 

include 속성이 없을 경우, jsconfig.json 파일이 위치한 디렉터리를 기준으로 해당 디렉터리와 하위 디렉터리의 모든 파일이 기본값으로 포함됩니다.

---

jsconfig Options

다양한 Option들이 있습니다.

noLib	기본 라이브러리 파일(lib.d.ts)를 포함하지 않습니다.
target	사용할 기본 라이브러리(lib.d.ts)를 지정합니다. 값으로는 "es3", "es5", "es6", "es2015", "es2017", "es2018", "es2019", "es2020", "esnext" 가 있습니다.
module	모듈 코드를 생성할 때 사용할 모듈 시스템을 지정합니다. "amd", "commonJS", "es2015", "es6", "esnext", "none", "system", "umd" 등을 값으로 가집니다.
moduleResolution	import문에서 모듈을 어떻게 해석할 지 지정합니다. "node"와 "classic"을 값으로 가집니다. "node" - Node.js에서 모듈 해석하는 방법 사용 "classic" - 상대 경로 및 baseUrl 옵션 기반으로 모듈 해석 https://www.typescriptlang.org/docs/handbook/module-resolution.html
checkJs	타입 체크 활성화 옵션입니다. 옵션 설정 시 javascript 파일에서 타입 오류를 검출할 수 있습니다.
experimentalDecorators	ES 데코레이터에 대한 실험적 지원을 활성화합니다.
allowSyntheticDefaultImports	default export를 갖지 않는 모듈에서도 default import를 허용할지 여부를 결정합니다. 옵션이 true일 경우 default export가 없더라도 default import를 사용할 수 있습니다.
baseUrl	사용할 기본 디렉토리를 설정합니다. baseUrl을 설정하면 모듈을 불러올 때 baseUrl에서부터 시작하는 절대 경로를 사용할 수 있습니다.
paths	'baseUrl' 옵션을 기준으로 경로 매핑을 지정합니다.

---

위의 파일 구조에서 아래와 같이 깔끔하게 쓸 수 있습니다. './ ' 요런 식으로 쓰는 것보다 훨씬 명시적이고 좋은 것 같습니다.

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

import AppRouter from "components/Router";

---

 

Visual Studio Code Docs 내용을 참고하였습니다.