Kode Visual Studio dikompilasi pada save

Bagaimana saya bisa mengkonfigurasi Visual Studio Code untuk mengkompilasi file naskah di simpan?

Saya melihat itu mungkin untuk mengkonfigurasi tugas untuk membangun file dalam fokus menggunakan ${file}argumen. Tapi saya ingin ini dilakukan ketika file disimpan.

Pembaruan Mei 2018:

Mulai Mei 2018 Anda tidak perlu lagi membuat tsconfig.jsonsecara manual atau mengonfigurasi pelari tugas.

1. Jalankan tsc --initdi folder proyek Anda untuk membuat tsconfig.jsonfile (jika Anda belum memilikinya).
2. Tekan Ctrl+Shift+Buntuk membuka daftar tugas dalam Kode VS dan pilih tsc: watch - tsconfig.json.
3. Selesai! Proyek Anda dikompilasi ulang pada setiap penyimpanan file.

Anda dapat memiliki beberapa tsconfig.jsonfile di ruang kerja Anda dan menjalankan beberapa kompilasi sekaligus jika Anda mau (mis. Frontend dan backend secara terpisah).

Jawaban asli:

Anda dapat melakukan ini dengan perintah Bangun:

Buat sederhana tsconfig.jsondengan "watch": true(ini akan menginstruksikan kompiler untuk menonton semua file yang dikompilasi):

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

Perhatikan bahwa filesarray dihilangkan, secara default semua *.tsfile di semua subdirektori akan dikompilasi. Anda dapat memberikan parameter lain atau perubahan target/ out, hanya memastikan bahwa watchdiatur untuk true.

Konfigurasikan tugas Anda ( Ctrl+Shift+P-> Configure Task Runner):

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

Sekarang tekan Ctrl+Shift+Buntuk membangun proyek. Anda akan melihat output kompiler di jendela output ( Ctrl+Shift+U).

Kompiler akan mengkompilasi file secara otomatis saat disimpan. Untuk menghentikan kompilasi, tekan Ctrl+P->> Tasks: Terminate Running Task

Saya telah membuat templat proyek khusus untuk jawaban ini: typescript-node-basic

Jika Anda ingin menghindari penggunaan CTRL+ SHIFT+ Bdan sebaliknya ingin ini terjadi kapan pun Anda menyimpan file, Anda dapat mengikat perintah ke jalan pintas yang sama dengan tindakan simpan:

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

Ini berlaku di keybindings.json Anda - (menuju ke ini menggunakan File -> Preferences -> Shortcut Keyboard).

Jika menekan Ctrl+ Shift+B sepertinya banyak usaha, Anda dapat mengaktifkan "Simpan Otomatis" (File> Simpan Otomatis) dan gunakan NodeJS untuk menonton semua file di proyek Anda, dan jalankan TSC secara otomatis.

Buka prompt perintah Node.JS, ubah direktori ke folder root proyek Anda dan ketik berikut ini;

tsc -w

Dan hei presto, setiap kali VS Code otomatis menyimpan file, TSC akan mengkompilasi ulang.

Teknik ini disebutkan dalam posting blog;

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

Gulir ke bawah untuk "Kompilasi saat menyimpan"

Tulis Ekstensi

Sekarang vscode dapat diperpanjang, dimungkinkan untuk terhubung ke acara save via ekstensi. Tinjauan umum ekstensi penulisan untuk VSCode dapat ditemukan di sini: https://code.visualstudio.com/docs/extensions/overview

Berikut adalah contoh sederhana yang hanya memanggil echo $filepathdan menampilkan stdout dalam dialog pesan:

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);
}

