JavaScript 작업
이 문서는 Visual Studio Code에서 지원하는 고급 JavaScript 기능에 대해 설명합니다. TypeScript 언어 서비스를 사용하여 VS Code는 JavaScript에 대한 스마트 완성(IntelliSense) 및 유형 검사를 제공할 수 있습니다.
IntelliSense
Visual Studio Code의 JavaScript IntelliSense는 지능적인 코드 완성, 매개변수 정보, 참조 검색 및 기타 많은 고급 언어 기능을 제공합니다. JavaScript IntelliSense는 TypeScript 팀에서 개발한 JavaScript 언어 서비스에 의해 구동됩니다. IntelliSense는 대부분의 JavaScript 프로젝트에서 구성 없이 작동해야 하지만, JSDoc을 사용하거나 jsconfig.json 프로젝트를 구성하여 IntelliSense를 더욱 유용하게 만들 수 있습니다.
JavaScript IntelliSense가 작동하는 방식에 대한 자세한 내용은 유형 추론, JSDoc 주석, TypeScript 선언 및 JavaScript와 TypeScript 프로젝트 혼합 사용 등을 포함하여 JavaScript 언어 서비스 설명서를 참조하십시오.
유형 추론이 원하는 정보를 제공하지 못하는 경우, JSDoc 주석을 사용하여 명시적으로 유형 정보를 제공할 수 있습니다. 이 문서에서는 현재 지원되는 JSDoc 주석을 설명합니다.
객체, 메서드 및 속성 외에도 JavaScript IntelliSense 창은 파일 내 기호에 대한 기본 단어 완성도 제공합니다.
타이핑 및 자동 유형 가져오기
JavaScript 라이브러리 및 프레임워크의 IntelliSense는 TypeScript 유형 선언(타이핑) 파일을 통해 제공됩니다. 유형 선언 파일은 TypeScript로 작성되어 매개변수 및 함수의 데이터 유형을 표현할 수 있으므로 VS Code는 성능 저하 없이 풍부한 IntelliSense 환경을 제공할 수 있습니다.
많은 인기 라이브러리에는 타이핑 파일이 포함되어 있어 자동으로 IntelliSense를 사용할 수 있습니다. 타이핑이 포함되지 않은 라이브러리의 경우 VS Code의 자동 유형 가져오기가 커뮤니티에서 유지 관리하는 타이핑 파일을 자동으로 설치해 줍니다.
자동 유형 가져오기에는 Node.js 패키지 관리자인 npmjs가 필요하며, 이는 Node.js 런타임에 포함됩니다. 이 이미지에서는 인기 있는 lodash 라이브러리에 대한 메서드 서명, 매개변수 정보 및 메서드 설명서를 포함한 IntelliSense를 볼 수 있습니다.
유형 선언 파일은 프로젝트의 package.json에 나열된 패키지 또는 JavaScript 파일로 가져온 패키지에 대해 Visual Studio Code에서 자동으로 다운로드 및 관리됩니다.
{
"dependencies": {
"lodash": "^4.17.0"
}
}
대안으로, jsconfig.json에서 유형 선언 파일을 가져올 패키지를 명시적으로 나열할 수 있습니다.
{
"typeAcquisition": {
"include": ["jquery"]
}
}
가장 일반적인 JavaScript 라이브러리에는 선언 파일이 포함되어 있거나 사용할 수 있는 유형 선언 파일이 있습니다.
자동 유형 가져오기에 대한 npm이 설치되지 않았다는 경고 수정
자동 유형 가져오기는 Node.js 패키지 관리자인 npm을 사용하여 유형 선언(타이핑) 파일을 설치하고 관리합니다. 자동 유형 가져오기가 제대로 작동하도록 하려면 먼저 컴퓨터에 npm이 설치되어 있는지 확인하십시오.
터미널 또는 명령 프롬프트에서 npm --version을 실행하여 npm이 설치되어 있고 사용 가능한지 신속하게 확인할 수 있습니다.
npm은 Nodejs.org에서 다운로드할 수 있는 Node.js 런타임과 함께 설치됩니다. 현재 LTS(장기 지원) 버전을 설치하면 npm 실행 파일이 기본적으로 시스템 경로에 추가됩니다.
npm이 설치되어 있지만 여전히 경고 메시지가 표시되는 경우, typescript.npm 설정을 사용하여 npm이 설치된 위치를 VS Code에 명시적으로 알릴 수 있습니다. 이 설정은 컴퓨터에서 npm 실행 파일의 전체 경로로 설정해야 하며, 작업 영역에서 패키지를 관리하는 데 사용하는 npm 버전과 일치할 필요는 없습니다. typescript.npm은 TypeScript 2.3.4 이상이 필요합니다.
예를 들어, Windows에서는 settings.json 파일에 다음과 같은 경로를 추가합니다.
{
"typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}
JavaScript 프로젝트 (jsconfig.json)
디렉터리에 jsconfig.json 파일이 있으면 해당 디렉터리가 JavaScript 프로젝트의 루트임을 나타냅니다. jsconfig.json은 JavaScript 언어 서비스에서 제공하는 언어 기능의 루트 파일 및 옵션을 지정합니다. 일반적인 설정의 경우 jsconfig.json 파일이 필요하지 않지만, jsconfig.json을 추가하려는 경우도 있습니다.
- 모든 파일이 JavaScript 프로젝트에 포함될 필요는 없습니다(예: IntelliSense에 표시되지 않도록 일부 파일을 제외하려는 경우). 이는 프런트엔드 및 백엔드 코드에서 일반적인 상황입니다.
- 작업 영역에 둘 이상의 프로젝트 컨텍스트가 포함되어 있습니다. 이 경우 각 프로젝트에 대해 루트 폴더에
jsconfig.json파일을 추가해야 합니다. - TypeScript 컴파일러를 사용하여 JavaScript 소스 코드를 다운레벨 컴파일하고 있습니다.
jsconfig.json 위치
코드를 JavaScript 프로젝트로 정의하려면 아래와 같이 JavaScript 코드의 루트에 jsconfig.json을 만듭니다. JavaScript 프로젝트는 프로젝트의 소스 파일이며 파생되거나 패키징된 파일(예: dist 디렉터리)은 포함하지 않아야 합니다.
더 복잡한 프로젝트에서는 작업 영역 내에 둘 이상의 jsconfig.json 파일을 정의할 수 있습니다. 이렇게 하면 한 프로젝트의 소스 코드가 다른 프로젝트의 IntelliSense에 표시되지 않도록 할 수 있습니다.
아래 그림은 client 및 server 폴더가 있는 프로젝트로, 두 개의 별도 JavaScript 프로젝트를 보여줍니다.
jsconfig.json 작성
아래는 jsconfig.json 파일의 간단한 템플릿으로, JavaScript target을 ES6으로 정의하고 exclude 속성은 node_modules 폴더를 제외합니다. 이 코드를 jsconfig.json 파일에 복사하여 붙여넣을 수 있습니다.
{
"compilerOptions": {
"module": "CommonJS",
"target": "ES6"
},
"exclude": ["node_modules", "**/node_modules/*"]
}
exclude 속성은 언어 서비스에 어떤 파일이 소스 코드의 일부가 아닌지 알려줍니다. IntelliSense가 느리면 exclude 목록에 폴더를 추가합니다(느린 완성이 감지되면 VS Code에서 이를 수행하도록 안내합니다). 빌드 프로세스에서 생성된 파일(예: dist 디렉터리)은 exclude해야 합니다. 이러한 파일은 제안이 두 번 표시되어 IntelliSense가 느려집니다.
include 속성을 사용하여 프로젝트의 파일을 명시적으로 설정할 수 있습니다. include 속성이 없으면 기본적으로 포함된 디렉터리 및 하위 디렉터리의 모든 파일이 포함됩니다. include 속성이 지정되면 해당 파일만 포함됩니다.
명시적인 include 속성이 있는 예제는 다음과 같습니다.
{
"compilerOptions": {
"module": "CommonJS",
"target": "ES6"
},
"include": ["src/**/*"]
}
최선의 방법이며 오류가 발생할 가능성이 가장 적은 경로는 단일 src 폴더와 함께 include 속성을 사용하는 것입니다. exclude 및 include의 파일 경로는 jsconfig.json의 위치를 기준으로 합니다.
자세한 내용은 전체 jsconfig.json 설명서를 참조하십시오.
TypeScript로 마이그레이션
혼합 TypeScript 및 JavaScript 프로젝트를 가질 수 있습니다. TypeScript로 마이그레이션을 시작하려면 jsconfig.json 파일의 이름을 tsconfig.json으로 바꾸고 allowJs 속성을 true로 설정합니다. 자세한 내용은 JavaScript에서 마이그레이션을 참조하십시오.
참고:
jsconfig.json은allowJs가 true로 설정된tsconfig.json파일과 동일합니다. 여기서tsconfig.json에 대한 설명서를 참조하여 다른 사용 가능한 옵션을 확인하십시오.
JavaScript 유형 검사
VS Code를 사용하면 TypeScript의 고급 유형 검사 및 오류 보고 기능 중 일부를 일반 JavaScript 파일에서도 활용할 수 있습니다. 이는 일반적인 프로그래밍 실수를 포착하는 좋은 방법입니다. 이러한 유형 검사를 통해 누락된 가져오기 추가 및 누락된 속성 추가를 포함한 JavaScript에 대한 흥미로운 빠른 수정을 사용할 수 있습니다.
TypeScript는 .ts 파일과 마찬가지로 .js 파일에서도 유형을 추론할 수 있습니다. 유형을 추론할 수 없는 경우 JSDoc 주석을 사용하여 지정할 수 있습니다. JavaScript 파일 유형 검사에서 TypeScript가 JavaScript 유형 검사에 JSDoc을 사용하는 방법에 대해 자세히 알아볼 수 있습니다.
JavaScript의 유형 검사는 선택 사항이며 옵트인 방식입니다. ESLint와 같은 기존 JavaScript 유효성 검사 도구는 새로운 내장 유형 검사 기능과 함께 사용할 수 있습니다.
요구 사항에 따라 여러 가지 방법으로 유형 검사를 시작할 수 있습니다.
파일별
JavaScript 파일에서 유형 검사를 활성화하는 가장 쉬운 방법은 파일 상단에 // @ts-check를 추가하는 것입니다.
// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'
// @ts-check 사용은 아직 전체 코드베이스에 대해 활성화하지 않고 몇 개의 파일에서 유형 검사를 시도하려는 경우 좋은 접근 방식입니다.
설정 사용
코드를 변경하지 않고 모든 JavaScript 파일에 대해 유형 검사를 활성화하려면 작업 영역 또는 사용자 설정에 "js/ts.implicitProjectConfig.checkJs": true를 추가하기만 하면 됩니다. 이렇게 하면 jsconfig.json 또는 tsconfig.json 프로젝트의 일부가 아닌 JavaScript 파일에 대한 유형 검사가 활성화됩니다.
파일 상단의 // @ts-nocheck 주석을 사용하여 개별 파일의 유형 검사를 옵트아웃할 수 있습니다.
// @ts-nocheck
let easy = 'abc';
easy = 123; // no error
오류가 있는 줄 바로 위의 // @ts-ignore 주석을 사용하여 JavaScript 파일에서 개별 오류를 비활성화할 수도 있습니다.
let easy = 'abc';
// @ts-ignore
easy = 123; // no error
jsconfig 또는 tsconfig 사용
jsconfig.json 또는 tsconfig.json의 일부인 JavaScript 파일에 대해 유형 검사를 활성화하려면 프로젝트의 컴파일러 옵션에 "checkJs": true를 추가합니다.
jsconfig.json:
{
"compilerOptions": {
"checkJs": true
},
"exclude": ["node_modules", "**/node_modules/*"]
}
tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"checkJs": true
},
"exclude": ["node_modules", "**/node_modules/*"]
}
이렇게 하면 프로젝트의 모든 JavaScript 파일에 대해 유형 검사가 활성화됩니다. // @ts-nocheck를 사용하여 파일당 유형 검사를 비활성화할 수 있습니다.
JavaScript 유형 검사에는 TypeScript 2.3이 필요합니다. 현재 작업 영역에서 활성화된 TypeScript 버전을 잘 모르는 경우 TypeScript: TypeScript 버전 선택 명령을 실행하여 확인하십시오. 이 명령을 실행하려면 편집기에서 .js/.ts 파일을 열어야 합니다. TypeScript 파일을 열면 버전이 오른쪽 하단에 표시됩니다.
전역 변수 및 유형 검사
레거시 JavaScript 코드에서 전역 변수 또는 비표준 DOM API를 사용하는 경우를 생각해 보겠습니다.
window.onload = function() {
if (window.webkitNotifications.requestPermission() === CAN_NOTIFY) {
window.webkitNotifications.createNotification(null, 'Woof!', '🐶').show();
} else {
alert('Could not notify');
}
};
위 코드에서 // @ts-check를 사용하려고 하면 전역 변수 사용에 대한 여러 오류가 표시됩니다.
2행-'Window' 형식에 'webkitNotifications' 속성이 없습니다.2행-'CAN_NOTIFY' 이름을 찾을 수 없습니다.3행-'Window' 형식에 'webkitNotifications' 속성이 없습니다.
// @ts-check를 계속 사용하고 싶지만 이러한 문제가 실제 애플리케이션 문제가 아니라고 확신하는 경우 TypeScript에 이러한 전역 변수에 대해 알려야 합니다.
먼저 프로젝트 루트에 jsconfig.json을 만듭니다.
{
"compilerOptions": {},
"exclude": ["node_modules", "**/node_modules/*"]
}
그런 다음 변경 사항이 적용되었는지 확인하기 위해 VS Code를 다시 로드합니다. jsconfig.json이 있으면 TypeScript는 JavaScript 파일이 더 큰 프로젝트의 일부임을 알게 됩니다.
이제 작업 영역의 아무 곳에나 globals.d.ts 파일을 만듭니다.
interface Window {
webkitNotifications: any;
}
declare var CAN_NOTIFY: number;
d.ts 파일은 유형 선언입니다. 이 경우 globals.d.ts는 TypeScript에 전역 CAN_NOTIFY가 존재하고 window에 webkitNotifications 속성이 있음을 알립니다. d.ts 작성에 대한 자세한 내용은 TypeScript 설명서에서 읽을 수 있습니다. d.ts 파일은 JavaScript 평가 방식을 변경하지 않으며, 더 나은 JavaScript 언어 지원을 제공하는 데만 사용됩니다.
작업 사용
TypeScript 컴파일러 사용
TypeScript의 주요 기능 중 하나는 최신 JavaScript 언어 기능을 사용하고 아직 해당 최신 기능을 이해하지 못하는 JavaScript 런타임에서 실행될 수 있는 코드를 내보내는 기능입니다. JavaScript도 동일한 언어 서비스를 사용하므로 이 동일한 기능을 활용할 수 있습니다.
TypeScript 컴파일러 tsc는 ES6의 JavaScript 파일을 다른 언어 수준으로 다운레벨 컴파일할 수 있습니다. jsconfig.json을 원하는 옵션으로 구성한 다음 –p 인수를 사용하여 tsc가 jsconfig.json 파일을 사용하도록 합니다. 예를 들어 다운레벨 컴파일을 위해 tsc -p jsconfig.json을 사용합니다.
다운 레벨 컴파일에 대한 컴파일러 옵션에 대한 자세한 내용은 jsconfig 설명서를 참조하십시오.
Babel 실행
Babel 트랜스파일러는 ES6 파일을 소스 맵과 함께 읽기 가능한 ES5 JavaScript로 변환합니다. 작업 영역의 .vscode 폴더 아래에 있는 tasks.json 파일에 아래 구성을 추가하여 Babel을 워크플로에 쉽게 통합할 수 있습니다. group 설정은 이 작업을 기본 작업: 빌드 작업 실행 제스처로 만듭니다. isBackground는 VS Code가 이 작업을 백그라운드에서 계속 실행하도록 합니다. 자세한 내용은 작업으로 이동하십시오.
{
"version": "2.0.0",
"tasks": [
{
"label": "watch",
"command": "${workspaceFolder}/node_modules/.bin/babel",
"args": ["src", "--out-dir", "lib", "-w", "--source-maps"],
"type": "shell",
"group": { "kind": "build", "isDefault": true },
"isBackground": true
}
]
}
이를 추가한 후에는 ⇧⌘B (Windows, Linux Ctrl+Shift+B) (빌드 작업 실행) 명령으로 Babel을 시작할 수 있으며, src 디렉터리의 모든 파일을 lib 디렉터리로 컴파일합니다.
팁: Babel CLI에 대한 도움말은 Babel 사용의 지침을 참조하십시오. 위의 예는 CLI 옵션을 사용합니다.
JavaScript 지원 비활성화
다른 JavaScript 언어 도구(예: Flow)에서 지원하는 JavaScript 언어 기능을 사용하려면 VS Code의 내장 JavaScript 지원을 비활성화할 수 있습니다. 이는 JavaScript 언어 지원도 제공하는 내장 TypeScript 언어 확장 TypeScript 및 JavaScript 언어 기능(vscode.typescript-language-features)을 비활성화하여 수행합니다.
JavaScript/TypeScript 지원을 비활성화하려면 확장 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))로 이동하여 내장 확장을 필터링합니다(... 더 많은 작업 드롭다운 메뉴에서 내장 확장 표시). 그런 다음 'typescript'를 입력합니다. TypeScript 및 JavaScript 언어 기능 확장을 선택하고 비활성화 버튼을 누릅니다. VS Code 내장 확장은 제거할 수 없고 비활성화만 가능하며 언제든지 다시 활성화할 수 있습니다.
부분 IntelliSense 모드
VS Code는 JavaScript 및 TypeScript에 대해 프로젝트 전체 IntelliSense를 제공하려고 합니다. 이것이 자동 가져오기 및 정의로 이동과 같은 기능을 가능하게 합니다. 그러나 VS Code가 현재 열려 있는 파일만 작업하고 JavaScript 또는 TypeScript 프로젝트를 구성하는 다른 파일을 로드할 수 없는 경우가 있습니다.
다음과 같은 몇 가지 경우에 발생할 수 있습니다.
- 브라우저에서 실행되는 vscode.dev 또는 github.dev에서 JavaScript 또는 TypeScript 코드를 작업하고 있습니다.
- 가상 파일 시스템에서 파일을 엽니다(예: GitHub Repositories 확장을 사용할 때).
- 프로젝트가 현재 로드 중입니다. 로딩이 완료되면 프로젝트 전체 IntelliSense를 받기 시작합니다.
이러한 경우 VS Code의 IntelliSense는 부분 모드로 작동합니다. 부분 모드는 열려 있는 JavaScript 또는 TypeScript 파일에 대한 IntelliSense를 제공하기 위해 최선을 다하지만 제한적이며 파일 간 IntelliSense 기능은 제공할 수 없습니다.
영향을 받는 기능은 무엇입니까?
부분 모드에서 비활성화되거나 기능이 제한되는 기능의 불완전한 목록은 다음과 같습니다.
- 열려 있는 모든 파일은 단일 프로젝트의 일부로 처리됩니다.
jsconfig또는tsconfig의 구성 옵션(예:target)은 존중되지 않습니다.- 구문 오류만 보고됩니다. 의미 오류(예: 알 수 없는 속성에 액세스하거나 함수에 잘못된 유형을 전달하는 경우)는 보고되지 않습니다.
- 의미 오류에 대한 빠른 수정은 비활성화됩니다.
- 기호는 현재 파일 내에서만 확인될 수 있습니다. 다른 파일에서 가져온 모든 기호는
any유형으로 처리됩니다. - 정의로 이동 및 모든 참조 찾기와 같은 명령은 전체 프로젝트가 아닌 열린 파일에 대해서만 작동합니다. 이는
node_module아래에 설치한 패키지의 기호도 확인되지 않음을 의미합니다. - 작업 영역 기호 검색은 현재 열려 있는 파일의 기호만 포함합니다.
- 자동 가져오기는 비활성화됩니다.
- 이름 바꾸기는 비활성화됩니다.
- 많은 리팩터링이 비활성화됩니다.
vscode.dev 및 github.dev에서 일부 추가 기능이 비활성화됩니다.
- 자동 유형 가져오기는 현재 지원되지 않습니다.
부분 모드인지 확인
현재 파일이 프로젝트 전체 IntelliSense 대신 부분 모드 IntelliSense를 사용하고 있는지 확인하려면 상태 표시줄의 JavaScript 또는 TypeScript 언어 상태 항목에 마우스를 올립니다.
현재 파일이 부분 모드인 경우 상태 항목에 부분 모드가 표시됩니다.