web-dev-qa-db-ja.com

ビジュアルスタジオコードを保存時にコンパイル

保存時にTypeScriptファイルをコンパイルするようにVisual Studioのコードを構成する方法を教えてください。引数として${file}を使用してフォーカスのあるファイルをビルドするタスクを設定することが可能であると思います。しかし、ファイルが保存されたときにこれを実行したいと思います。

typescriptvisual-studio-code
133
Powell Quiring

2018年5月の更新：

2018年5月の時点で、あなたはもはや手動でtsconfig.jsonを作成するかまたはタスクランナーを構成する必要はありません。

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

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

元の答え：

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

tsconfig.jsonを使用して単純な "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

171
zlumer

CTRL + SHIFT + Bを使用しなくてもよくなり、代わりにファイルを保存するときにこれを実行したい場合は、コマンドを保存アクションと同じショートカットにバインドすることができます。

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

これはあなたのkeybindings.jsonに入ります - （File - > Preferences - > Keyboard Shortcutsを使ってこれに向かいます）。

34
Fenton

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

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

tsc -w

そして、VS Codeが自動的にファイルを保存するたびに、TSCはそれを再コンパイルします。

この手法はブログの投稿に記載されています。

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

「保存時にコンパイル」までスクロールします。

19
Jon Preece

私は望む行動を得るために激しく奮闘しました。これは、TypeScriptファイルを保存時に必要な設定にコンパイルするための最も簡単で最良の方法です。このファイル（保存されたファイル）だけです。これはtasks.jsonとkeybindings.jsonです。

enter image description here

6
httpete

拡張子を書く

Vscodeが拡張可能になったので、拡張子を介してon saveイベントにフックすることが可能です。 VSCodeのための拡張機能を書くことの良い概観はここで見つけることができます： https://code.visualstudio.com/docs/extensions/overview

これはecho $filepathを呼び出してメッセージダイアログに標準出力を出力する簡単な例です。

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

6
bingles

単一のファイルをビルドして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、自動保存など）。

4
Dirk Bäumer

私は 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/'));

}
2
Andzej Maciusovic

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" ]
}
1
httpete

Preferences - > Workspace Settingsを選択し、次のコードを追加してください。もしあなたがホットリロードを有効にしていれば、変更は直ちにブラウザに反映されます。

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

この問題の現在の状況：

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

1
Trident D'Gao

上記の方法を試してみましたが、最大監視ファイル数が限度を超えたために、私のように感じたら自動コンパイルを停止しました。

cat /proc/sys/fs/inotify/max_user_watchesコマンドを実行してください。

node_modulesを含むファイル数が少ない場合は、ファイル/etc/sysctl.confをroot権限で開き、追加します。

fs.inotify.max_user_watches=524288をファイルに保存して保存します

catコマンドをもう一度実行して結果を確認してください。それが動作します！うまくいけば！

0
Aelaf

更新

あなたのtsconfig.jsonに

"compileOnSave": true, // change to true

それでも問題が解決しない場合は、ルートを変更して元に戻してアプリケーションを保存します。コンパイルが始まります。

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

これが誰かに役立つことを願っています。これは恒久的な解決策ではありませんが、より良い解決策が見つかるまで機能します。

0
WasiF

保存時に自動コンパイルする非常に簡単な方法は、端末に次のように入力することです。

tsc main --watch

main.tsはあなたのファイル名です。

注意してください、これはこの端末が開いている間だけ実行されますが、プログラムを編集している間実行することができる非常に単純な解決策です。

0
Daniel C Jacobs