Kaydetme sırasında Visual Studio Code derlemesi

Visual Studio Code'u kaydedildiğinde daktilo dosyalarını derlemek için nasıl yapılandırabilirim?

Bağımsız ${file}değişken olarak odakta dosyayı oluşturmak için bir görev yapılandırmak mümkün olduğunu görüyorum . Ama bunun bir dosya kaydedildiğinde yapılmasını istiyorum.

Mayıs 2018 güncellemesi:

Mayıs 2018 itibariyle artık tsconfig.jsonmanuel olarak oluşturmanıza veya görev çalıştırıcısını yapılandırmanıza gerek yoktur .

1. Dosya tsc --initoluşturmak için proje klasörünüzde çalıştırın tsconfig.json(henüz yoksa).
2. Ctrl+Shift+BVS Kodu'ndaki görevlerin listesini açmak için düğmesine basın ve öğesini seçin tsc: watch - tsconfig.json.
3. Bitti! Projeniz kaydedilen her dosyada yeniden derlenir.

tsconfig.jsonÇalışma alanınızda birden fazla dosya olabilir ve isterseniz aynı anda birden fazla derleme çalıştırabilirsiniz (örn. Ön uç ve arka uç ayrı olarak).

Orijinal cevap:

Bunu Build komutları ile yapabilirsiniz:

İle bir basit tsconfig.jsonoluşturun "watch": true(derleyiciye tüm derlenmiş dosyaları izlemesini söyleyecektir):

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

O Not filesdizisi atlanırsa, varsayılan olarak tüm *.tstüm alt dizinleri dosyalar derlenmiş olacaktır. Başka parametreler sağlayabilir veya target/ parametresini değiştirebilirsiniz out, sadece watcholarak ayarlandığından emin olun true.

Görevinizi yapılandırın ( Ctrl+Shift+P-> Configure Task Runner):

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

Şimdi Ctrl+Shift+Bprojeyi oluşturmak için düğmesine basın . Derleyici çıktısını çıktı penceresinde ( Ctrl+Shift+U) göreceksiniz .

Derleyici kaydedildiğinde dosyaları otomatik olarak derler. Derlemeyi durdurmak için Ctrl+P->> Tasks: Terminate Running Task

Bu cevap için özel olarak bir proje şablonu oluşturdum: typescript-node-basic

CTRL+ SHIFT+ Kullanmak zorunda kalmamak Bve bunun yerine bir dosyayı her kaydettiğinizde olmasını istiyorsanız, komutu kaydetme eylemiyle aynı kısayola bağlayabilirsiniz:

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

Bu keybindings.json'ınıza gider - (Dosya -> Tercihler -> Klavye Kısayolları'nı kullanarak buna gidin).

Ctrl+ Shift+ BDüğmesine basmak çok fazla çaba gerektiriyorsa, "Otomatik Kaydet" i (Dosya> Otomatik Kaydet) açabilir ve projenizdeki tüm dosyaları izlemek için NodeJS'yi kullanabilir ve TSC'yi otomatik olarak çalıştırabilirsiniz.

Bir Node.JS komut istemi açın, dizini proje kök klasörünüzle değiştirin ve aşağıdakileri yazın;

tsc -w

Ve hey presto, VS Code dosyayı her kaydettiğinde TSC dosyayı yeniden derleyecek.

Bu teknik bir blog yazısında belirtilmiştir;

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

"Kaydetme sırasında derle" seçeneğine ilerleyin

Bir Uzantı Yazın

Artık vscode genişletilebilir olduğundan, bir save ile on save olayına bağlanmak mümkündür. VSCode için uzantıları yazmaya iyi bir genel bakış burada bulunabilir: https://code.visualstudio.com/docs/extensions/overview

Aşağıda echo $filepath, mesaj diyalogunda stdout'u çağıran ve çıkaran basit bir örnek verilmiştir :

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

