[typescript] 저장시 Visual Studio Code 컴파일

Question 1

저장시 typescript 파일을 컴파일하도록 Visual Studio Code를 구성하려면 어떻게해야합니까?

를 ${file}인수로 사용하여 포커스가있는 파일을 빌드하는 작업을 구성 할 수 있습니다 . 하지만 파일이 저장되면이 작업을 수행하고 싶습니다.

Question 2

2018 년 5 월 업데이트 :

2018 년 5 월부터는 더 이상 tsconfig.json수동으로 생성 하거나 작업 실행기를 구성 할 필요가 없습니다 .

tsc --init프로젝트 폴더에서 실행 하여 tsconfig.json파일 을 만듭니다 (아직없는 경우).
을 눌러 Ctrl+Shift+BVS Code에서 작업 목록을 열고을 선택 tsc: watch - tsconfig.json합니다.
끝난! 파일을 저장할 때마다 프로젝트가 다시 컴파일됩니다.

tsconfig.json원하는 경우 작업 공간에 여러 파일을 포함하고 한 번에 여러 컴파일을 실행할 수 있습니다 (예 : 프런트 엔드 및 백엔드 개별).

원래 답변 :

빌드 명령으로이를 수행 할 수 있습니다.

간단한 만들기 tsconfig.json와을 "watch": true(모든 컴파일 된 파일을 볼 컴파일러에 지시합니다) :

{
    "compilerOptions": {
        "target": "es5",
        "out": "js/script.js",
        "watch": true
    }
}

참고 files배열이 생략는 기본적으로 모든 *.ts모든 하위 디렉토리에있는 파일은 컴파일됩니다. 다른 매개 변수를 제공하거나 target/를 변경할 수 있습니다 . 로 설정되어 out있는지 확인하십시오 .watchtrue

작업 구성 ( Ctrl+Shift+P-> Configure Task Runner) :

{
    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "silent",
    "isShellCommand": true,
    "problemMatcher": "$tsc"
}

이제 키를 눌러 Ctrl+Shift+B프로젝트를 빌드하십시오. 출력 창 ( Ctrl+Shift+U) 에 컴파일러 출력이 표시됩니다 .

컴파일러는 저장할 때 파일을 자동으로 컴파일합니다. 편집을 중지하려면 Ctrl+P->를 누릅니다.> Tasks: Terminate Running Task

이 답변을 위해 특별히 프로젝트 템플릿을 만들었습니다. typescript-node-basic

Question 3

CTRL+ SHIFT+ 를 사용 B하지 않고 대신 파일을 저장할 때마다이 문제가 발생하도록하려면 저장 작업과 동일한 바로 가기에 명령을 바인딩 할 수 있습니다.

[
    {
        "key": "ctrl+s",
        "command": "workbench.action.tasks.build"
    }
]

이것은 keybindings.json에 있습니다-(파일-> 환경 설정-> 키보드 단축키를 사용하여 이로 이동하십시오).

Question 4

Ctrl+ Shift+를 누르는 B것이 많은 노력처럼 보이면 “자동 저장”(파일> 자동 저장)을 켜고 NodeJS를 사용하여 프로젝트의 모든 파일을 감시하고 TSC를 자동으로 실행할 수 있습니다.

Node.JS 명령 프롬프트를 열고 디렉토리를 프로젝트 루트 폴더로 변경 한 후 다음을 입력하십시오.

tsc -w

그리고 안녕하세요, VS Code가 파일을 자동으로 저장할 때마다 TSC가 파일을 다시 컴파일합니다.

이 기술은 블로그 게시물에 언급되어 있습니다.

http://www.typescriptguy.com/getting-started/angularjs-typescript/

“저장시 컴파일”까지 아래로 스크롤합니다.

Question 5

확장 프로그램 작성

이제 vscode가 확장 가능하므로 확장을 통해 저장시 이벤트에 연결할 수 있습니다. VSCode 용 확장 작성에 대한 좋은 개요는 https://code.visualstudio.com/docs/extensions/overview 에서 찾을 수 있습니다.

다음 echo $filepath은 메시지 대화에서 stdout을 호출 하고 출력 하는 간단한 예입니다 .

import * as vscode from 'vscode';
import {exec} from 'child_process';

export function activate(context: vscode.ExtensionContext) {

    vscode.window.showInformationMessage('Run command on save enabled.');

    var cmd = vscode.commands.registerCommand('extension.executeOnSave', () => {

        var onSave = vscode.workspace.onDidSaveTextDocument((e: vscode.TextDocument) => {

            // execute some child process on save
            var child = exec('echo ' + e.fileName);
            child.stdout.on('data', (data) => {
                vscode.window.showInformationMessage(data);
            });
        });
        context.subscriptions.push(onSave);
    });

    context.subscriptions.push(cmd);
}

(또한이 SO 질문에서 참조 :
https://stackoverflow.com/a/33843805/20489 )

기존 VSCode 확장

기존 확장 만 설치하려면 VSCode 갤러리에서 사용할 수 있도록 작성한 확장 프로그램이 있습니다.
https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

소스 코드는 여기에서 확인할 수 있습니다 :
https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Question 6

나는 내가 원하는 행동을 얻기 위해 힘겹게 고생했다. 이것은 TypeScript 파일을 내가 원하는 구성으로 컴파일 할 때이 파일 (저장된 파일) 만 컴파일 할 수있는 가장 쉽고 가장 좋은 방법입니다. tasks.json 및 keybindings.json입니다.

Question 7

단일 파일을 빌드하고 Ctrl + S를 바인딩하여 해당 빌드를 트리거하는 대신 다음 tasks.json 파일을 사용하여 감시 모드에서 tsc를 시작하는 것이 좋습니다.

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

이것은 한 번 전체 프로젝트를 빌드 한 다음 저장되는 방법에 관계없이 저장되는 파일을 다시 빌드합니다 (Ctrl + S, 자동 저장, …).

Question 8

업데이트 됨

당신의 tsconfig.json

"compileOnSave": true, // change to true

문제가 계속되면 다음 중 하나를 수행하십시오.

편집기를 다시 시작 하거나 경로를 변경하고 되 돌린 다음 응용 프로그램을 저장하십시오. 컴파일이 시작됩니다. 즉

const routes: Routes = [
  {
    path: '', // i.e. remove , (comma) and then insert it and save, it'll start compile
    component: VersionsComponent
  }
]