全文3928字，閱讀時間 10分鐘，未來節約時間 15分鐘/每天

代碼片段（code snippet）?相信大家都或多或少有接觸過。

在完成一個項目以后，往往都會寫出許多有價值的代碼，或是絞盡腦汁解決的難題，或是靈光一現的小技巧，又或是需要給組里的人分享經驗，分享代碼。

對于我而言，我有時確實會把足夠酷炫或者自豪的項目封裝成一個包（例如npm或者是nuget等等），但面對粒度再小一點的一個function甚至是一行代碼就不太合適了。

我自己遇到困難的幾個場景

• electron-builder 打包后，為了修改electron國內鏡像下載地址，往往會配置vue.config.js。這個地址很長一段時間都不會變，包括這個配置的結構等主要內容其實都不太會變，每次要寫的時候都會忘記，在找了好一會之前寫的代碼后，終于找到了之前的配置文件，復制-粘貼

• 我的vue項目中會使用vuetify，而vuetify的各種配置都會寫在一起，說復雜也不復雜，但我沒有記，每次都是用到的時候打開官網然后，復制-粘貼

• 還有一些其他配置文件，例如 axios，echart，signalr等配置文件，大部分情況下都不需要修改，直接，復制-粘貼

• ....

為了能夠減少以上重復工作，提高效率，我也嘗試過不少辦法

• 制作項目模板，使用vue init 來初始化項目

• 使用?github gist

• 在vscode 中使用code snippet

但以上的解決方案或多或少有些問題，長期使用感覺不現實

• 制作項目模板的話，需要挺大的啟動決心的，并且投入大，見效慢，如果需要普適項目需要花大力氣抽象，而不普適有沒有復用價值。去建設去維護一個項目模板是一件需要權衡的事情

• 使用gist 呢，我一直沒有找到使用gist的正確姿勢，我可以很開心的寫gist，也可以很開心的看，但 我如何使用呢？打開網頁，搜索，然后？復制粘貼，但這不又回去了（沒有簡化太多

• 使用code snippet 可以參看vscode官方文檔如何書寫snippets，寫起來說復雜也不復雜，但是感覺維護和管理也是一個問題。而且那個body需要多行字符串，導致書寫的時候還得轉換一次，簡單的還好，復雜的肯定不能手寫了吧。

直到前幾天，我在vscode 插件市場里逛街的時候，發現了一個還不錯的gist書寫工具 GistPad

GistPad是一個Visual Studio Code擴展，它允許您完全在編輯器中遠程編輯GitHub Gist和存儲庫。您可以打開，創建，刪除，分叉和加星號信息庫和存儲庫，然后無縫地開始編輯文件，就好像它們是本地文件一樣，而無需克隆，推送或拉取任何內容。就像您自己的開發人員庫一樣，它用于構建和引用代碼段，常用配置/腳本，與編程相關的注釋/文檔，知識庫和交互式示例。

用了幾天以后覺得還挺好用的。雖然還沒有到我的要求，但 那至少，我寫gist方便很多了對吧。

另外，逛街的時候也發現網友和我有相同的問題呢

要是能夠又能夠輕易的查看管理自己的gist，又能在vscode中快速使用就好了啊。

感覺？也不是不行？

額，好像是可以的哈，其實只需要能夠自動將gist自動轉換為code-snippets文件就可以了哈

---

Gist+Snippet=Gisnippet

于是經過我的搗鼓，gist+snippet的轉換工具，gisnippet就完成啦。

0. 第一版

在項目制作之初，就決定寫npm 全局包而不是vscode 插件。一方面是不帶GUI，稍微方便點；另一方面是我偶爾也會用visual studio，所以寫個npm包方便在那邊用；另外提一句有點坑的是vscode 的snippet和vsstudio中的snippet竟然格式不一樣。

這個工具會訪問github gist，下載當前代碼端的文件，并且按照指定的代碼段的格式來修改，最后存儲到當前工作區或者是全局代碼段文件夾。

項目依賴如下

• octokit/rest 來作為github gist的api 訪問工具。

• chalk 來讓控制臺界面漂漂亮亮

• commander 來讓控制臺程序接受指令，并提供幫助說明

• lowdb 來存儲必要的信息，例如登錄數據

commander-讓程序接受指令

利用commander能夠很方便的創建交互式控制臺程序

command中<>表示必選參數,若用[]則表示必須參數

