一個經過NPM包共(分)享代碼塊的解決方案

經過NPM包共(分)享代碼塊，急速編寫代碼塊方案

這是我參與更文挑戰的第19天，活動詳情查看：更文挑戰

前言

最近又看到了許多小夥伴更新了Vs Code設置代碼塊的實踐教程，簡單總結就是，按規則編寫一個code-snippets文件便可：

• 項目級：將文件放在.vsode目錄下
• 全局：首選項 -> 用戶片斷 -> 全局代碼塊

一些問題

此種方案我以爲僅能簡單知足我的須要，但當我的須要編寫大量snippet的時候，編寫code-snippets配置文件比較麻

固然有大神作了在線的snippet配置生成的網站解決編寫配置文件的繁瑣，但也要複製粘貼。。

有沒有不編寫code-snippets配置文件也能加載自定義代碼塊的方式呢?有，固然有，後文會介紹到

但還有另外一問題，好比你想把你的snippet分享給其它同事或者朋友，有以下一些方案:

• 拷貝code-snippets文件
• 編寫snippet插件，發到插件市場
• 。。。

能夠看出這些常規的方案有一絲繁瑣，不便於分享與傳播

Share Snippets

大概三個月前我也寫了篇文章簡單介紹了這個插件出現的背景：助你輕鬆編寫與分享snippet的VsCode插件｜項目覆盤

大概就是，我來作插件的工做，你只負責編寫簡單的代碼塊配置文件

容許你以npm包的形式，將代碼塊的配置文件分享給全球開發者使用

但可能因爲閱讀量不高，目前下載體驗的朋友也很少

簡介

支持經過npm的形式分享你的代碼塊

即支持從node_modules中讀取代碼塊的配置文件，並在編輯器中註冊

除了支持加載官方的code-snippets配置文件，爲了簡化書寫，也定義了一個更加簡單的.snippets.json文件配置方案

特點

• 簡化配置，支持直接指定文件做爲代碼塊
• 爲HTML標籤，Vue/React組件的代碼塊進行了定製，支持很是完善的屬性提示

使用

固然是先裝上插件

tips：編寫完新的代碼塊，如需當即生效，需手動執行 SP Refresh 命令

下面是編寫配置文件的演示，插件提供了快速生成配置文件內容的代碼塊:

prefix	簡介
ss-file	模板文件代碼塊
ss-vue	vue組件代碼塊
ss-react	react組件代碼塊
ss-tag	html標籤代碼塊

一個配置文件，能夠編寫多個代碼塊

完整的配置文件編寫文檔

指定文件內容做爲代碼塊

這裏以幾個簡單的vue3代碼塊爲例：

編寫者只須要指定代碼塊內容文件的相對路徑和激活代碼塊的前綴兩項配置便可

Vue組件的代碼塊

以一個默認的 my-input 組件進行演示示例

支持完整的屬性提示，支持以sp-開頭展現組件的全部的可用屬性

React組件代碼塊

以一個默認的 MyButton 組件進行演示示例

總結

我的認爲，此插件不只能夠幫助編寫與分享代碼塊

也可用於業務開發中，公共業務組件添加一個.snippets.json配置，其它人使用的時候就能得到很友好的屬性提示

最後

歡迎你們評論區交流，提出迭代意見

歡迎你們體驗插件，提出寶貴的修改意見

• 插件源碼
• 插件體驗