(Bu SO sorusunda da belirtilmiştir: https://stackoverflow.com/a/33843805/20489 )

Mevcut VSCode Uzantısı

Sadece mevcut bir uzantıyı yüklemek istiyorsanız, VSCode galerisinde yazdığım bir uzantı var: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Kaynak kodu burada bulunabilir: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

İstediğim davranışı elde etmek için güçlü bir şekilde mücadele ettim. Bu, TypeScript dosyalarının kaydedilmesini, istediğim yapılandırmaya derlemesini sağlamanın en kolay ve en iyi yoludur, sadece BU dosya (kaydedilmiş dosya). Bu bir görevler. Json ve bir keybindings.json.

Tek bir dosya oluşturmak ve bu yapıyı tetiklemek için Ctrl + S'yi bağlamak yerine aşağıdaki görevler.json dosyasını kullanarak izleme modunda tsc'yi başlatmanızı öneririm:

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

Bu, bir kez tüm projeyi inşa edecek ve daha sonra kaydedildiklerinden bağımsız olarak kaydedilen dosyaları yeniden oluşturacaktır (Ctrl + S, otomatik kaydetme, ...)

Güncellenmiş

Sizin tsconfig.json

"compileOnSave": true, // change to true

sorun hala devam ediyorsa aşağıdakilerden birini yapın:

Düzenleyicinizi yeniden başlatın veya Herhangi bir rotayı değiştirin, geri alın ve uygulamayı kaydedin. Derlemeye başlayacak. yani

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

Gulp-typcript ve artımlı derleme kullanarak gulp görevi ile kaydetme üzerine derleme uyguladım . Bu, derlemeyi istediğiniz gibi kontrol etmenizi sağlar. Değişken tsServerProject dikkat edin, gerçek projemde tsClientProject var çünkü istemci kodumu hiçbir modül belirtmeden derlemek istiyorum. Bildiğim gibi vs kodu ile yapamazsınız.

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

}

Tercihler -> Çalışma Alanı Ayarları'nı seçin ve Sıcak yeniden yüklemeyi etkinleştirdiyseniz aşağıdaki kodu ekleyin, değişiklikler tarayıcıya hemen yansır

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

Bu sorunun mevcut durumu:

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

Visual Studio kodunun TypeScript 1.8.X ve 1.0'ın en son sürümü ile söyleyebilirim, gösterdiğim teknik eski. Projenizin kök düzeyinde bir tsconfig.json kullanın ve sözdizimi kontrolü için tüm otomatik olarak çalışır. Ardından otomatik olarak izlemek / yeniden derlemek için komut satırında tsc -w kullanın. Ts compfig seçenekleri ve yapılandırması için aynı tsconfig.json dosyasını okuyacaktır.

// tsconfig.json

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

Kaydetme üzerine otomatik derlemenin son derece basit bir yolu, terminale aşağıdakileri yazmaktır:

tsc main --watch

main.tsdosya adınız nerede .

Unutmayın, bu sadece bu terminal açık olduğu sürece çalışır, ancak bir programı düzenlerken çalıştırılabilecek çok basit bir çözümdür.

Kaydetme, Terminali açma ve yeniden derleme konusundaki yeniden derleme sorununu gidermek için saat sınırını artırmanız gerekir:

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

Yeniden başlattıktan sonra bile değişiklikleri kalıcı hale getirmek için bu komutu da çalıştırın:

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

Yukarıdaki yöntemleri denedim ancak benimsediğim zaman otomatik derlemeyi durdurdu, çünkü izlemek için maksimum dosya sınırı geçti.

cat /proc/sys/fs/inotify/max_user_watcheskomutu çalıştır .

node_modules dahil olmak üzere daha az dosya sayısı gösteriyorsa, dosyayı /etc/sysctl.confkök ayrıcalığı ile açın ve ekleyin

fs.inotify.max_user_watches=524288 dosyaya kaydedin ve kaydedin

sonucu görmek için kedi komutunu tekrar çalıştırın. Çalışacak! inşallah!

.Vscode / task.json içinde klasörde çalıştırılan otomatik görevleri kullanıyorum (VSCode> = 1.30 olmalıdır)

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

Bu proje klasörü açık üzerinde hala çalışmıyorsa Ctrl + shift + P ve Görevleri deneyin: Klasördeki Otomatik Görevleri Yönetin ve ana proje klasöründe veya çalışan klasörde "Klasörde Otomatik Görevlere İzin Ver" i seçin.