圖中展示了如何用一個函數響應命令行中的命令，并打印出參數

---

lowdb-爽快的數據持久化

lowdb是一個建立在json文件上的極其簡單的數據存儲庫。

下圖展示了如何使用其進行初始化，以及簡單的讀寫操作

一開始需要有一段配置，包括文件設置，以及初始的json文件結構

設置值，同步到文件需要加上write()

讀取值,最后需要加上value()

用起來還是非常簡單爽快的哈

---

chalk-讓控制臺程序也能漂漂亮亮

像這樣

就能夠讓控制臺輸出紅色的文本啦 一般用于警告報錯之類的

---

octokit/rest-js也能訪問你的github啦

初始化連接

訪問當前用戶所有gist

通過id來訪問某一條gist

---

組合以上幾個工具，gisnippet 就完成啦，歡迎大家來star

https://github.com/legenself/gisnippet

安裝方法

npm install -g gisnippet

使用方法

$ gisnippet -h # output Usage: index [options] [command]Options:-v output the version number-g, --global localed your snippets (default: false)-f, --force force convert all your gist file to snippets (default: false)-h, --help display help for commandCommands:login <token> login with github tokenset <key> <value> set your vscode snippets settingssetting get your vscode snippets settingsglobalfolder <folder> set your vscode snippets foldersync <id> sync your gists to vscode snippets,if id is empty,mg will sync all your gistsshow show your gistshelp [command] display help for command

首先需要登錄你的github，獲取一個可以訪問gist的token，并登錄

gisnippet login <yourtoken>

然后需要配置你的vscode 代碼段路徑 一般在這個目錄下 C:\Users\yourname\AppData\Roaming\Code\User\snippets

gisnippet globalfolder <folder>

使用show命令查看你當前的代碼段

gisnippet show

使用sync id 來同步某個代碼段

gisnippet sync id [-g]

加上-g 將安裝到vscode全局目錄，否則將裝在當前文件夾

gist格式說明

但是還存在問題

我現在轉換的是一條gist中的所有文件。這樣就導致轉換出來的code-snippet的觸發輸入只能用文件名來做，但這樣很不直觀，描述也沒地方寫，所以我參考 generate-snippet庫的格式，利用yaml頭來描述一條gist所含有的元數據

一條gist的文件開頭應該像這樣

標明 觸發鍵，描述，作用文件

這樣就解決了配置觸發輸入，和配置描述的問題

不過為了兼容以前的版本加入了-f --force命令，表示強制轉換所有文件為code-snippets

一個完整的示例是這樣

--- prefix: lowdb.get description: lowdb獲取數據 scope: javascript,typescript --- ```js db.get('$1').value() ```

最后就是答應大家的福利啦

為了讓大家開發 有關lowdb，commandar，chalk，octokit/rest相關的項目的時候少搜索幾次，這里提供了我總結出的項目片段。

利用本文的gisnippet 就能夠同步代碼段到vscode

octokit fff647ac21cf48dca9e96cd627329ecc 2020-10-19T13:13:42Z - octokit.gist.md 205 - octokit.gists.md 180 - octokit.init.md 155 chalk deec6aa8df4c04bf28de65fddab145d3 2020-10-19T12:53:32Z - chalk.blue.md 104 - chalk.red.md 101 - chalk.yellow.md 110 commander 2712af98e1ddffaef49bc8652e4201db 2020-10-19T12:46:00Z - commandar.action.md 256 lowdb 5e0ecea015b9e23fea08170b7806a05d 2020-10-19T12:45:17Z - lowdb.get.md 116 - lowdb.init.md 399 - lowdb.set.md 121 npm-cli-app f16a9659296be09ef05e0300c0b9de23 2020-10-19T12:46:01Z - lowdb.get.md 117 - lowdb.init.md 399 - lowdb.set.md 121 - program.command.md 256 md a9859a37565dc0ff3666f1682af92d1e 2020-10-19T12:43:53Z - gist-header.md 126

看看安裝好的樣子

我也能夠很輕易的制作自己的代碼段，預計將省去我30%百度重復問題的時間，保守估計15分鐘起步吧

相信應該也能夠節省大家不少時間吧~

如果本文有幫助到您的話，歡迎點個贊，喜歡 鼓勵一下我哈哈哈哈哈，那就再好不過了

總結

以上是生活随笔為你收集整理的使用代码片段的正确姿势，打造高效的vscode开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。