試試開發一個VSCode插件，聚合一些常用的程式碼片段供團隊使用

這篇文章帶大家一起來寫vscode插件，為你的團隊提供常用程式碼片段，當輸入前綴的時候就會觸發智慧提示，希望對大家有幫助！

VS Code 是前端開發者最佳的開發工具，你在開發中是否疲倦了從一個檔案拷貝來新建一個檔案？或者在你的團隊內部是否有一些內部元件庫，像是 Ant Design、 React hooks 等元件庫，團隊內部伴隨開發的也一直打開元件相關文件？

其實我們可以開發一些常用的程式碼片段（Snippets）供團隊內部使用。當輸入前綴的時候就會觸發智慧提示。

推薦

首先推薦幾個前端常用Snippets 外掛程式

• # #ES7 React/Redux/React-Native/JS snippets React 開發者常用

• ##antd-snippets

• ##vetur

  vue 開發者推薦, 語法高亮，智慧提示，emmet，錯誤提示，格式化，自動補全，debugger。 VS Code 官方欽定Vue插件，Vue開發者必備。

• Vue 3 Snippets

• element-ui-snippets

#一般常用的元件庫在VS Code 搜尋就會得到。

最近VS Code 發布了網頁版

vscode.dev/

當時上面的snippets 在網頁版中往往不支持，其實是上面的這些插件包含了其他一些非代碼提示的功能，如果是純snippets 在網頁版也是支援的。 【推薦學習：《vscode入門教學》】

開發

接下來就要開發團隊內部VS Code 外掛了，開啟VS Code API 的

官網

， 引入我們眼簾的是

npm install -g yo generator-code

首先全域安裝鷹架，安裝完成後，在命令列中輸入

yo code

#選擇

New Code Snippets

輸入一些基礎資訊後專案就建立成功了。

建立程式碼片段

有一個網站可以幫助我們快速的建立code snippet

snippet-generator.app/

#左邊輸入程式碼，右邊就會產生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.dev/

 使用

發布

1、第一步先安裝vsce

npm install vsce -g

2、第二步驟建立帳號

首先访问 login.live.com/ 登录你的Microsoft账号，没有的先注册一个，然后访问： aka.ms/SignupAzure… ，如果你从来没有使用过Azure，那么就要先创建一个Azure DevOps 组织，默认会创建一个以邮箱前缀为名的组织。

3、第三步进入组织创建令牌

点击右上角的用户设置，点击创建新的个人访问令牌

注意 这里的 organizations 必须要选择 all accessible organizations，Scopes 要选择 full access，否则后面发布会失败。

创建 token 成功后你需要本地记下来，因为网站是不会帮你保存的！！！

4、第四步 创建一个发布者

发布者是 visualstudio 代码市场的扩展的唯一身份标识。每个插件都需要在 package.json 文件中指定一个 publisher 字段。

你可以通过 visualstudio 插件市场发布者管理页面创建一个新发布者， 然后使用 vsce login <publisher name> , 输入刚才的 token，登陆成功。

5、第五步发布插件

vsce publish

发布成功后可能需要一两分钟，才可以在 VS Code 中搜索到，可以直接通过 url 访问

marketplace.visualstudio.com/items?itemN….

也可以使用以下命令 取消发布

vsce unpublish (publisher name).(extension name)

最后

本文对于开发者来说没什么技术难度，主要从一个 code Snippets 的角度出发来帮助团队，从而提高效率，主要是熟悉一下发布一个 VS Code 插件的流程，后续我会从一个实例的角度介绍下如何开发一个 VS Code 插件。

更多关于VSCode的相关知识，请访问：vscode教程！！

以上是試試開發一個VSCode插件，聚合一些常用的程式碼片段供團隊使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！