Visual Studio Code kompiluje się przy zapisywaniu

Jak mogę skonfigurować program Visual Studio Code do kompilowania plików maszynopisu podczas zapisywania?

Widzę, że można skonfigurować zadanie, aby zbudować plik w fokusie, używając ${file}jako argumentu. Ale chciałbym, aby było to zrobione, gdy plik jest zapisywany.

Aktualizacja z maja 2018 r .:

Od maja 2018 r. Nie trzeba już tworzyć tsconfig.jsonręcznie ani konfigurować modułu uruchamiającego zadania.

1. Uruchom tsc --initw folderze projektu, aby utworzyć tsconfig.jsonplik (jeśli jeszcze go nie masz).
2. Naciśnij, Ctrl+Shift+Baby otworzyć listę zadań w programie VS Code i wybierz tsc: watch - tsconfig.json.
3. Gotowe! Twój projekt jest ponownie kompilowany przy każdym zapisie pliku.

Możesz mieć kilka tsconfig.jsonplików w swoim obszarze roboczym i uruchamiać wiele kompilacji na raz, jeśli chcesz (np. Osobno frontend i backend).

Oryginalna odpowiedź:

Możesz to zrobić za pomocą poleceń kompilacji:

Utwórz prosty tsconfig.jsonz "watch": true(poinstruuje kompilator, aby obserwował wszystkie skompilowane pliki):

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

Zauważ, że filestablica jest pomijana, domyślnie wszystkie *.tspliki we wszystkich podkatalogach zostaną skompilowane. Możesz podać inne parametry lub zmienić target/ out, po prostu upewnij się, że watchjest ustawiony natrue .

Skonfiguruj swoje zadanie ( Ctrl+Shift+P-> Configure Task Runner):

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

Teraz naciśnij, Ctrl+Shift+Baby zbudować projekt. Zobaczysz dane wyjściowe kompilatora w oknie danych wyjściowych ( Ctrl+Shift+U).

Kompilator skompiluje pliki automatycznie po zapisaniu. Aby zatrzymać kompilację, naciśnij Ctrl+P->> Tasks: Terminate Running Task

Stworzyłem szablon projektu specjalnie dla tej odpowiedzi: typescript-node-basic

Jeśli chcesz uniknąć konieczności używania CTRL+ SHIFT+ Bi zamiast tego chcesz, aby działo się to za każdym razem, gdy zapisujesz plik, możesz powiązać polecenie z tym samym skrótem, co akcja zapisywania:

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

Znajduje się to w twoim keybindings.json - (przejdź do tego za pomocą Plik -> Preferencje -> Skróty klawiaturowe).

Jeśli naciśniesz Ctrl+ Shift+B wydaje się być dużym wysiłkiem, możesz włączyć „Automatyczne zapisywanie” (Plik> Automatyczne zapisywanie) i używać NodeJS do oglądania wszystkich plików w projekcie i automatycznie uruchamiać TSC.

Otwórz wiersz polecenia Node.JS, zmień katalog na folder główny projektu i wpisz następujące polecenie;

tsc -w

I hej, presto, za każdym razem, gdy VS Code automatycznie zapisze plik, TSC go przekompiluje.

Ta technika jest wspomniana w poście na blogu;

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

Przewiń w dół do „Kompiluj przy zapisywaniu”

Napisz rozszerzenie

Teraz, gdy vscode jest rozszerzalny, można podłączyć się do zdarzenia przy zapisywaniu za pośrednictwem rozszerzenia. Dobry przegląd pisania rozszerzeń dla VSCode można znaleźć tutaj: https://code.visualstudio.com/docs/extensions/overview

Oto prosty przykład, który po prostu wywołuje echo $filepathi wyświetla standardowe wyjście w dialogu wiadomości:

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

