솔루션이나 프로젝트 없이 Visual Studio JavaScript 및 TypeScript 코드 개발

프로젝트 또는 솔루션 없이 코드를 개발할 수 있습니다. 이 방법을 사용하면 코드 폴더를 열고 IntelliSense, 검색, 리팩터링, 디버깅 등과 같은 다양한 편집기 지원 작업을 즉시 시작할 수 있습니다. Visual Studio Node.js 도구는 이러한 기능 외에도 TypeScript 파일 빌드, npm 패키지 관리 및 npm 스크립트 실행에 대한 지원을 추가합니다.

시작하려면 도구 모음에서 파일>열기>폴더 를 선택합니다. 솔루션 탐색기 폴더에 있는 모든 파일을 표시하고 파일을 열어 편집을 시작할 수 있습니다. 백그라운드에서 Visual Studio 파일을 인덱싱하여 npm, 빌드 및 디버그 기능을 사용하도록 설정합니다.

사전 요구 사항

• Visual Studio Node.js 개발 워크로드를 설치해야 합니다.

npm 통합

여는 폴더에 package.json 파일이 있는 경우 package.json 마우스 오른쪽 단추로 클릭하여 npm과 관련된 상황에 맞는 메뉴(바로 가기 메뉴)를 표시할 수 있습니다.

바로 가기 메뉴에서 프로젝트 파일을 사용할 때 npm 패키지를 관리하는 것과 동일한 방식으로 npm에 의해 설치된 패키지를 관리할 수 있습니다 .

또한 메뉴를 사용하면package.json요소에 정의된 스크립트를 scripts 실행할 수 있습니다 . 이러한 스크립트는 환경 변수에서 PATH 사용할 수 있는 Node.js 버전을 사용합니다. 스크립트는 새 창에서 실행됩니다. 이는 빌드를 실행하거나 스크립트를 실행하는 좋은 방법입니다.

빌드 및 디버그

package.json

해당 폴더의 package.json에 main 요소가 지정되어 있으면, package.json의 오른쪽 클릭 바로 가기 메뉴에서 디버그 명령을 사용할 수 있습니다. 이 명령을 선택하면 지정된 스크립트를 인수로 사용하여node.exe 시작합니다.

디버그 명령이 앱을 올바르게 시작하지 않는 경우 package.json 파일에 다음 예제와 같은 시작 스크립트가 포함되어 있는지 확인합니다.

"main": "index.js",
"scripts": {
  "start": "node index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

이 예제에서는 솔루션 탐색기에서 package.json을 마우스 오른쪽 단추로 클릭하고 Npm>npm run script start를 선택하여 package.json의 start 스크립트를 실행할 수 있습니다.

JavaScript 파일

파일을 마우스 오른쪽 단추로 클릭하고 바로 가기 메뉴에서 디버그를 선택하여 JavaScript 파일을 디버그 할 수 있습니다. 이렇게 하면 해당 JavaScript 파일을 인수로 하여 node.exe를 시작합니다.

디버그 명령이 앱을 올바르게 시작하지 않으면 package.json 섹션에 설명된 메서드를 사용하여 시작 스크립트를 실행합니다.

TypeScript 파일 및 tsconfig.json

폴더에 tsconfig.json 없는 경우 TypeScript 파일을 마우스 오른쪽 단추로 클릭하여 해당 파일을 빌드하고 디버그하는 바로 가기 메뉴 명령을 볼 수 있습니다. 이러한 명령을 사용하면 기본 옵션과 함께 tsc.exe 사용하여 빌드하거나 디버그합니다. 디버그하려면 파일을 빌드해야 합니다.

폴더에 tsconfig.json 파일이 있는 경우 TypeScript 파일을 마우스 오른쪽 단추로 클릭하여 해당 TypeScript 파일을 디버그하는 메뉴 명령을 볼 수 있습니다. 이 옵션은 outFile지정되지 않은 경우에만 나타납니다. outFile 지정된 경우tsconfig.json마우스 오른쪽 단추 로 클릭하고 올바른 옵션을 선택하여 해당 파일을 디버그할 수 있습니다. 이 파일은 tsconfig.json 컴파일러 옵션을 지정할 수 있는 빌드 옵션도 제공합니다.

단위 테스트

package.json에서 테스트 루트를 지정하여 Visual Studio에서 단위 테스트 통합을 사용할 수 있습니다.

{
    // ...
    "vsTest":{
        "testRoot": "./tests"
    }
    // ...
}

테스트 실행기는 로컬로 설치된 패키지를 열거하여 사용할 테스트 프레임워크를 결정합니다. 지원되는 프레임워크가 인식되지 않는 경우 테스트 실행기는 기본적으로 ExportRunner로 설정됩니다. 지원되는 다른 프레임워크는 다음과 같습니다.

• 모차(mochajs.org)
• 재스민 (Jasmine.github.io)
• 테이프(github.com/substack/tape)
• Jest(jestjs.io)

테스트 탐색기를 연 후( 테스트>Windows>테스트 탐색기 선택) Visual Studio에서 테스트를 검색하고 표시합니다.