VS Code項目中通過npm包的方式共享代碼片段的方案實作

上周在 “VS Code項目中共享自定義的代碼片段方案” 的文章中提到過一個共享代碼片段的方案，上周經過調研後并沒有發現現成的插件，就抽了點空實作了這個方案，最終産出Share Snippets 這個插件去實作這個設想

Share Snippets介紹

借助Share Snippets，你可以通過npm包的形式分享你的代碼片段，讓其它的開發者能夠輕松愉快的體驗上，更新疊代友善

方案對比

項目級共享代碼片段

方案	學習成本	傳播能力	生效方式	缺點
在.vscode目錄編寫片段規則	低		項目中編寫後直接生效	不友善傳播，更換項目需要重新C/V
開發snippets插件	中	高	安裝對應的插件在VS Code中	更換裝置需要重新安裝相關的插件
通過 npm包			使用npm install package 即可

特點

借助

Share Snippet

無需你開發Snippet插件，就能輕松的讓其它人使用你的代碼片段

代碼片段的規則完全參照VS Code官方文檔的自定義代碼片段規則

特點總結

• 容易傳播
• 引入友善
• 更新更新友善
• 學習成本極低
• 。。。

demo.code-snippets

{
  "Print Text": {
    "scope":"javascript,typescript,vue,react",
    "prefix": "lg",
    "body": "console.log($1)",
    "description": "console.log"
  }
}
           

tips：四個屬性都為必填值才能生效

注意

1. 插件會在VS Code啟動的時候進行一次檔案的掃描
2. 可以通過指令輸入

   Refresh

   進行重新掃描
3. 插件隻會掃描

   share_snippets

   目錄下以

   .code-snippets

   結尾的檔案
4. 無論目錄層級多深隻要是在

   share_snippets

   .code-snippets

   結尾的檔案都能被掃描到并在項目中啟用

比如

node_modules
└── package1Name
│   └──share_snippets
│       ├── comment
│       │   └── test1.code-snippets
│       └── test2.code-snippets
└── package2Name
    └──share_snippets
        ├── comment
        │   └── test1.code-snippets
        └── test2.code-snippets
share_snippets
    ├── comment
    │   └── test1.code-snippets
    └── vue
        └── test2.code-snippets
           

指令

首先需要按

F1

打開指令輸入框

指令名稱	作用
Refresh	重新掃描項目中的片段檔案

未來

• [ ] 優化重新掃描項目代碼片段的指令
• [ ] 加入可配置檔案，優化片段代碼中備援的

  scope

  内容
• [ ] 片段内容

  body

  支援指定的檔案(即将指定的檔案内容作為片段的内容)

npm 包開發示例

非常簡單，和直接編寫官方

.code-snippets

檔案一模一樣

share-snippets-demo

• NPM位址
• GitHub

可以clone或者fork項目，然後編寫自己的代碼片段，釋出到NPM

最後

希望此插件能夠幫助你提高編碼的體驗與效率，提升編碼的幸福感😊,使用途中有任何問題，請直接與我聯系

相關連結

• VS Code項目中共享自定義的代碼片段方案
• 插件位址
• GitHub倉庫
• NPM包編寫示例

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

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

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