Automatisk kompilere på Gem skrivemaskine i Visual Studio kode

I dette indlæg vil vi løse to problemer: 1) kommando “TSC” genkendes ikke i koden VS integreret terminal, og 2) kompilere virker ikke automatisk når du gemmer filen “.TS” (Type Script).

Introduktion

Apenas para contextualizar, den TypeScript permite escrever código utilizando uma estrutura fortemente tipada e ter este código compilado para JavaScript puro. Já o Visual Studio Code é um editor de código multiplataforma criado pela Microsoft.

// Versões utilizadas neste Post:
- Visual Studio (VS) Code: versão 1.14.1
- Typescript: versão 2.4.1

Essa é uma dica fácil, mas você pode ter problemas se não souber o que está fazendo: meu caso :(D)

Instalação Node.js e TypeScript

Uma das formas de instalar o TypeScript é por meio do gerenciador de pacotes do Node.js (npmNode package manager), mas para usá-lo, você primeiro precisa installere den Node.js.

Após instalar o Node, abra o terminal (kommando) e execute o seguinte comando para instalar o TypeScript:

npm install -g typescript

Ainda pelo terminal do Windows (ou Linux), teste skriften ved at kontrollere den installerede version. Kommandoen “TSC” er et akronym for TypeScript Compiler.

TSC -V

Problem

Problemet er, at kommandoen “TSC” fungerede normalt på Windows-terminalen, men ikke i den integrerede terminal, der kommer inden for Visual Studio Code selv (VS-kode), vise følgende fejl:

'TSC' genkendes ikke den en intern eller ekstern kommando,betjenes program eller batch Fil.

Derudover, Jeg ønskede ikke at køre kommandoen “TSC” for hver gang du vil kompilere en fil “.TS” (udvidelse til TypeScript). Så, som altid gør automatisk kompilering, når du gemmer (CTRL+S)? Det er, hvad vi vil se næste.

Andre fejl

Forsøger at løse disse problemer, Fundet Stillinger siger at bruge compileOnSave, men dette understøttes kun af Visual Studio 2015 med TypeScript >= 1.8.4 og atom-typescript plugin. IE, ingen brug for at bruge compileOnSave I “tsconfig.json” fra Visual Studio Code, nedenstående kode vil ikke fungere:

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

Løsning

TSC i vs kode integreret terminal

Lad os først løse problemet med TSC ikke genkendes i den visuelle studiekode integrerede terminal (VS-kode).

Nogle Indlæg foreslå at placere tsc- eller npm-stien i PATH-miljøvariablen, men en nem måde at løse dette på var ved at gøre installation af “TypeScript til Visual Studio, som er kompatibel for VS Code samt.

Nu ja, efter installation, åbne den integrerede visuelle studiekodeterminal, Skrive:

// Genvejstast til den integrerede terminal til visuel studiekode:
Ctrl+`
// Eller brug menuen til at åbne terminalen i Visual Studio Code:
Se > Integreret terminal

Prøv at kontrollere TypeScript-version direkte ind i den integrerede VS Code-terminal (Ikke i Windows-terminalen), og det vil sandsynligvis være i orden:

TSC -V

Automatisk kompilering, når du gemmer en fil .TS

Vs Code terminal er placeret i din scriptmappe (.TS), for eksempel:

C cd:\wamp64wwwts

Oprette filen tsconfig.json skrive i VS-kodeterminalen:

TSC --init

Bemærk, at en fil “tsconfig.json” vil blive oprettet i “(C):\wamp64wwwts” (aktuel mappe).

Åbn tsconfig.json og aktivere muligheden “sourceMap”: True, og gemme ændringen, at få så:

  "compilerOptions": {
    /* Grundlæggende indstillinger */
    "target": "es5",                          /* Angiv ECMAScript-destinationsversionen: »ES3« (Standard), 'ES5', 'ES2015', 'ES2016', 'ES2017', eller 'ESNEXT'. */
    "module": "commonjs",                     /* Angiv modulkodegenerering: 'commonjs', 'amd', »system«, 'umd', 'ES2015', eller 'ESNext'. */
    // "lib": [],                             /* Angiv biblioteksfiler, der skal medtages i kompileringen:  */
    // "allowJs": True,                       /* Tillad kompilering af javascript-filer. */
    // "checkJs": True,                       /* Rapportere fejl i .js filer. */
    // "jsx": "preserve",                     /* Angiv generering af JSX-kode: »bevare«, 'react-native', eller "reagere". */
    // "declaration": True,                   /* Genererer tilsvarende '.d.ts'-fil. */
    "sourceMap": True,                     /* Genererer tilsvarende '.map'-fil. */
    // "outFile": "./",                       /* Sammenkæde og udsende output til en enkelt fil. */
    // "outDir": "./",                        /* Omdirigere outputstruktur til mappen. */
    // "rootDir": "./",                       /* Angive rodmappen for inputfiler. Bruges til at styre outputmappestrukturen med --outDir. */
    ... Continua ...

Klar, agora é só ir no terminal do VS Code e digitar o comando:

TSC -W

Este comando fica monitorando (ou vendo, por isso “W” de watch) a aplicação e qualquer alteração no arquivos .TS, quando salvo, fará a imediata compilação em .Js.

Det var det!

Samlede hits: 10612

Efterlad et svar

I din e-mail-adresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *