四兩撥千斤——你不知道的VScode編碼TypeScript的技巧
- 2021 年 4 月 27 日
- 筆記
- javascript, 前端知識, 經驗分享
轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。
原文參考://blog.bitsrc
如果你體驗過JAVA這種強類型語言帶來的便利,包括其豐富的類型變數、抽象與介面,轉而使用JavaScript一定會覺得不夠滿意。尤其是JavaScript聲明的變數Number可以輕而易舉的分配給String,IDE如何執行任何類型的IntelliSense都讓人十分困擾。
面對這個技術障礙,我們就無法忽視TypeScript帶來的便利。相比較於JavaScript,最為明顯的一點就是我們可以賦予IDE實際使用的能力, 本文將要介紹一些TypeScript的編碼技巧,幫助您更加快速高效的進行工作。
創建自定義程式碼段
獲取默認的程式碼段以及自定義程式碼段是VScode的IntelliSense功能的重要部分,程式碼片可以大幅縮減編寫程式碼的時間,只需要記住使用前綴,用什麼觸發就可以。
通過從命令菜單中選擇「插入程式碼段」,即可查看,該列表內容豐富,能在日常工作提供很大幫助。
另一個重要內容是添加自定義程式碼段。
使用方法:選擇「文件」 > 「首選項」下的「用戶程式碼段」(在macOS上為「程式碼」 > 「首選項」),選擇程式碼段可訪問的語言,或是全局語言。
添加自定義程式碼段,只需要在文件內添加一個JSON定義。
新的snippets文件就新建在了項目文件夾中,具有自定義擴展名,支援JSON的內聯注釋。
需要定義的內容包括:
l 名稱,如果沒有描述將作為IntelliSense下拉列表的一部分
l 範圍,默認為全句程式碼段
l 前綴,作為觸發片段的單詞,可以定義為字元串組或值
l 主體,包含程式碼行列表,可以添加VScode標記,使用TAB移動
l 描述,此項為可選內容,如果不使用則在IntelliSense下拉菜單中列出的項目出現時顯示其名稱
上面的示例中我們創建了一個自定義程式碼段,當開始編寫「 mylog」就會觸發該程式碼段。有人可能對程式碼中console.log有疑問,但要注意還有一個預定義的變數:TM_SELECTED_TEXT,它引用當前選定的文本。因此,如果我們在選擇程式碼時手動觸發此程式碼段,它將將該選擇封裝在一條console.log語句中。
這裡整理了一些開發中常用程式碼段的預定義變數:
l TM_SELECTED_TEXT 當前選擇的文本或空字元串
l TM_CURRENT_LINE 當前行的內容
l TM_CURRENT_WORD 游標下的單詞內容或空字元串
l TM_LINE_INDEX 基於零索引的行號
l TM_LINE_NUMBER 基於一索引的行號
l TM_FILENAME 當前文檔的文件名
l TM_FILENAME_BASE 當前文檔的文件名,不帶擴展名
l TM_DIRECTORY 當前文件的目錄
l TM_FILEPATH 當前文檔的完整文件路徑
l CLIPBOARD 剪貼板中的內容
l WORKSPACE_NAME 打開的工作空間或文件夾的名稱
日期和時間的引用:
l CURRENT_YEAR 本年度
l CURRENT_YEAR_SHORT 本年度的最後兩位數字
l CURRENT_MONTH 以兩位數表示的月份(例如「 02」)
l CURRENT_MONTH_NAME 月的全名(例如「七月」)
l CURRENT_MONTH_NAME_SHORT 該月的簡稱(例如「 Jul」)
l CURRENT_DATE 一個月中的某天
l CURRENT_DAY_NAME 一天的名稱(例如「周一」)
l CURRENT_DAY_NAME_SHORT 一天的簡稱(例如「 Mon」)
l CURRENT_HOUR 當前小時(24小時制)
l CURRENT_MINUTE 當前分鐘
l CURRENT_SECOND 當前秒
l CURRENT_SECONDS_UNIX 自Unix時代以來的秒數
動態添加有效的注釋標籤:
l BLOCK_COMMENT_START輸出示例:JavaScript/*或HTML<!–
l BLOCK_COMMENT_END輸出示例:JavaScript*/或HTML–>
l LINE_COMMENT 示例輸出:在JavaScript中 //
舉一些例子加以說明:
通過「 doc」,觸發創建注釋塊,游標定位在的$1位置,如果在其中寫內容並按TAB鍵,將跳轉到position $2。
最終結果如下所示:
自定義TypeScript格式
根據個人風格和編碼習慣自定義自己的編碼格式
在設置窗口中,鍵入「 typescript.formatting 」, TypeScript提供了24種格式化選項。
可選擇的範圍包括:在打開和關閉字元串括弧後添加空格,在函數的新行添加括弧,處理分號(可選擇忽略,添加缺失的括弧或自動將其全部刪除)。
通過此列表,我們可以自定義VSCode,使程式碼風格更符合個人編碼習慣。完成後,通過選擇命令面板上的「設置文檔格式」選項生效。
易重構性強
在大型程式碼庫上進行重構尤其麻煩,進行簡單的更改(例如,將類定義從一個文件夾移動到另一個文件夾)會影響很多文件。
而VSCode提供了一組非常好用且無需進行任何額外的擴展的功能。
1.重命名現有符號
通過簡單的Search&Replace可以在程式碼中重命名變數或類名,除非名稱是其他實體的一部分,例如命名類Car,然後將其oCar作為實例的變數。如果僅打算重命名實際的類,則會導致一些問題。
VSCode簡化了很多工作,我們要做的只是選中要重命名的實體之一,然後按F2(或右鍵單擊它並選擇「重命名符號」,mac的操作有些不同)。選擇新名稱,該過程中使用的任何地方(包括定義,如果最初未單擊它的話)都將被正確重命名。
2.抽象的構建
如果不止一次使用,需要對其進行抽象。常見的重構技術是提取邏輯成為如一個函數或一個方法。
通過選擇要重複使用的程式碼並單擊其旁邊的燈泡進行抽象。例如以下程式碼,需要提取最後兩行:
選擇提取在全局範圍生效,輸入新的函數名,將獲得以下內容:
同時countCharacters功能需要一些修飾,在更複雜的用例下好處也很明顯。
燈泡的菜單選項是上下文感知的,如果我們正在使用類,則還可以選擇將程式碼提取為新方法,或將類型轉換為介面,以及將單個值轉換為常量。
3.簡化功能簽名
將過多參數通過將對象分解添加到混合中進行簡化:
選擇所有參數,然後單擊燈泡,選擇「將參數轉換為變形的對象」
進一步優化,打開類型聲明,然後將其轉換為外部類型,可以再次選擇類型定義
點擊「提取到類型別名」將詢問新的類型名稱,它將創建該名稱並將其放置在函數的簽名上
進一步簡化此程式碼
保存文件後自動操作
我們都經歷過在將程式碼提交到存儲庫之前忘記格式化文件或運行linter了,而 VSCode允許我們定義在文件保存後立即執行的預設操作,這樣就避免了開發的的疏漏。
設置過程是編輯settings.json器編輯文件,添加editor.codeActionsOnSave就可以在保存文件後設置要執行的操作列表,包括運行ESLint或添加缺少的導入等操作。
可以將其設置為如下數組:
「 editor.codeActionsOnSave」:[「 source.fixAll.eslint」,「 source.addMissingImports」]
同時,如果我們希望在保存文件時自動添加前面提到的格式化選項(而不是手動格式化文檔),則可以將以下條目添加到我們的settings.json:
“editor.formatOnSave”: true
例如,實現將分號設置為自動插入。
CodeLens計數器
VSL默認情況下不會激活CodeLens,對於大型程式碼庫這將非常不便,這裡將提供一些重構思路:
通過啟用列出類,函數,類型和其他構造的實現和引用的計數器的功能,有小標記。
要啟用此功能,只需在設置螢幕上查找單詞「 CodeLens」。啟用所有計數器。
將得到以下內容:
「3 references」 和「1 reference」是由VSCode直接添加的,一旦單擊它們,將獲得引用構造的程式碼的擴展視圖(在此示例中為定義的類型):
總結:本文總結的這些TypeScript的編碼技巧可以有效的提升您的編碼效率,今後我們將會為您帶來更多相關技巧,助力開發者。