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 設定超實用的代碼塊

"你的指尖,擁有改變世界的力量! "

歡迎關注我的個人部落格:https://sugarat.top