Compilación automática ao gardar TypeScript no Visual Studio Code

Neste post imos resolver dous problemas: 1) mando “TSC” non é recoñecido no terminal integrado do VS code, e 2) compilación non funciona automaticamente ao gardar ficheiro “.ts” (script type).

introdución

Só para contextualizar, o texto datilografada permite escribir código utilizando unha estrutura fortemente tipada e ter este código compilado para JavaScript puro. xa o Visual Código Estudio é un editor de código multiplataforma creado por Microsoft.

// Versións utilizadas neste post:
- visual Studio (VS) código: versión 1.14.1
- texto datilografada: versión 2.4.1

Esta é unha información sinxela, pero pode ter problemas se non sabe o que está facendo: meu caso :D

Instalación Node.js e TypeScript

Unha das formas de instalar TypeScript é a través do xestor de paquetes do Node.js (ASL – Xestor de paquetes no), pero para usalo, primeiro cómpre instalar ou Node.js.

Tras instalar Node, aberto ou terminal (mando) e executa o seguinte comando para instalar ou texto datilografada:

ASL instalar -g transcrito

Aínda polo terminal de Windows (ou Linux), faga unha proba de funcionamento do TypeScript alomenos a versión instalada. A orde “TSC” é unha acrónimo para TypeScript Compiler.

TSC -V

problema

O problema é que a orde “TSC” funcionaba normalmente na terminal de Windows, pero non no terminal integrado que vén dentro do propio Visual Studio Code (código VS), mostrando o seguinte erro:

'TSC' non é recoñecido como unha orde interno ou externo,programa operativo ou lote arquivo.

ademais, eu non quería executar o comando “TSC” para cada vez que quixese compilar un arquivo “.ts” (extensión para TypeScript). entón, como sempre facer a compilación automática ao gardar (CTRL + S)? É o que veremos adiante.

outros erros

Buscando resolver estes problemas, atopei Anotacións dicindo para usar o compileOnSave, pero isto só é soportado polo Visual Studio 2015 con texto datilografada> = 1.8.4 e átomo de transcrito plug-in-. é dicir, non adianta usar compileOnSave non “tsconfig.json” facer Visual Código Estudio, o código de abaixo non funcionará:

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

Resolución

TSC no Terminal integrado do VS Code

Primeiro imos resolver o problema do TSC non ser recoñecido no terminal integrado do Visual Studio Code (código VS).

algúns mensaxes suxiren poñer o camiño do TSC ou npm a variábel de entorno PATH, pero dun xeito doado de solucionar isto foi facendo a instalación do “Typescript para Visual Studio, que é compatible ao VS Code tamén.

agora si, tras instalación, abra Integrado o terminal de facer Visual Código Estudio, tecleando:

// Atallo de teclado para o terminal integrado do Visual Studio Code:
CTRL+`
// uso ou o menú para abrir a terminal Nº Visual Código Estudio:
vista > terminal integrado

Tente comprobar a versión do TypeScript directo na terminal integrado do VS Code (Non no terminal de Windows), e probablemente estará funcionando:

TSC -V

Compilación automática ao gardar un ficheiro .ts

Polo terminal do VS Code se sosteña o directorio do seu guión (.ts), por exemplo:

CD C:\wamp64  www  ts

Crea o ficheiro tsconfig.json escribindo ningún terminal Código VS:

TSC --init

Teña en conta que un arquivo “tsconfig.json” crearase en “C:\wamp64 www ts” (directorio corrente).

abrir ou tsconfig.json e active a opción “Sourcemap”: verdadeiro, e salva a modificación, quedando así:

  "compilerOptions": {
    /* opcións básicas */
    "target": "es5",                          /* Especifique ECMAScript versión de destino: 'ES3' (defecto), 'ES5', 'ES2015', 'ES2016', 'ES2017', ou 'ESNEXT'. */
    "module": "commonjs",                     /* Especificar a xeración de código módulo: 'Commonjs', 'AMD', 'Sistema', 'UMD', 'Es2015', ou 'ESNext'. */
    // "lib": [],                             /* Especifique arquivos de biblioteca para ser incluído na compilación:  */
    // "allowJs": verdadeiro,                       /* Permitir ficheiros JavaScript para ser compilado. */
    // "checkJs": verdadeiro,                       /* Recomendar erros en arquivos .js. */
    // "jsx": "preserve",                     /* Especifique a xeración de código JSX: 'Mantén', 'Contestar nativo', ou 'reaccionar'. */
    // "declaration": verdadeiro,                   /* Xera correspondente ficheiro '.d.ts'. */
    "sourceMap": verdadeiro,                     /* Xera arquivo correspondente '.map'. */
    // "outFile": "./",                       /* Concatenar e emiten saída para un único ficheiro. */
    // "outDir": "./",                        /* Redireccionar estrutura de saída ao directorio. */
    // "rootDir": "./",                       /* Especifique o directorio raíz de ficheiros de entrada. Usar para controlar a estrutura do directorio de saída con --outDir. */
    ... segue ...

pronto, Agora é só ir no terminal do VS Code e escribir o comando:

TSC -w

Este comando está vixían (ou ver, por iso “w” de reloxo) a aplicación e calquera modificación no ficheiros .ts, cando gardar, fará a inmediata compilación en .JS.

É iso aí!

Total de accesos: 1118

Deixe unha resposta

O seu enderezo de correo-e non será publicado. Os campos obrigatorios están marcados con *