jsconfig.json

jsconfig.json이란?

디렉토리에 jsconfig.json 파일이 존재한다는 것은 해당 디렉토리가 JavaScript 프로젝트의 루트임을 나타냅니다. jsconfig.json 파일은 루트 파일과 JavaScript 언어 서비스에서 제공하는 기능에 대한 옵션을 지정합니다.

팁: JavaScript를 사용하지 않는다면 jsconfig.json에 대해 걱정할 필요가 없습니다.

팁: jsconfig.json은 TypeScript 설정 파일인 tsconfig.json의 파생 파일입니다. jsconfig.json은 "allowJs" 속성을 true로 설정한 tsconfig.json입니다.

jsconfig.json 파일이 필요한 이유는 무엇인가요?

Visual Studio Code의 JavaScript 지원은 두 가지 모드로 실행될 수 있습니다.

• 파일 범위 - jsconfig.json 없음: 이 모드에서는 Visual Studio Code에서 열린 JavaScript 파일이 독립적인 단위로 취급됩니다. a.js 파일이 b.ts 파일을 명시적으로 참조하지 않는 한 (import 또는 CommonJS 모듈을 사용하든), 두 파일 간에는 공통 프로젝트 컨텍스트가 없습니다.

• 명시적 프로젝트 - jsconfig.json 사용: JavaScript 프로젝트는 jsconfig.json 파일로 정의됩니다. 디렉토리에 이러한 파일이 존재한다는 것은 해당 디렉토리가 JavaScript 프로젝트의 루트임을 나타냅니다. 파일 자체는 선택적으로 프로젝트에 속한 파일, 프로젝트에서 제외될 파일, 그리고 컴파일러 옵션(아래 참조)을 나열할 수 있습니다.

작업 공간에 프로젝트 컨텍스트를 정의하는 jsconfig.json 파일이 있으면 JavaScript 환경이 개선됩니다. 이러한 이유로, 새로운 작업 공간에서 JavaScript 파일을 열 때 jsconfig.json 파일을 생성하라는 힌트를 제공합니다.

jsconfig.json의 위치

이 코드를 웹사이트의 클라이언트 측으로 정의하고, jsconfig.json 파일을 생성하여 JavaScript 프로젝트로 만듭니다. 아래와 같이 JavaScript 코드의 루트에 파일을 배치하세요.

더 복잡한 프로젝트에서는 작업 공간 내에 여러 개의 jsconfig.json 파일을 정의할 수 있습니다. 이는 한 프로젝트의 코드가 다른 프로젝트의 코드에 IntelliSense로 제안되지 않도록 하기 위함입니다. 아래는 client 및 server 폴더가 있는 프로젝트를 보여주며, 두 개의 별도 JavaScript 프로젝트를 나타냅니다.

예시

기본적으로 JavaScript 언어 서비스는 JavaScript 프로젝트의 모든 파일을 분석하고 IntelliSense를 제공합니다. 올바른 IntelliSense를 제공하려면 제외하거나 포함할 파일을 지정해야 합니다.

"exclude" 속성 사용하기

exclude 속성(glob 패턴)은 언어 서비스에 소스 코드에 포함되지 않는 파일을 알려줍니다. 이는 성능을 높게 유지합니다. IntelliSense가 느리다면 폴더를 exclude 목록에 추가하세요(VS Code는 속도 저하를 감지하면 이를 수행하라는 메시지를 표시합니다).

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules"]
}

팁: 빌드 프로세스에 의해 생성된 파일(예: dist 디렉토리)은 exclude해야 합니다. 이러한 파일은 제안이 두 번 표시되도록 하고 IntelliSense 속도를 늦춥니다.

"include" 속성 사용하기

또는 include 속성(glob 패턴)을 사용하여 프로젝트의 파일을 명시적으로 설정할 수 있습니다. include 속성이 없으면 기본적으로 포함된 디렉토리와 하위 디렉토리의 모든 파일이 포함됩니다. include 속성이 지정되면 해당 파일만 포함됩니다. 명시적인 include 속성이 있는 예는 다음과 같습니다.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

팁: exclude 및 include의 파일 경로는 jsconfig.json의 위치를 기준으로 합니다.

jsconfig 옵션

JavaScript 언어 지원을 구성하기 위한 jsconfig "compilerOptions"는 다음과 같습니다.

팁: JavaScript에는 실제 컴파일이 필요하지 않으므로 compilerOptions에 혼동하지 마세요. jsconfig.json은 TypeScript 컴파일에 사용되는 tsconfig.json의 파생 파일이기 때문에 이 속성이 존재합니다.

사용 가능한 compilerOptions에 대한 자세한 내용은 TypeScript compilerOptions 문서에서 읽을 수 있습니다.

webpack 별칭 사용하기

webpack 별칭으로 IntelliSense를 사용하려면 paths 키를 glob 패턴으로 지정해야 합니다.

예를 들어, 'ClientApp' 별칭의 경우

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ClientApp/*": ["./ClientApp/*"]
    }
  }
}

그런 다음 별칭을 사용하려면

import Something from 'ClientApp/foo';

모범 사례

가능한 경우 프로젝트 소스 코드의 일부가 아닌 JavaScript 파일이 포함된 폴더는 제외해야 합니다.

팁: 작업 공간에 jsconfig.json 파일이 없으면 VS Code는 기본적으로 node_modules 폴더를 제외합니다.

다음은 일반적인 프로젝트 구성 요소를 제외하는 것이 권장되는 설치 폴더에 매핑하는 표입니다.

JavaScript 프로젝트가 너무 커져 성능이 느려지면 종종 node_modules와 같은 라이브러리 폴더 때문입니다. VS Code가 프로젝트가 너무 커졌다고 감지하면 exclude 목록을 편집하라는 메시지를 표시합니다.