VS Code項目中共享自定義的代碼片斷方案

一.問題背景

• 項目中註釋風格不統一，如何統一註釋風格
• 一些第三方組件庫名稱太長，每次使用都須要找文檔，而後複製粘貼
  • 部分組件庫有本身的Snippets插件
• 一些組件能記住名稱，但太長了手敲全稱有點費時間
• 某些組件還有很多經常使用的參數,有不有辦法在敲出組件的時候，加上一些參數

二.解法

稍加總結就不難看出，這些問題都能經過一些代碼片斷去解決

問題又來了：如何在項目中共享自定義的代碼片斷？

編輯器以VS Code爲例，引入自定義代碼片斷的常見方案有以下幾種：

1. 經過擴展市場，以插件的方式引入(比較推薦各UI 組件庫作一個)
2. 直接在VS Code中引入自定義代碼片斷(首選項 -> 用戶片斷)
   1. 全局
   2. 當前項目

目前最適合當前場景的方案2-2

三.如何在當前項目中建立自定義的代碼片斷？

1. 在當前項目中建立.vscode文件夾
2. 在其中建立以.code-snippets結尾的文件如:
   1. a.code-snippets
   2. b.code-snippets

如何編寫？

first.code-snippets

{
	"Print to console": { // 代碼片斷名稱
        "scope": "javascript,typescript", // 生效的語言
        // （在文件中敲入prefix便可生成body中的內容）
		"prefix": "lg", // 片斷縮寫
		"body": [ // string[] 片斷的完整內容，每一個string表明一行
			"console.log('$1');",
			"$2"
        ],
        // 在文件中輸入完prefix時候，彈出此內容
		"description": "Log output to console" 
	}
}
複製代碼

保存後就能夠在工做區生效

body中能夠有一些自定義的特殊內容

佔位符$

• $number:$1，$2，$3
  • 可指定代碼片斷觸發落入編輯器以後的光標位置，光標位置按照從小到大排序，經過Tab 切換
  • $0用於設置光標最終的位置
• ${number|option1,option2|}: ${1|op1,op2|}
  • 設置佔位內容的可選項
• ${number:value}: ${1:default}
  • 可選內容只有一個的狀況

變量

使用 {name:default} 能夠插入變量的值。若是未設置變量，則會插入其默認值或空字符串。當變量未知（未定義其名稱）時，會將插入的變量名稱轉換爲佔位符。

VS Code內置了許多變量這裏就不贅述了，

變量文檔英/掘金翻譯

四.總結

經過在VS Code中建立.vscode文件夾寫入x.code-snippets配置文件便可實現自定義代碼塊的共享

侷限

1. 必須寫在.vscode目錄中
2. 不支持文件夾分類，即在.vscode目錄生效深度只能爲1
3. 增長項目的文件大小
4. 須要手動把別人的片斷文件放在.vscode目錄中

五.將來

部分庫（組件/方法/語言）等提供了Snippets插件，但還有一些庫沒有提供，想把本身的代碼塊共享給其它人，開發插件的學習成本較高

有沒有一種辦法可以：

• 直接引入它人的代碼塊
• 傳播方便
• 引入方便
• 對項目結構沒有影響
• 更新迭代方便

個人設想：

Snippets文件以npm包的形式發佈到npm倉庫，本地經過一個VS Code插件自動掃描node_modules中的代碼片斷文件，而後使其在編輯器中生效

接下來去調研看看是否有現成的這種插件，沒有的話本身搞個23333

參考文章:

• VS Code Snippets官方文檔
• 掘金：VSCode 利用 Snippets 設置超實用的代碼塊