自動編譯保存稿在 visual studio 代碼中

在這篇文章中, 我們將解決兩個問題: 1) 命令 “tsc” 在 vs 集成的終端代碼中不被識別, 和 2) 保存文件時編譯唔自動工作 “.ts” (類型腳本).

介紹

只係為咗處境, 的 文稿 允許您使用強類型結構編寫代碼, 並將此編譯後的代碼寫入純 javascript. 已經係 visual studio 代碼 係由 microsoft 創建嘅多平台編輯器.

// 此帖子中使用的版本:
- Visualstudio () 代碼: 版本 1.14.1
- 文稿: 版本 2.4.1

是一個簡單的提示, 但如果你唔知自己做緊乜, 你可能會有問題。: 我既情況 :D

節點. js 同文稿安裝

安裝文稿的方法之一是通過節點的包管理器. js (Npm – 節點包管理器), 但要使用它, 首先需要 安裝該 節點. js.

安裝節點之後, 打開終端 (命令) 並運行以下命令以 安裝文稿:

npm 安裝 -g 文稿

個 windows 終端 (或 Linux), 通過檢查已安裝嘅版本嚟執行文稿的測試運行. 該命令 “tsc” 係文稿編譯器嘅縮寫.

tsc -V

個問題

問題是命令 “tsc” 在 windows 終端正常運作, 但唔係喺集成的終端中, 進入視覺縯播室代碼 (vs 代碼), 顯示以下錯誤:

tsc' 唔被識別  內部或外部命令,可操作的程序或批處理文件 文件.

另外, 我唔想運行命令 “tsc” 每次我想編譯一個文件時 “.ts” (擴展到文稿). 所以, 點樣自動生成以保存 (ctrl+ S)? 係, 我哋就見到進一步.

outros 錯誤

尋求解決呢啲問題, 我發現帖子話要使用 compileOnSave, 但只係由視覺縯播室支持 2015 與文稿 > = 1.8.4 同原子文稿插件. IE, 無謂使用 compileOnSave 在 “tsconfig. json” visual studio 代碼, 下面嘅代碼將不起作用:

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

解決方案

與集成終端代碼中 tsc

首先, 我們解決了 tsc 在 visual studio 集成終端代碼中無法識別 (vs 代碼).

一啲 職位 建議在 path 環境變量中放置 tsc 或 npm 嘅路徑, 但一個簡單嘅方法嚟解決係做嘅 安裝的 “文稿視覺工作室, 佢同 vs 代碼兼容.

而家係, 安裝之後, 打開 visual studio 集成的終端代碼, 打字:

// 可視縯播室集成終端代碼的快速鍵:
Ctrl+`
// 或者使用菜單在 visual studio 代碼中打開終端:
视图 > 集成終端

嘗試檢查 文稿版本 集成終端直接 vs 代碼 (不在 windows 終端上), 可能會工作:

tsc -V

保存文件時自動編譯 .ts

終端代碼企喺腳本目錄中 (.ts), 舉個例子:

CD C:\wamp64wwwts

創建文件 tsconfig. json 通過在終端與代碼中鍵入:

tsc --Init

請注意, 文件 “tsconfig. json” 將創建在 “(C):\wamp64wwwts” (當前目錄).

打開 " tsconfig. json 並啟用該選項 “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": 真正嘅,                   /* 生成相應的 ". ts" 文件. */
    "sourceMap": 真正嘅,                     /* 生成相應的 ". map" 文件. */
    // "outFile": "./",                       /* 將輸出連接並發出到單個文件. */
    // "outDir": "./",                        /* 將輸出結構重定向到目錄. */
    // "rootDir": "./",                       /* 指定輸入文件的根目錄. 用於控制輸出目錄結構嘅 outdir. */
    ... 繼續 ...

準備好晒, só做 ir 冇終端 vs 代碼 e digitar o comando:

tsc -w

埃斯特 comando fica monitorando (ou vendo, isso “w” 德表) aplicação e qualquer alteração 冇 arquivos .ts, quando, fará imediata compilação em .Js.

就係噉啦!

總點擊數: 9306

留言

您的電子郵件地址就不會發佈. 與標記必填的字段 *