<sub id="gqw76"><listing id="gqw76"></listing></sub>
      <sub id="gqw76"><listing id="gqw76"></listing></sub>

    1. <form id="gqw76"><legend id="gqw76"></legend></form>
    2. 重復代碼的克星,高效工具 VSCode snippets 的使用指南

      為什么要用 snippets(代碼段)?

      不管你使用何種編程語言,在我們日常的編碼工作中,都會存在有大量的重復代碼編寫,例如:

      • 日志打印: console.log,log.info('...')
      • 輸出到控制臺:System.out.println("...."), fmt.Println("...")
      • 循環:switch(...){},for(i := 0, i <= len, i++),for...i 等等

      這種模板代碼在 java,go 中靜態語言會比較多,實際上,平時除了 模板代碼,還有很多模板文件,也是存在很多重復編碼的工作,例如:vue文件,html文件,xml文件,里面的很多標簽,方法,屬性基本都是固定的,我平時遇到比較多的還是 java,go 里面的模板文件和代碼,關于重復代碼不勝枚舉,這里就不過多概述了。

      寫這些模板代碼和模板文件,實際上除了練習你的打字速度外,不會給你帶來任何技能上的提升,是屬于 重復而且低價值的事情,比如就算你把 "hello world" 練習一千遍,你也不會成為高手一樣,

      那么作為一個高效的程序員,要懂利用如何節省自己的時間,把有限的精力投資在高價值,高回報的事情上,對于這些無法逃避的重復的編碼工作,我們需要用技術和工具來把他們解決就好,所以 VSCode 提供的 user snippets 用戶代碼段(在 jetbrains 家族中也稱為 Live templates )就是用來做這個事情的

      怎么使用 snippets ?

      知道了為什么要用代碼段,我們來說說 VSCode 中的 snippets 的具體作用

      熟悉 Jetbrains 家族產品的同學應該知道 Live Templates 功能非常好用,其實 VSCode snippets 就是類型 Jetbrains 的 Live Templates 功能,他們解決的是相同的問題。

      VSCode 官方對于 snippets 的描述如下:

      Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

      簡單翻譯就是:

      代碼段是一種模板,可以更容易地輸入重復的代碼模式,例如循環或條件語句

      使用 snippeets 代碼段對 javascript 中的 ajax 的重復代碼進行封裝,只需要輸入關鍵字:ajax,就可以把整個代碼段帶出來,非常的高效,具體參見下面來自官方的示例:

      ajax snippet

      查看已有的 snippets

      其實 VSCode 對于每種語言都有默認初始化的 snippets,能夠滿足日常的使用,在 VSCode 打開命令行界面輸入:insert snippets 即可查看當前可以用的 snippets,如圖:

      JavaScript 內置的 snippets

      以上是在 JavaScript 語言環境下看到的 snippets (目前內置對 JavaScript 支持比較友好)

      當我切換到 golang 的時候,查看的 snippets 如下(未安裝語言包的情況下):

      VSCode 初始化內置的 snipptes

      這么少的 snippets 肯定是不夠用的,好在 VSCode 的豐富插件為我們提供了擴展的可能性,通常相關聯的語言工具包都內置的大量常用的 snippets,我們通常只要安裝即可。

      在 VSCode 的擴展使用:@category:snippets 過濾搜索安裝對應的工具即可,如圖:

      18gJTC

      安裝語言包完成后,在 VSCode Command 頁面輸入:insert snippets 即可看到新增的大量的 snippets :

      J6Hz0r

      熟練使用語言包內置的 snippets 可以滿足 80% 場景。

      但是可能還是無法滿足和覆蓋所有場景,

      這樣場景下我們需要創建自己的 snippets 來完全解決代碼重復的問題。

      創建你自己的 snippets

      在 VSCode 中創建 snippets 是非常簡單的事情(無需安裝任何擴展),有兩種方法實現:

      1. 在 macOS 中選擇:Code -> Preferencts -> User Snippets 選項
      2. 或者在 VSCode Command 中輸入:configure user snippets 即可

      如果是創建 snipperts 選擇 選擇 New Global Snippets file ,輸入你要創面的 snipperts name 即可進入配置

      snipperts 文件是 JSON 風格,剛創建后的默認格式內容如下:

      SpCk5J

      我簡單描述的一下屬性的作用:

      • scope:限定代碼段的作用域,例如 go 語言的代碼段不會出現在 js 中,反之亦然
      • prefix:是快捷關鍵字,當 VSCode 檢測到代碼中出現 prefix 關鍵字就會在編輯器中替換為 body 的內容
      • body:是重復的代碼模板內容,通常是程序員想要自動化的一些重復,模板代碼,錄入在這里
      • description:顧名思義就是對這段 snippets 的具體描述

      這里值得再提一下的就是, body 里面的 $1 關鍵字是模板代碼替換后鼠標光標的所在位置,當出現多個 $1$2 的時候,可以通過鍵盤 TAB 按鍵快速切換鼠標光標所在位置,用于提高效率,這塊就不具體深入描述了,有興趣的小伙伴可以自行去探索。

      關于 snipperts 配置文件的細節還有很多,這里就不深究了,

      有興趣深入研究的伙伴可以 VSCode Snippets 官方的相關的文檔,里面解釋的非常詳細。

      參考資料:

      • [Snippets in Visual Studio Code
      posted @ 2021-03-01 21:46  小二十七  閱讀(358)  評論(0編輯  收藏
      最新chease0ldman老人|无码亚洲人妻下载|大香蕉在线看好吊妞视频这里有精品www|亚洲色情综合网

        <sub id="gqw76"><listing id="gqw76"></listing></sub>
        <sub id="gqw76"><listing id="gqw76"></listing></sub>

      1. <form id="gqw76"><legend id="gqw76"></legend></form>