保存時にVisual Studioコードをコンパイル

保存時にtypescriptファイルをコンパイルするようにVisual Studio Codeを構成するにはどうすればよいですか？

${file}引数としてを使用して、フォーカスされているファイルをビルドするようにタスクを構成できることを確認します。しかし、私はこれがファイルが保存されるときに行われることを望みます。

2018年5月の更新：

2018年5月以降、tsconfig.json手動で作成したり、タスクランナーを構成したりする必要がなくなりました。

1. tsc --initプロジェクトフォルダーで実行してtsconfig.jsonファイルを作成します（まだファイルがない場合）。
2. を押しCtrl+Shift+BてVS Codeでタスクのリストを開き、を選択しますtsc: watch - tsconfig.json。
3. できた！プロジェクトは、ファイルを保存するたびに再コンパイルされます。

tsconfig.jsonワークスペースに複数のファイルを置き、必要に応じて一度に複数のコンパイルを実行できます（フロントエンドとバックエンドを別々に）。

元の答え：

これはビルドコマンドで実行できます。

シンプルなtsconfig.jsonwithを作成します"watch": true（これにより、すべてのコンパイル済みファイルを監視するようコンパイラーに指示します）。

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

files配列は省略されていることに注意してください。デフォルト*.tsでは、すべてのサブディレクトリ内のすべてのファイルがコンパイルされます。他のパラメータを指定したり、target/を変更したりできます。outこれwatchがに設定されていることを確認してくださいtrue。

タスクを設定します（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にあります-（File-> Preferences-> Keyboard Shortcutsを使用してこれに進みます）。

Ctrl+ Shift+を押すのBが大変だと思われる場合は、「自動保存」をオンにして（「ファイル」>「自動保存」）、NodeJSを使用してプロジェクト内のすべてのファイルを監視し、TSCを自動的に実行できます。

Node.JSコマンドプロンプトを開き、ディレクトリをプロジェクトのルートフォルダーに変更して、次のように入力します。

tsc -w

そしてprestoさん、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/'));

}

[ 設定]-> [ワークスペース設定]を選択し、次のコードを追加します。ホットリロードを有効にしている場合、変更はブラウザにすぐに反映されます

{
    "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の最新バージョンとVisual Studioコードの1.0では、私が示した手法は時代遅れです。プロジェクトのルートレベルで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ファイル名はどこですか。

これは、このターミナルが開いている間のみ実行されますが、プログラムの編集中に実行できる非常にシンプルなソリューションです。

保存時の再コンパイルの問題を修正してターミナルを開き、次の2つのコマンドを入力するには、監視制限を増やす必要があります。

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をroot権限で開いて 追加します

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およびタスク：フォルダー内の自動タスクを管理して、メインプロジェクトフォルダーまたは実行中のフォルダーで[フォルダー内の自動タスクを許可する]を選択します。