看我大 Visual Studio Code相比于 Sublime,Visual Studio Code 是完全免費(fèi)和開(kāi)源的編輯器。當(dāng)然,當(dāng)初試用 VSCode 還是沖著 Erich Gamma 的名頭來(lái)的,用過(guò)之后根本停不下來(lái)呀:) 大愛(ài) TypeScript
VSCode 本身也是用 TypeScript 寫(xiě)成的。TypeScript 最大的成就就是為 Javascript 添加了類(lèi)型系統(tǒng)。讓 Javascript 開(kāi)發(fā)大型工程的能力有了顯著提高。
使用 Visual Studio Code 開(kāi)發(fā)微信小程序安裝應(yīng)用安裝應(yīng)用就不說(shuō)了,windows 直接雙擊安裝包、iOS 直接拖到 Application 文件夾就好了。 安裝 typescript
安裝 typescript 之前,需要先安裝 Node.js 以便使用它的 npm 進(jìn)行代碼包的管理。VSCode 重度使用 npm,以后還會(huì)多次看到它的身影。 npm install -g typescript npm install -g typescript@next//安裝不穩(wěn)定的測(cè)試版本
安裝好之后打開(kāi)終端,輸入 tsc 看到如下界面就安裝好了 ![]()
DingTalk20170925203440-2017925
typescript 在終端的命令,是 tsc,下一步將 ts 文件編譯為 js 文件的時(shí)候,也需要這個(gè)命令才可以的。 配置 typings 提供代碼提示typings 的前世今生
MS 剛剛推出 typescript 的時(shí)候,開(kāi)發(fā)了一個(gè)叫做 tsd 的東東提供代碼提示的能力。但是,似乎 tsd 做的太爛了,又出了一個(gè)叫做 typings 的東東來(lái)替代它,這兩個(gè)東東的功能是完全相同的。 目前,大部分介紹 typings 的文章都是 typing 和 typescript 分離的時(shí)候,也就是 TypeScript 1.x 版本的時(shí)候?qū)懙模?dāng)然,這些文章還是可以參考的,因?yàn)?typings 的使用方式還是向前兼容的,同時(shí),在大部分情況下還是需要這種方式。 介紹 tsd 的文章就可以徹底廢棄了。 官方推薦的安裝字典文件的方式
typings 需要讀取 d.ts 作為提示信息的來(lái)源。d.ts 文件不僅可以為 typescript 提供提示信息,也可以為 Javascript 編寫(xiě)的方法提供提示信息。 /** * 驗(yàn)證 cookie 有效性 * @param {string} domain domain * @param {string} path path * @param {cookieEntity} item 需要驗(yàn)證的 cookie * @returns {boolean} true cookie 適用于 domain+path * @memberof GZCookieStorage */ protected validCookie(domain:string,path:string,item:cookieEntity):boolean{ let result:boolean = false; if(item.domain.indexOf(domain)) return false; } ![]()
看,代碼提示出來(lái)了!
當(dāng)然啦,絕大部分框架都是使用 d.ts 的方式提供代碼提示的。下面就介紹幾種常用的 d.ts 文件安裝方式。
npm install angular 啥,這不是在安裝 angular 嗎?對(duì)的,對(duì)于這種框架,Visual Studio Code 會(huì)自動(dòng)下載相應(yīng)的 d.ts 文件并提供非常棒的代碼提示。
npm install typed-we-app --save-dev
這樣可以單獨(dú)下載框架的 d.ts 文件,并交給 npm 管理。--save-dev 的意思是,將這個(gè)文件添加到開(kāi)發(fā)依賴(lài)中。npm install 命令還有許多其他選項(xiàng),在這里就不贅述了。
typings install github:Emeryao/typed-we-app -SG
這種方式就不是通過(guò) npm 進(jìn)行管理了,而是直接通過(guò) typings 自帶的命令進(jìn)行管理。運(yùn)行這個(gè)命令之后,會(huì)出現(xiàn)以下幾個(gè)文件。 typings install
就可以把所需要的文件安裝好。
///
只要 path 引用對(duì)了,就能得到代碼提示。當(dāng)然,這個(gè)提示是當(dāng)前文件有效的。 以上就是我用過(guò)的安裝 d.ts 文件的方式,當(dāng)然了,typings 還有好多種方式提供代碼提示,本人沒(méi)有嘗試過(guò),也就不亂寫(xiě)了。需要的同學(xué)可以去 github 主頁(yè)看看。 可以在微信小程序里面使用 TypeScript 嗎這個(gè)問(wèn)題,當(dāng)然是可以嘍。下面我們就一步一步的,配置 Visual Studio Code ,用它開(kāi)發(fā)微信小程序。 用微信開(kāi)發(fā)者工具新建一個(gè)小程序項(xiàng)目。這個(gè)步驟就省略了吧,官網(wǎng)上有文檔的。 在 VSCode 中打開(kāi)項(xiàng)目我這里已經(jīng)有一個(gè)項(xiàng)目了 ![]()
DingTalk20171007102401-2017107
gfwapdf,下面就一直操作這個(gè)項(xiàng)目嘍。 配置 typings 提供代碼提示
0.打開(kāi)終端,進(jìn)入項(xiàng)目根目錄。 ![]()
DingTalk20171007103159-2017107
找不到VSCode 終端窗口的,可以選菜單-查看-集成終端。 tsc --init
![]()
DingTalk20171007103919-2017107
這個(gè)時(shí)候,已經(jīng)可以新建 ts 文件開(kāi)始編碼了。 編寫(xiě)幾行代碼,終端輸入 tsc,就會(huì)編譯 typescript 文件并生成 js 文件。 打開(kāi) tsconfig.json,添加 “watch”:true,然后再執(zhí)行 tsc 命令,就可以 watch ts 文件,只要保存一下,就會(huì)自動(dòng)編譯并生成 js 文件。 ![]()
DingTalk20171007104313-2017107
注意:這里 watch 功能,需要 tsc 進(jìn)程一直在終端運(yùn)行。可以把它放到后臺(tái)運(yùn)行,也可以開(kāi)啟一個(gè)新的終端。這里,我選擇點(diǎn) VSCode 終端窗口右上角的+號(hào)再開(kāi)啟一個(gè)終端進(jìn)行下面的操作。 木有代碼提示是不行滴,我們需要配置一下讓 VSCode 提供代碼提示。 2.安裝 d.ts 文件 這里采用上一節(jié)"3"的方式安裝。 終端里輸入 typings install github:Emeryao/typed-we-app -SG 等待一會(huì),看到這個(gè)畫(huà)面就成功了。 ![]()
DingTalk20171007104822-2017107
可以看到,生成了 typings.json 和 typings 文件夾。 ![]()
DingTalk20171007105357-2017107
ts 文件的提示已經(jīng)搞定了。 3.解決 wxss 的提示 wxss 就是 css 的子集,只要在 VSCode 中把 wxss 的語(yǔ)言模式選成 css 就可以了。 ![]()
DingTalk20171007105623-2017107
點(diǎn)這里!
4.解決 wxml 的提示
推薦安裝 Visual Studio Code 插件: vscode wxml 注意,安裝這個(gè)插件后,千萬(wàn)不能為 wxml 選擇語(yǔ)言模式!
5.解決自動(dòng)編譯
上面已經(jīng)解決了 ts 文件自動(dòng)編譯成 js 文件。但是,每次開(kāi)啟 vscode 之后,需要在終端里面手動(dòng)輸入 tsc 命令,也是很煩的。推薦安裝這個(gè)插件 Blade Runner-Run Task When Open 安裝好這個(gè)插件之后,在 VScode 里面選擇菜單-任務(wù)-配置默認(rèn)生成任務(wù)- tsc 構(gòu)建
生成一個(gè) .vscode 文件夾,里面有一個(gè)tasks.json 上面插件會(huì)在 VSCode 每次啟動(dòng)的時(shí)候,自動(dòng)根據(jù) task.json 運(yùn)行一些命令(當(dāng)然是運(yùn)行 tsc 命令嘍),這樣,編譯 ts 的工作就變成完全自動(dòng)的了。 |