Automatycznego kompilacji na Zapisz TypeScript w Visual Studio Code

W tym poście będziemy rozwiązywać dwa problemy: 1) polecenia “TSC” nie jest rozpoznawany w VS zintegrowany terminal kod, i 2) kompie działa automatycznie przy zapisywaniu pliku “.TS” (Typ skryptu).

Wprowadzenie

Tylko do contextualize, o Język TypeScript pozwala na pisanie kodu za pomocą struktury jednoznacznie i mieć ten kod skompilowany do pure JavaScript. Już Kod programu Visual Studio jest to wieloplatformowy Edytor stworzony przez firmę Microsoft.

// Wersje używane w tym poście:
- Programu Visual Studio (VS) Kod: Wersja 1.14.1
- Język TypeScript: Wersja 2.4.1

Jest to łatwe Wskazówka, ale może mieć problemy, jeśli nie wiesz, co robisz: moim przypadku :(D)

Node.js i pismem maszynowym instalacji

Jednym ze sposobów, aby zainstalować zapis jest za pośrednictwem Menedżera pakietów Node.js (NPM – Węzeł Menedżer pakietów), ale na to, najpierw trzeba zainstalować Node.js.

Po zainstalowaniu węzła, Otwórz terminal (polecenia) i uruchom następujące polecenie, aby Instalowanie języka TypeScript:

NPM instalacji -g typescript

Windows terminal (lub Linux), Przeprowadź próbę generalną maszynopisu przez Sprawdzanie zainstalowanej wersji. Polecenie “TSC” jest skrótem dla kompilatora języka TypeScript.

TSC -v

Problem

Problem jest to, że polecenie “TSC” normalnie funkcjonował w Windows terminal, ale nie w zintegrowany terminal, który przychodzi wewnątrz programu Visual Studio Code (Kod VS), wyświetla następujący komunikat o błędzie:

'tsc' nie jest rozpoznawane The wewnętrzny albo zewnętrzny rozkazywać,operable program albo plik wsadowy plik.

W dodatku, Nie chcę uruchomić polecenie “TSC” za każdym razem chciałem skompilować plik “.TS” (rozszerzenie języka TypeScript). Tak, Jak zrobić automatyczne kompilacji, aby zapisać (CTRL + S)? To, że zobaczymy dalej.

Outros erros

Stara się rozwiązać te problemy, Znalazłem posty do wykorzystania compileOnSave, ale to jest obsługiwane tylko przez program Visual Studio 2015 z pismem maszynowym > = 1.8.4 i plugin atom maszynie. IE, Nie ma sensu przy użyciu compileOnSave w “json tsconfig.” Kod programu Visual Studio, Poniższy kod nie będzie działać.:

{
   "compileOnSave": prawda,
   "compilerOptions": {
       "noImplicitAny" : prawda
   }
}

Rozwiązanie

TSC w VS zintegrowany Terminal Code

Po pierwsze możemy rozwiązać problem TSC nie być rozpoznawane w terminalu kod Visual Studio zintegrowane (Kod VS).

Niektóre Postów zaproponować umieścić ścieżkę tsc lub npm w zmiennej środowiskowej PATH, ale robi łatwy sposób na rozwiązanie tego problemu Instalacja “Język TypeScript dla programu Visual Studio, Jest zgodny z wobec VS Code.

Teraz tak, Po instalacji, Otwórz Visual Studio zintegrowane terminali kod, pisząc na maszynie:

// Klawisz skrótu do programu Visual Studio zintegrowane terminali kod:
CTRL+`
// Lub użyj Menu, aby otworzyć terminal w Visual Studio Code:
Widok > Zintegrowany Terminal

Spróbuj sprawdzić Wersja języka typeScript zintegrowany terminal bezpośredniego VS. kod (Nie na Windows terminal), i będzie prawdopodobnie działa:

TSC -v

Automatycznego kompilacji podczas zapisywania pliku .TS

Terminali kod stoją VS w katalogu skryptów (.TS), na przykład:

C PŁYTY CD:\wamp64wwwts

Tworzenie pliku json tsconfig. wpisując w terminalu VS. kod:

TSC --init

Należy zauważyć, że plik “json tsconfig.” zostanie utworzony w “(C):\wamp64wwwts” (bieżący katalog).

Otwarte json tsconfig. i Włącz opcję “mapy źródłowej”: prawda, i Zapisz zmiany, W ten sposób:

  "compilerOptions": {
    /* Podstawowe opcje */
    "target": "es5",                          /* Określ ECMAScript w wersji docelowej: 'Buffalo' (domyślne), 'ES5', 'ES2015', 'ES2016', 'ES2017', lub 'ESNEXT'. */
    "module": "commonjs",                     /* Określ moduł generowania kodu: 'commonjs', 'amd', 'system', 'umd', 'es2015', lub 'ESNext'. */
    // "lib": [],                             /* Określ pliki biblioteki mają zostać uwzględnione w kompilacji:  */
    // "allowJs": prawda,                       /* Zezwalaj na pliki javascript do skompilowania. */
    // "checkJs": prawda,                       /* Raportowanie błędów w plików .js. */
    // "jsx": "preserve",                     /* Określić generowanie kodu JSX: 'preserve', 'reagują native', lub 'reakcji'. */
    // "declaration": prawda,                   /* Generuje odpowiadającego '. d.ts plik. */
    "sourceMap": prawda,                     /* Generuje odpowiedni plik '.map'. */
    // "outFile": "./",                       /* Złączyć i wysyłać dane wyjściowe do pojedynczego pliku. */
    // "outDir": "./",                        /* Przekierowanie wyjścia Struktura katalogu. */
    // "rootDir": "./",                       /* Określ katalog główny plików wejściowych. Użyj, aby kontrolować struktury katalogu wyjściowego z--outDir. */
    ... w dalszym ciągu ...

Gotowe, Agora é só ir nie terminalu zrobić VS Code e digitar o comando:

TSC -w

Este comando fica monitorando (OU vendo, por isso “w” de zegarek) na alteração qualquer e aplicação nie arquivos .TS, Quando salvo, fará imediata compilação em .JS.

To jest to!

Całkowitej trafienia: 1118

Odpowiedz

Twój adres e-mail nie zostaną opublikowane. Wymagane pola są oznaczone *