(Przywołane również w tym pytaniu SO: https://stackoverflow.com/a/33843805/20489 )

Istniejące rozszerzenie VSCode

Jeśli chcesz po prostu zainstalować istniejące rozszerzenie, oto takie, które napisałem, dostępne w galerii VSCode: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Kod źródłowy jest dostępny tutaj: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Z trudem starałem się uzyskać pożądane zachowanie. Jest to najłatwiejszy i najlepszy sposób na skompilowanie plików TypeScript przy zapisywaniu, do żądanej konfiguracji, tylko TEN plik (zapisany plik). To jest tasks.json i keybindings.json.

Zamiast budować pojedynczy plik i wiązać Ctrl + S, aby wywołać tę kompilację, poleciłbym uruchomić tsc w trybie obserwacyjnym przy użyciu następującego pliku tasks.json:

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

Spowoduje to zbudowanie całego projektu, a następnie odbudowanie zapisanych plików niezależnie od sposobu ich zapisania (Ctrl + S, automatyczne zapisywanie, ...)

Zaktualizowano

W Twoim tsconfig.json

"compileOnSave": true, // change to true

jeśli problem nadal występuje, wykonaj jedną z następujących czynności:

Zrestartuj swój edytor lub zmień dowolną trasę, przywróć ją i zapisz aplikację. Zacznie się kompilować. to znaczy

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

Zaimplementowałem kompilację przy zapisywaniu za pomocą zadania gulp przy użyciu skryptu gulp i kompilacji przyrostowej. Pozwala to na dowolną kontrolę kompilacji. Zwróć uwagę na moją zmienną tsServerProject, w moim prawdziwym projekcie mam również tsClientProject, ponieważ chcę skompilować mój kod klienta bez określonego modułu. Jak wiem, nie da się tego zrobić za pomocą vs code.

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

}

Wybierz Preferencje -> Ustawienia obszaru roboczego i dodaj następujący kod.Jeśli masz włączone ponowne ładowanie na gorąco, zmiany są natychmiast odzwierciedlane w przeglądarce

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

Aktualny stan tego wydania:

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

Mogę powiedzieć, że przy najnowszej wersji TypeScript 1.8.X i 1.0 kodu Visual Studio technika, którą pokazałem, jest przestarzała. Po prostu użyj tsconfig.json na poziomie głównym projektu, a wszystko działa automatycznie do sprawdzania składni. Następnie użyj tsc -w w wierszu poleceń do automatycznego oglądania / ponownej kompilacji. Czyta ten sam plik tsconfig.json dla opcji i konfiguracji kompilacji ts.

// tsconfig.json

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

Niezwykle prostym sposobem automatycznej kompilacji po zapisaniu jest wpisanie w terminalu:

tsc main --watch

gdzie main.tsjest twoja nazwa pliku.

Uwaga, będzie to działać tylko tak długo, jak długo ten terminal będzie otwarty, ale jest to bardzo proste rozwiązanie, które można uruchomić podczas edycji programu.

Musisz zwiększyć limit zegarków, aby naprawić problem rekompilacji podczas zapisywania, otwórz terminal i wprowadź te dwa polecenia:

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

Aby zmiany były trwałe nawet po ponownym uruchomieniu, uruchom również to polecenie:

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

wypróbowałem powyższe metody, ale mój zatrzymał automatyczną kompilację, gdy wydawało się, że tak się stało, ponieważ maksymalna liczba plików do obejrzenia przekroczyła limit.

uruchom cat /proc/sys/fs/inotify/max_user_watchespolecenie.

jeśli pokazuje mniej plików, w tym node_modules, otwórz plik /etc/sysctl.confz uprawnieniami roota i dołącz

fs.inotify.max_user_watches=524288 do pliku i zapisz

uruchom ponownie polecenie cat, aby zobaczyć wynik. To będzie działać! ufnie!

Używam automatycznych zadań uruchamianych na folderze (powinien działać VSCode> = 1.30) w .vscode / tasks.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
        }
    }
 ]
}

Jeśli to nadal nie działa w folderze projektu otwórz, spróbuj Ctrl + shift + P i Zadania: Zarządzaj automatycznymi zadaniami w folderze i wybierz „Zezwalaj na automatyczne zadania w folderze” w głównym folderze projektu lub folderze uruchomionym.