(Juga dirujuk pada pertanyaan SO ini: https://stackoverflow.com/a/33843805/20489 )

Ekstensi VSCode yang ada

Jika Anda hanya ingin menginstal ekstensi yang ada, berikut ini yang saya tulis tersedia di galeri VSCode: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Kode sumber tersedia di sini: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Saya telah berjuang keras untuk mendapatkan perilaku yang saya inginkan. Ini adalah cara termudah dan terbaik untuk mendapatkan file TypeScript untuk dikompilasi pada save, untuk konfigurasi yang saya inginkan, hanya file INI (file yang disimpan). Ini adalah task.json dan keybindings.json.

Alih-alih membangun satu file dan mengikat Ctrl + S untuk memicu build itu, saya akan merekomendasikan untuk memulai tsc dalam mode menonton menggunakan file task.json berikut:

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

Ini sekali akan membangun seluruh proyek dan kemudian membangun kembali file yang disimpan terlepas dari bagaimana mereka disimpan (Ctrl + S, simpan otomatis, ...)

Diperbarui

Di Anda tsconfig.json

"compileOnSave": true, // change to true

jika masalah masih ada, lakukan salah satu dari yang berikut:

Mulai ulang editor Anda atau Ubah rute apa pun, kembalikan, dan simpan aplikasi. Itu akan mulai mengkompilasi. yaitu

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

Saya menerapkan kompilasi pada save dengan tugas teguk menggunakan tegukan-naskah dan membangun incremental. Ini memungkinkan Anda mengontrol kompilasi apa pun yang Anda inginkan. Perhatikan variabel tsServerProject saya, dalam proyek nyata saya, saya juga punya tsClientProject karena saya ingin mengkompilasi kode klien saya tanpa modul yang ditentukan. Seperti yang saya tahu Anda tidak dapat melakukannya dengan kode 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/'));

}

Pilih Preferensi -> Pengaturan Workspace dan tambahkan kode berikut, Jika Anda memiliki Hot reload diaktifkan, maka perubahan segera tercermin di browser

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

Status terkini dari masalah ini:

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

Saya dapat mengatakan dengan versi terbaru dari TypeScript 1.8.X dan 1.0 dari kode Visual Studio, teknik yang saya tunjukkan sudah usang. Cukup gunakan tsconfig.json di tingkat root proyek Anda dan semua bekerja secara otomatis untuk memeriksa sintaksis. Kemudian gunakan tsc -w pada baris perintah untuk menonton / mengkompilasi ulang secara otomatis. Ini akan membaca file tsconfig.json yang sama untuk opsi dan konfigurasi kompilasi ts.

// tsconfig.json

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

Cara yang sangat sederhana untuk melakukan kompilasi otomatis saat save adalah dengan mengetik yang berikut ini di terminal:

tsc main --watch

dimana main.tsnama file kamu

Catatan, ini hanya akan berjalan selama terminal ini terbuka, tetapi ini adalah solusi yang sangat sederhana yang dapat dijalankan saat Anda sedang mengedit program.

Anda perlu menambah batas jam tangan untuk memperbaiki masalah kompilasi ulang pada save, Buka terminal dan masukkan dua perintah ini:

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

Untuk membuat perubahan terus-menerus bahkan setelah restart, jalankan perintah ini juga:

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

mencoba metode di atas tetapi saya berhenti kompilasi otomatis ketika merasa seperti itu, karena file maksimum untuk menonton telah melampaui batas.

jalankan cat /proc/sys/fs/inotify/max_user_watchesperintah.

jika itu menunjukkan jumlah file yang lebih sedikit termasuk node_modules kemudian buka file /etc/sysctl.confdi root privilege dan append

fs.inotify.max_user_watches=524288 ke dalam file dan simpan

jalankan lagi perintah cat untuk melihat hasilnya. Itu akan berhasil! semoga!

Saya menggunakan tugas otomatis yang dijalankan pada folder (harus bekerja VSCode> = 1.30) dalam .vscode / task.json

{
 "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
        }
    }
 ]
}

Jika ini masih tidak berfungsi pada folder proyek buka coba Ctrl + shift + P dan Tugas: Kelola Tugas Otomatis di Folder dan pilih "Izinkan Tugas Otomatis dalam folder" pada folder proyek utama atau menjalankan folder.