爲vscode寫snippet插件

本文爲博主原創, 轉載請註明原做者 @[xioqua] xioqua

本文將教你們怎麼爲vscode裏寫一個snippet插件，我默認你們全無基礎,你們跟我一步步作下去，就能獲得一個本身的snippet插件。以此爲藍本，之後無論想爲vscode添加什麼語言、庫或者框架的snippet都不在話下。

Let's Go...

環境配置

安裝 vscode

爲vscode寫插件，首先得有vscode，直接去官網選擇適合本身操做系統的版本下載便可.

安裝node

接着即是配置必備的nodejs,這裏我並不推薦你們直接去官網下載nodejs，緣由是node版本迭代實在太快。推薦你們先去下載安裝nvm.

node 簡而言之就是 服務端js的運行庫，相似客戶端的DOM;

nvm 即 node version manager，管理node版本的工具。

對於windows用戶，nvm的安裝有幾個要點要注意
首先windows用戶裝nvm在這裏,
安裝以前務必把原先的nodejs給卸載乾淨，之前的npm包也得搞幹勁。
卸載nodejs直接去系統自帶的安裝卸載服務便可;
刪掉掉npm包即去刪掉 C:Users<user>AppDataRoamingnpm"和 一個npm的cache(緩存)文件。若是你不放心，大能夠全磁盤搜索npm、node字眼再作處理。

windows的nvm是一個安裝包，安裝的時候會有2次選擇路徑;第一次是nvm的安裝路徑，第二次則是nvm爲node存放的軟連接地址，默認放在C:Program Files下的nodejs目錄，目錄上有個快捷鍵標識。

這麼折騰一番以後，之後你想怎麼切換node都不是問題了，那麼怎麼切換呢，官網推薦windows用戶使用cmder.看起來很漂亮的terminal程序啊，雖然跟linux/mac仍是差了一大截。不過本人用的是git自帶的bash.

安裝git

安裝git的目的有2個，一是代碼管理功能，使用它就能把咱們寫的代碼啊、數據啊上傳到github,另外一個就是其自帶了一個Git bash程序，使用它基本能夠模擬linux端的部分經常使用命令。

這裏繼續給出windows用戶的下載地址git win 64(本人是win10環境，天然多照顧win10同胞了，笑

注意 是git的安裝並非Github desktop的安裝，後者是專門針對Github的客戶端，換言之，只有前者纔是真正的git服務，後者只是個使用服務的殼子。固然你要想用，也能夠下載下來試試。

配置vscode環境

打開vscode,按下F1,輸入setting，選擇 user setting這項。
vocode會打開2個標籤，左邊是隻讀的，右邊是你設置的，照着改就行。

用戶設置和工做區設置的區別在於用戶設置管理範圍更大，工做區設置只針對當前打開的工做項目。通常狀況下，咱們都是直接對用戶設置進行更改。

vscode設置

更多關於vscode配置請關注個人筆記專列

在vscode終端配置依賴

在上一步咱們已經設置好了vscode，如今按 Ctrl+` ,終端出來了。

分別鍵入如下命令:

nvm list

查看你的電腦安裝了哪些版本的nodejs。目前咱們什麼都沒安裝。

nvm install latest
nvm install 6.9.2

分別下載安裝node的最新版和長期穩定版(PS: 長期個屁，還不是總是換)，
這個6.9.2是我去官網看的,並沒找到nvm怎麼直接安裝長期穩定版，知道的同窗請告訴我。

nvm use 6.9.2

這裏咱們使用長期穩定版，這時電腦會給出2次提示，直接按「是」。

再次按

nvm list

檢查本身用的是哪一個版本。

下面檢查node版本和npm版本

node -v
npm -v

OK,一切就緒。

接着安裝yeoman和 vscode團隊爲咱們寫的generator。

yeoman能夠看作作項目的初始化工具，使用它你只要在命令行敲幾句命令就能夠一鍵生成項目結構，省去了你自建文件、文件夾、寫各類配置文件的麻煩。

npm install -g yo

必定要安裝到全局，畢竟yeoman這工具之後確定還常常用。

如下部分參考vscode官網的tool一文.

安裝vscode的generator(中文：生成器)

npm install -g yo generator-code

這裏也儘可能全局，由於這個生成器不是隻用一次，之後爲vscode開發插件、寫snippet、theme、language等擴展都用得上。

yo code

注意: 經本人嘗試，不要直接用 Git bash客戶端打開，要直接集成到vscode裏用。不然會出現不響應上下方向鍵的問題。若是出了問題，請試着更換vscode皮膚再重啓。

選擇最後一個new code snippets.

好了，出現下面

它的意思是叫我給出snippet的目錄地址。

so what?

能夠看到與寫插件不一樣，snippet須要你提早寫好代碼，而這裏僅僅是一個轉換器。

按Ctrl+C強行退出終端。

下面教你們一個簡單的寫snippet的方法。

snippet語法解析

首先，第一種狀況，你們能夠按F1,輸入snippet,打開用戶代碼段，選擇合適的語言，好比javascript,進去照着輸入就能夠了。不過這種方式不是插件形式的，意思是什麼？想一想插件有什麼好處?
定製啊，即插即用啊，當你vscode不在了，你的插件已經去了vscode的官方市場，想什麼下載就何時下載。固然你有能夠人工保存。不過，目前我還未找到用戶自定義的javascript.json被放在哪裏了，知道的同窗請告知我。

這就是自定義snippet，好處是能夠把多個snippet寫在一個文件裏，且語法簡單一看就明白。缺點就是卸載了vscode可能就須要重寫。固然你也能夠保存下這個javascript.json用到的時候再複製進去。對於全部不少snippet都在一個文件致使的管理問題，可藉助註釋人爲劃分。
好比分爲

// core js
 // dom
// nodejs
// jQuery
// lodash 
// ...

畢竟js的庫與框架實在是太多太多了。

我的建議,用戶snippet做爲臨時須要;然後都應該轉成插件snippet。
當代碼寫多了，再對這裏用戶snippet作整理作成插件形式。

第二種方案，則是下載別人的snippet插件，去
C:Users<用戶名>.vscodeextensions找到插件文件夾裏的一個生成的json的文件，直接在這上面加，加完了重啓vscode也能看到效果。
這樣的好處是很是便捷，之前講的步驟均可以不用知道，夠用就行。缺點是要困於別人的插件體系，若是別人管理是亂的你就會跟着他亂掉。你也不能發佈它，只能搞完了記得備份。本身偷偷用業是OK的。

第三種方案，是官網推薦的TextMate snippet syntax,我直到看到語法形式你確定不知所云了，不要緊，我不用這種。

第四種方案，是用sublime的snippet格式。

下面參考vscode snippet

沒有sublime也沒關係，咱們只是須要一個格式文檔

這就算咯，不過，請去掉註釋，且scope和tabTrigger必需要寫，而不是能夠Optional.
下面這個gif操做只是本地化的插件不涉及發佈到vscode市場

注意sublime的snippet一個文件只能存放一個snippet，放在一個文件夾裏。

發佈

發佈操做也很簡單，參考vsce