Автоматично съставяне на Запиши пишеща машина в Visual Studio код

В тази публикация ние ще реши два проблеми: 1) команда “TSC” не е разпознат в срещу интегрирани терминал код, and 2) съставяне не работи автоматично при записване на файл “.TS” (Тип скрипт).

Въведение

Apenas para contextualizar, The 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 instalar o Node.js.

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

npm install -g typescript

Ainda pelo terminal do Windows (ou Linux), faça um teste de funcionamento do TypeScript verificando a versão instalada. O comandoTSCé uma acrônimo para TypeScript Compiler.

TSC -v

Проблем

O problema é que o comandoTSCfuncionava normalmente no terminal do Windows, mas não no terminal integrado que vem dentro do próprio Visual Studio Code (VS code), exibindo o seguinte erro:

'tsc' is not recognized as an internal or external command,operable program or batch file.

Além disso, eu não queria executar o comandoTSCpara cada vez que quisesse compilar um arquivo.TS” (extensão para TypeScript). Така, como sempre fazer a compilação automática ao salvar (CTRL+S)? É o que veremos adiante.

Outros erros

Procurando resolver esses problemas, encontrei Posts dizendo para usar o compileOnSave, mas isto só é suportado pelo Visual Studio 2015 com TypeScript >= 1.8.4 e atom-typescript plugin. IE, não adianta usar compileOnSave notsconfig.jsondo Visual Studio Code, o código abaixo não irá funcionar:

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

Разтвор

TSC no Terminal integrado do VS Code

Primeiro vamos resolver o problema do TSC não ser reconhecido no terminal integrado do Visual Studio Code (VS code).

Alguns Posts sugerem colocar o caminho do tsc ou npm na variável de ambiente PATH, mas um jeito fácil de solucionar isto foi fazendo a instalação doTypeScript for Visual Studio, que é compatível para o VS Code também.

Сега да, após instalação, abra o terminal integrado do Visual Studio Code, teclando:

// Tecla de atalho para o terminal integrado do Visual Studio Code:
CTRL+`
// Ou use o Menu para abrir o terminal no Visual Studio Code:
View > Integrated Terminal

Tente verificar a versão do TypeScript direto no terminal integrado do VS Code (Não no terminal do Windows), e provavelmente estará funcionando:

TSC -v

Compilação automática ao salvar um arquivo .TS

Pelo terminal do VS Code se posicione no diretório do seu script (.TS), за пример:

CD C:\wamp64\www\ts

Crie o arquivo tsconfig.json digitando no terminal VS Code:

TSC --init

Note que um arquivotsconfig.jsonserá criado em(C):\wamp64\www\ts” (diretório corrente).

Abra o tsconfig.json e habilite a opção sourceMap”: true, e salve a modificação, ficando assim:

  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation:  */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ... продължава ...

Готов, agora é só ir no terminal do VS Code e digitar o comando:

TSC -w

Este comando fica monitorando (ou vendo, por issowde watch) a aplicação e qualquer alteração no arquivos .TS, quando salvo, fará a imediata compilação em .js.

That’s it!

Общо посещения: 1118

Оставете отговор

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *