在保存列印稿在 Visual Studio 代碼的自動編譯

在這篇文章我們將解決兩個問題: 1) 命令 “TSC” 不承認 VS 集成的終端代碼, 和 2) 編譯時不工作自動儲存檔 “.TS” (類型腳本).

介紹

只是如何讓, o 打字稿 允許您使用強型別的結構編寫代碼和純 JavaScript 對此已編譯代碼. 已經 Visual Studio 代碼 是一個多平臺的編輯器創建由微軟嗎.

// 在這篇文章中使用的版本:
- 視覺工作室 (VS) 代碼: 版本 1.14.1
- 打字稿: 版本 2.4.1

這是一個簡單的提示, 但你可能有問題,如果你不知道你在做什麼: 我的情況 :(D)

Node.js 和打字稿安裝

安裝列印稿的途徑之一是通過套裝軟體管理器的 Node.js (新公共管理 – 節點套裝軟體管理器), 但使用它, 你首先需要 安裝 Node.js.

後安裝節點, 打開終端 (命令) 然後運行以下命令 安裝列印稿:

新公共管理安裝 -g 打字稿

Windows 終端 (或 Linux), 通過檢查已安裝的版本做打字稿測試回合. 該命令 “TSC” 打字稿編譯器是首字母縮略詞.

TSC -v

問題

問題是,該命令 “TSC” 在 Windows 終端正常運作, 但不是在集成終端,那是在 Visual Studio 代碼內 (VS 代碼), 顯示以下錯誤:

' tsc ' 無法識別  內部或外部命令,可操作的程式或批次檔 .

另外, 我不想要運行的命令 “TSC” 每次我想要編譯的檔 “.TS” (打字稿的擴展). 所以, 如何自動生成保存 (CTRL + S)? 是,我們將看到進一步.

其他錯誤

為尋求解決這些問題, 發現了博文,說使用 compileOnSave, 但這只支援 Visual Studio 2015 與打字稿 > = 1.8.4 和原子打字稿外掛程式. IE, 不是在使用 compileOnSave 在 “json tsconfig。” Visual Studio 代碼, 下面的代碼將不工作:

{
   "compileOnSave": 真正的,
   "compilerOptions": {
       "noImplicitAny" : 真正的
   }
}

解決方案

TSC 在 VS 集成終端代碼

首先,我們要解決的問題 TSC 在 Visual Studio 集成終端代碼無法識別 (VS 代碼).

一些 職位 建議把 tsc 或新公共管理的路徑放在 PATH 環境變數, 但在做簡單的方法來解決這個問題 安裝 “Visual studio 的打字稿, 它是相容 VS 代碼.

現在是, 安裝後, 打開 Visual Studio 集成終端代碼, 打字:

// 快速鍵為 Visual Studio 集成終端代碼:
CTRL 鍵+`
// 或使用功能表來打開終端在 Visual Studio 代碼:
視圖 > 綜合的終端

請嘗試檢查 打字稿版本 綜合的終端直接與代碼 (不在 Windows 終端), 和可能會工作:

TSC -v

保存檔時自動編譯 .TS

終端的代碼在您的腳本目錄站 VS (.TS), 舉個例子:

CD C:\wamp64wwwts

創建檔 json tsconfig。 通過在終端與代碼中鍵入:

TSC --初始化

請注意,檔 “json tsconfig。” 將在中創建 “(C):\wamp64wwwts” (目前的目錄).

開放 json tsconfig。 並啟用選項 “sourceMap”: 真正的, 並保存修改, 因此:

  "compilerOptions": {
    /* 基本選項 */
    "target": "es5",                          /* 指定 ECMAScript 目標版本: 水牛 (預設), ' ES5 ', ' ES2015 ', ' ES2016 ', ' ES2017 ', 或者 'ESNEXT'. */
    "module": "commonjs",                     /* 指定模組代碼生成: ' commonjs ', amd ', ' 系統 ', ' umd ', ' es2015 ', 或者 'ESNext'. */
    // "lib": [],                             /* 指定要包含在編譯的庫檔:  */
    // "allowJs": 真正的,                       /* 允許 javascript 檔進行編譯. */
    // "checkJs": 真正的,                       /* 在.js 檔中報告錯誤. */
    // "jsx": "preserve",                     /* 指定 JSX 代碼生成: ' 保護 ', ' 反應-當地人 ', 或者 '反應'. */
    // "declaration": 真正的,                   /* 生成對應 '。 d.ts 的檔. */
    "sourceMap": 真正的,                     /* 生成相應的 '.map' 檔. */
    // "outFile": "./",                       /* 連接併發出輸出到一個檔. */
    // "outDir": "./",                        /* 重定向輸出結構的目錄. */
    // "rootDir": "./",                       /* 指定輸入檔的根目錄. 用來控制輸出目錄結構與 — — outDir. */
    ... 繼續 ...

準備好了, agora é só 紅外沒有終端做 VS 代碼 e digitar o 統帥部:

TSC -w

埃斯特角城統帥部 fica monitorando (ou 文多, por 太 “w” 德手錶) aplicação e qualquer alteração 無 arquivos .TS, 屍橫齊射, 上將立即編譯 .JS.

就是這樣!

總點擊數: 1127

留言

您的電子郵件地址將不會發佈. 與標記必填的欄位 *