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 或者 ${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 設置超實用的代碼塊