本篇文章帶大家一起來寫vscode插件，為你的團隊提供常用代碼片段，當輸入前綴的時候就會觸發智能提示，希望對大家有所幫助！
VS Code 是前端開發者最佳的開發工具，你在開發中是否疲倦了從一個文件拷貝來新建一個文件呢？或者在你的團隊內部是否有一些內部組件庫，比如 Ant Design、 React hooks 等組件庫，團隊內部伴隨開發的也一直打開組件相關文檔？
其實我們可以開發一些常用的代碼片段（Snippets）供團隊內部使用。當輸入前綴的時候就會觸發智能提示。
推薦
首先推薦幾個前端常用 Snippets 插件
-
vscode React 開發者常用
-
vscode vue 開發者推薦, 語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。VS Code 官方欽定Vue插件，Vue開發者必備。
一般常用的組件庫在 VS Code 搜索就會得到。
最近 VS Code 發布了網頁版 vscode 當時上面的 snippets 在網頁版中往往不支持，其實是上面的這些插件包含了其他一些非代碼提示的功能，如果是純 snippets 在網頁版也是支持的。【推薦學習：《vscode》】
開發
接下來就要開發團隊內部 VS Code 插件了，打開 VS Code API 的vscode， 引入我們眼簾的是
npm?install?-g?yo?generator-code
首先全局安裝腳手架，安裝完成后，在命令行中輸入
yo?code
選擇 New Code Snippets
輸入一些基礎信息后項目就創建成功了。
創建代碼片段
有一個網站可以幫助我們快速的創建 code snippetvscode
左邊輸入代碼，右側就會生成 snippet 模板，拷貝到項目中的 snippets.code-snippets 文件下的 JSON 對象中
其他 hooks 可以繼續添加到 json 對象中，
如果想在讓 typescript javascriptreact 也支持,可以在package.json 中的 contributes 字段指定4份 snippets；
"snippets":?[ ??????{ ????????"language":?"javascript", ????????"path":?"./snippets/snippets.json" ??????}, ??????{ ????????"language":?"javascriptreact", ????????"path":?"./snippets/snippets.json" ??????}, ??????{ ????????"language":?"typescript", ????????"path":?"./snippets/snippets.json" ??????}, ??????{ ????????"language":?"typescriptreact", ????????"path":?"./snippets/snippets.json" ??????} ????]
點擊調試就可以在本地調試了
到此已經開發結束，如果不發布的話可以把 snippets 直接指定到本地目錄下，打開 user snippets 配置面版，將 json 拷貝進去 就可以在 vscode 中使用了，也可以在網頁版 vscode ?使用
發布
1、第一步先安裝 vsce
npm?install?vsce?-g
2、第二步創建賬號
首先訪問?vscode?登錄你的microsoft賬號，沒有的先注冊一個，然后訪問：?vscode?，如果你從來沒有使用過azure，那么就要先創建一個Azure devops 組織，默認會創建一個以郵箱前綴為名的組織。
3、第三步進入組織創建令牌
點擊右上角的用戶設置，點擊創建新的個人訪問令牌
注意 這里的 organizations 必須要選擇?all Accessible organizations，Scopes 要選擇?full access，否則后面發布會失敗。
創建 Token 成功后你需要本地記下來，因為網站是不會幫你保存的！！！
4、第四步 創建一個發布者
發布者是 visualstudio 代碼市場的擴展的唯一身份標識。每個插件都需要在 package.json 文件中指定一個 publisher 字段。
你可以通過 visualstudio 插件市場vscode頁面創建一個新發布者， 然后使用 vsce login
5、第五步發布插件
vsce?publish
發布成功后可能需要一兩分鐘，才可以在 VS Code 中搜索到，可以直接通過 url 訪問
也可以使用以下命令 取消發布
vsce?unpublish?(publisher?name).(extension?name)
最后
本文對于開發者來說沒什么技術難度，主要從一個 code Snippets 的角度出發來幫助團隊，從而提高效率，主要是熟悉一下發布一個 VS Code 插件的流程，后續我會從一個實例的角度介紹下如何開發一個 VS Code 插件。
