Automatisk kompilering på lagre TypeScript i Visual Studio-kode

I dette innlegget vil vi løse to problemer: 1) kommandoen “TSC” gjenkjennes ikke i VS integrert terminal koden, og 2) kompilering fungerer ikke automatisk når du lagrer filen “.TS” (Type skript).

Introduksjon

Bare å kontekstualisere, den Typescript lar deg skrive kode med en sterkt skrevet struktur og har kompilerte koden til ren JavaScript. Allerede den Visual Studio-kode en multiplattform editor er laget av Microsoft.

// Versjoner som brukes i dette innlegget:
- Visual Studio (VS) Kode: versjon 1.14.1
- Typescript: versjon 2.4.1

Dette er en enkel tips, men du kan ha problemer hvis du ikke vet hva du gjør: mitt tilfelle :(D)

Node.js og TypeScript installasjon

En av måtene å installere loggfila er gjennom pakkebehandler for Node.js (NPM – Noden pakken manager), men å bruke den, må du først installere den Node.js.

Etter installere noden, Åpne terminal (kommandoen) og Kjør følgende kommando for å installere loggfila:

NPM installere -g typescript

Windows terminal (eller Linux), gjøre en testkjøring av loggfila ved å sjekke den installerte versjonen. Kommandoen “TSC” er et akronym for TypeScript kompilator.

TSC -v

Problem

Problemet er at kommandoen “TSC” fungerte normalt i Windows terminal, men ikke i integrert terminalen som kommer i Visual Studio koden (VS kode), vise følgende feil:

'tsc' gjenkjennes ikke den en intern eller ekstern kommando,kjørbart program eller bakst arkiv filen.

i tillegg, Jeg ønsket å kjøre kommandoen “TSC” hver gang jeg ønsket å lage en fil “.TS” (utvidelse TypeScript). Så, Hvordan den automatiske byggingen lagre (CTRL + S)? Er at vi vil se videre.

Andre feil

Søker å løse disse problemene, Jeg fant innlegg om å bruke den compileOnSave, men dette støttes bare av Visual Studio 2015 med TypeScript > = 1.8.4 og atom-typescript plugin. IE, Det er ingen vits i å bruke compileOnSave i “json tsconfig.” Visual Studio koden, koden nedenfor fungerer ikke:

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

Løsning

TSC i VS integrert Terminal kode

Først må løse vi problemet med TSC ikke gjenkjennes i Visual Studio integrerte terminal koden (VS kode).

Noen Innlegg foreslå sette banen tsc eller npm i miljøvariabelen PATH, men en enkel måte å løse dette gjorde det installasjon av den “Typescript Visual Studio, Den er kompatibel til VS koden.

Nå Ja, Etter installasjon, Åpne Visual Studio integrerte terminal kode, skrive:

// Hurtigtasten for Visual Studio integrerte terminal kode:
CTRL+`
// Eller Bruk menyen for å åpne terminal i Visual Studio-kode:
Vis > Integrert Terminal

Prøv å sjekke det TypeScript versjon integrert terminal direkte vs kode (Ikke på Windows terminal), og vil trolig arbeide:

TSC -v

Automatisk samling når du lagrer en fil .TS

Terminal koden stå VS i skript katalogen (.TS), for eksempel:

CD C:\wamp64wwwts

Opprette filen json tsconfig. digitando ingen terminal VS kode:

TSC --init

Merk que um arkiv “json tsconfig.” será criado em “(C):\wamp64wwwts” (diretório corrente).

ABRA o json tsconfig. e habilite en opção “sourceMap”: sann, e salve en modificação, ficando assim:

  "compilerOptions": {
    /* Grunnleggende alternativer */
    "target": "es5",                          /* Angi ECMAScript mål-versjon: 'ES3' (standard), 'ES5', 'ES2015', 'ES2016', 'ES2017', eller 'ESNEXT'. */
    "module": "commonjs",                     /* Angi modul kodegenerering: 'commonjs', 'amd', 'system', 'umd', 'es2015', eller 'ESNext'. */
    // "lib": [],                             /* Angi bibliotekfiler i samlingen:  */
    // "allowJs": sann,                       /* Tillat javascript-filer skal kompileres. */
    // "checkJs": sann,                       /* Rapportfeil i JS-filer. */
    // "jsx": "preserve",                     /* Angi JSX kodegenerering: 'preserve', 'reagerer-innfødt', eller "reagerer". */
    // "declaration": sann,                   /* Genererer tilsvarende ". d.ts' fil. */
    "sourceMap": sann,                     /* Genererer tilsvarende '.map'-fil. */
    // "outFile": "./",                       /* Sette sammen og avgir til én fil. */
    // "outDir": "./",                        /* Omdirigere utdata-strukturen til katalogen. */
    // "rootDir": "./",                       /* Angi rotkatalogen på inndatafiler. Bruk til å kontrollere utdata mappe struktur med-outDir. */
    ... fortsetter ...

Klar, nå det er bare gå i Grand VS koden og skriv inn kommandoen:

TSC -w

Denne kommandoen er overvåking (eller se, så “w” se) programmet og endringer i filene .TS, Når lagret, vil umiddelbar kompileringen på .JS.

Det er det!

Totalt antall treff: 1127

legg igjen et svar

Den e-postadressen din vil ikke bli publisert. Obligatoriske felt er merket med *