저장시 Visual Studio Code 컴파일

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

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

2018 년 5 월 업데이트 :

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

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

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

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

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

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

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

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

tsc -w

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

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

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

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

확장 프로그램 작성

이제 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

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

단일 파일을 빌드하고 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, 자동 저장, ...).

업데이트 됨

당신의 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
  }
]

gulp-typescript 및 증분 빌드를 사용하여 gulp 작업으로 저장시 컴파일을 구현했습니다 . 이를 통해 원하는대로 컴파일을 제어 할 수 있습니다. 내 변수 tsServerProject에 주목하십시오. 실제 프로젝트에서는 모듈을 지정하지 않고 클라이언트 코드를 컴파일하고 싶기 때문에 tsClientProject도 있습니다. 내가 알고 있듯이 vs 코드로는 할 수 없습니다.

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    sourcemaps = require('gulp-sourcemaps');

var tsServerProject = ts.createProject({
   declarationFiles: false,
   noExternalResolve: false,
   module: 'commonjs',
   target: 'ES5'
});

var srcServer = 'src/server/**/*.ts'

gulp.task('watch-server', ['compile-server'], watchServer);
gulp.task('compile-server', compileServer);

function watchServer(params) {
   gulp.watch(srcServer, ['compile-server']);
}

function compileServer(params) {
   var tsResult = gulp.src(srcServer)
      .pipe(sourcemaps.init())
      .pipe(ts(tsServerProject));

   return tsResult.js
      .pipe(sourcemaps.write('./source-maps'))
      .pipe(gulp.dest('src/server/'));

}

Preferences-> Workspace Settings를 선택 하고 다음 코드를 추가합니다. Hot reload가 활성화 된 경우 변경 사항이 브라우저에 즉시 반영됩니다.

{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.js.map": true,
        "**/*.js": {"when": "$(basename).ts"}
    },
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000
}

이 문제의 현재 상태 :

https://github.com/Microsoft/vscode/issues/7015

최신 버전의 TypeScript 1.8.X 및 1.0의 Visual Studio 코드에서는 내가 보여준 기술이 쓸모 없다고 말할 수 있습니다. 프로젝트의 루트 수준에서 tsconfig.json을 사용하기 만하면 구문 검사를 위해 모두 자동으로 작동합니다. 그런 다음 명령 줄에서 tsc -w를 사용하여 자동으로 감시 / 재 컴파일합니다. ts 컴파일의 옵션 및 구성에 대해 동일한 tsconfig.json 파일을 읽습니다.

// tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "ES5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "inlineSourceMap": true
    },
    "exclude": [ "node_modules" ]
} 

저장시 자동 컴파일하는 매우 간단한 방법은 터미널에 다음을 입력하는 것입니다.

tsc main --watch

main.ts파일 이름은 어디에 있습니까 ?

이 터미널이 열려있는 동안에 만 실행되지만 프로그램을 편집하는 동안 실행할 수있는 매우 간단한 솔루션입니다.

저장, 열기 터미널에서 재 컴파일 문제를 해결하려면 감시 제한을 늘려야하며 다음 두 명령을 입력해야합니다.

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

다시 시작한 후에도 변경 사항을 영구적으로 적용하려면 다음 명령도 실행하십시오.

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

위의 방법을 시도했지만 볼 수 있는 최대 파일 이 제한을 초과 했기 때문에 자동 컴파일이 중지되었습니다 .

실행 cat /proc/sys/fs/inotify/max_user_watches명령.

node_modules를 포함하여 더 적은 파일 수가 표시되면 /etc/sysctl.conf루트 권한으로 파일을 열고 추가하십시오.

fs.inotify.max_user_watches=524288 파일에 저장하고

결과를 보려면 cat 명령을 다시 실행하십시오. 작동합니다! 바라건대!

.vscode / tasks.json의 폴더에서 실행되는 자동 작업을 사용합니다 (VSCode> = 1.30으로 작동해야 함).

{
 "version": "2.0.0",
 "tasks": [
    {
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "option": "watch",
        "presentation": {
            "echo": true,
            "reveal": "silent",
            "focus": false,
            "panel": "shared"
        },
        "isBackground": true,
        "runOptions": {"runOn": "folderOpen"},
        "problemMatcher": [
            "$tsc-watch"
        ],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
 ]
}

여전히 프로젝트 폴더 열기에서 작동하지 않으면 Ctrl + Shift + P 및 작업 : 폴더에서 자동 작업 관리를 시도하고 주 프로젝트 폴더 또는 실행중인 폴더에서 "폴더에서 자동 작업 허용"을 선택하십시오.