TypeScript 作為 JavaScript 的超集,在前端開發(fā)領(lǐng)域的重要性不言而喻。
掌握 TypeScript 不僅能提升代碼質(zhì)量和可維護(hù)性,還能讓你在項(xiàng)目開發(fā)中更加得心應(yīng)手。
而通義靈碼作為一款強(qiáng)大的 AI 編程助手,能夠?yàn)槟愕?nbsp;TypeScript 學(xué)習(xí)和開發(fā)之旅提供全方位的支持。
通義靈碼是由阿里云技術(shù)團(tuán)隊(duì)精心打造的智能編碼助手。
它基于通義大模型,集成了多項(xiàng)實(shí)用功能,旨在為開發(fā)者提供高效、便捷的編程體驗(yàn)。
其主要功能包括:
代碼續(xù)寫和優(yōu)化:根據(jù)上下文自動(dòng)生成高質(zhì)量的代碼建議,幫助你快速完成代碼編寫,并提供優(yōu)化方案提升代碼性能。
通義靈碼官網(wǎng):https://tongyi.aliyun.com/lingma/
通義靈碼支持:JetBrains IDEs、Visual Studio Code、Visual Studio,及遠(yuǎn)程開發(fā)場(chǎng)景(Remote SSH、Docker、WSL、Web IDE),安裝后登錄賬號(hào)即可開始使用。
Typescript開發(fā)通常采用VSCode進(jìn)行,它也是前端開發(fā)中最常使用的代碼編輯器。
通義靈碼提供了VSCode的插件,我們可以直接在插件市場(chǎng)下載安裝!
環(huán)境準(zhǔn)備
請(qǐng)確保你已經(jīng)安裝了 Visual Studio Code(簡(jiǎn)稱 VSCode),它是前端開發(fā)中最常用的代碼編輯器之一。
如果尚未安裝,可以前往 VSCode 官方網(wǎng)站下載安裝,安裝過(guò)程詳見:Visual?Studio?Code 入門。
VSCode 三端的插件安裝方式基本一致,本文以 Windows 為例。
在 VSCode 中打開插件市場(chǎng),搜索“TONGYI Lingma”即可找到通義靈碼插件,點(diǎn)擊安裝即可。
安裝完成后,VSCode 的左側(cè)會(huì)多出一個(gè)通義靈碼的圖標(biāo),點(diǎn)擊即可進(jìn)入插件界面。
點(diǎn)擊立即登錄,同意用戶協(xié)議,會(huì)跳轉(zhuǎn)到登錄頁(yè)面。
通義靈碼支持多種登錄方式,包括賬號(hào)密碼登錄、手機(jī)號(hào)登錄、支付寶、阿里云、淘寶、釘釘?shù)卿洝?/p>
登錄后即可使用通義靈碼的各項(xiàng)功能。
通義靈碼提供了行級(jí)和函數(shù)級(jí)的代碼補(bǔ)全功能。當(dāng)你在 IDE 編輯器區(qū)進(jìn)行代碼編寫時(shí),在開啟自動(dòng)云端生成的模式下,通義靈碼會(huì)根據(jù)當(dāng)前代碼文件及相關(guān)代碼文件的上下文,自動(dòng)為你生成行級(jí)/函數(shù)級(jí)的代碼建議。
你可以使用快捷鍵采納、廢棄,或查看不同的代碼建議。
同時(shí),當(dāng)你在編碼的過(guò)程中,也可以通過(guò)快捷鍵 alt+P
手動(dòng)觸發(fā)生成代碼建議。
開發(fā)小提示:為了提高代碼補(bǔ)全的準(zhǔn)確性,建議在編寫代碼前先寫代碼注釋描述其功能。例如上圖所示
通義靈碼還提供了一組快捷鍵,方便你更好地控制代碼續(xù)寫過(guò)程:
操作 | macOS | Windows |
---|---|---|
接受行間代碼建議 | Tab | Tab |
廢棄行間代碼建議 | esc | esc |
查看上一個(gè)行間推薦結(jié)果 | ?(option) + [ | Alt+[ |
查看下一個(gè)行間推薦結(jié)果 | ?(option)+] | Alt+] |
手動(dòng)觸發(fā)行間代碼建議 | ?(option)+P | Alt+P |
在一些文件中可能不需要代碼續(xù)寫功能,你可以參考禁用行間生成,關(guān)閉對(duì)某類文件的代碼續(xù)寫功能。
通義靈碼的智能問(wèn)答功能強(qiáng)大,不僅可以回答你的技術(shù)問(wèn)題,還能進(jìn)行代碼創(chuàng)作。
例如,你可以向它咨詢 TypeScript 中某個(gè)語(yǔ)法的用法,或者請(qǐng)求它生成一個(gè)特定功能的代碼片段。
基于智能問(wèn)答,還能實(shí)現(xiàn)很多有用的功能,比如后續(xù)的代碼注釋、代碼解釋、單元測(cè)試生成和代碼優(yōu)化,都是基于智能問(wèn)答實(shí)現(xiàn)的。
智能問(wèn)答是一個(gè)持續(xù)對(duì)話的過(guò)程,為了提高 AI 生成答案的質(zhì)量,應(yīng)該適時(shí)清理會(huì)話。
你可以通過(guò)以下兩種方式清理會(huì)話:
/clearContext
?,然后點(diǎn)擊確定即可。 +
? 號(hào)按鈕,點(diǎn)擊即可創(chuàng)建新對(duì)話。
通義靈碼生成的代碼一般都會(huì)在右上角有這四個(gè)小按鈕,分別對(duì)應(yīng)著插入、復(fù)制、新建和合并的功能,后續(xù)的功能會(huì)用到這些小技巧。
插入 :會(huì)把 AI 生成的代碼替換到我們選中的代碼位置,一般在代碼注釋和代碼優(yōu)化中應(yīng)用。
復(fù)制 :則是復(fù)制 AI 生成的代碼,我們可以自己選擇插入的位置。
新建 :則是新建一個(gè)文件,把 AI 生成的代碼放進(jìn)去,一般而言生成測(cè)試代碼會(huì)選擇新建一個(gè)文件夾存放。
合并 :則是把代碼黏貼到文件中,比如黏貼到選中的代碼后,一般我們?cè)谥悄軉?wèn)答中得到我們需要的代碼可以用合并。
通義靈碼的代碼注釋功能可以幫助你快速為代碼添加注釋,提高代碼的可讀性和可維護(hù)性。
使用代碼注釋需要先選中需要注釋的代碼,代碼左上角會(huì)出現(xiàn)一個(gè)按鈕,點(diǎn)擊即可選擇代碼注釋功能。
也可以用快捷鍵 shift+alt+V
,或者右鍵菜單中也有代碼注釋功能。
注釋結(jié)果會(huì)在左側(cè)顯示,你可以根據(jù)需要進(jìn)行修改和完善。
與代碼注釋不同,代碼解釋是告訴你代碼為什么這么寫。
選中代碼后,點(diǎn)擊通義靈碼的代碼解釋按鈕,通義靈碼會(huì)根據(jù)你的代碼生成對(duì)應(yīng)的解釋。
這對(duì)于理解復(fù)雜代碼邏輯、學(xué)習(xí)優(yōu)秀代碼示例非常有幫助。
通義靈碼可以根據(jù)你的代碼設(shè)計(jì)對(duì)應(yīng)的測(cè)試用例。
通義靈碼甚至還能貼心地生成對(duì)應(yīng)的測(cè)試代碼:
測(cè)試用例代碼一般是復(fù)制后到一個(gè)專門的測(cè)試用例文件中,方便后續(xù)測(cè)試。
也可以用新建文件,通義靈碼會(huì)再幫你創(chuàng)建一個(gè)測(cè)試用例文件。
代碼開發(fā)很難做到面面俱到,單人開發(fā)往往容易疏漏。
通義靈碼提供了一種新的方向:使用 AI 進(jìn)行代碼審查和優(yōu)化。
它不僅給出審查結(jié)果,提供優(yōu)化思路,甚至還能給出優(yōu)化后的代碼。
代碼優(yōu)化一般使用合并(diff)操作來(lái)把原代碼替換成優(yōu)化后的代碼。
智能問(wèn)答往往基于單個(gè)文件或者部分代碼片段,而通義靈碼提供了 AI 程序員的功能,它基于整個(gè)項(xiàng)目。
有些時(shí)候?qū)崿F(xiàn)某個(gè)功能需要多個(gè)代碼文件一起修改,AI 程序員就能輕松勝任!
通義靈碼作為一款智能編碼助手,為 TypeScript 的學(xué)習(xí)和開發(fā)提供了強(qiáng)大的支持。
從代碼續(xù)寫到智能問(wèn)答,從代碼注釋到單元測(cè)試生成,再到代碼優(yōu)化和 AI 程序員功能,它幾乎涵蓋了開發(fā)過(guò)程中的各個(gè)方面。通過(guò)本文的介紹,希望你能更好地理解和使用通義靈碼,提升自己的編程效率和代碼質(zhì)量。
然而,AI 輔助編程工具的發(fā)展仍在不斷進(jìn)步中。
未來(lái),隨著技術(shù)的進(jìn)一步成熟,通義靈碼有望在更多場(chǎng)景下為開發(fā)者提供更智能、更精準(zhǔn)的幫助。
對(duì)于廣大開發(fā)者來(lái)說(shuō),掌握并善用這樣的工具,無(wú)疑將在競(jìng)爭(zhēng)激烈的編程領(lǐng)域中占據(jù)優(yōu)勢(shì)。
更多建議: