Build and Publish a VSCode Code Snippets Extension—Avoid Common Pitfalls

Introduction

This article is a step‑by‑step note on developing a VSCode code‑snippets extension, aiming to provide a quick and effective way to create your own VSCode plugin. It targets beginners and shares lessons learned from the author’s own experience.

Environment Preparation

node

npm

yeoman sudo npm i yo -g generator‑code

sudo npm i generator-code -g

Developer Account Registration

Register a Visual Studio Team Services (Azure DevOps) account, log in with GitHub if desired, then:

Sign in to Azure DevOps.

Create or select an organization.

Create a new project under that organization.

Obtain a publisher token (see screenshot).

Click New Token, select all accessible organizations, then Show all scopes, choose Marketplace → Manage (see screenshot).

Register the VSCode extension publisher, ensuring the name and ID match.

Project Setup

Project Initialization

Run yo code in the terminal.

Select JavaScript as the language and provide the extension name (see screenshot).

Project Modification

Open the generated folder (e.g., yc-charts-code-snippets) in VSCode and make the following changes:

Replace package.json with the following content:

{
  "name": "yc-charts-code-snippets",
  "displayName": "yc-charts-code-snippets",
  "description": "",
  "version": "0.0.1",
  "publisher": "yuanchen-ljx",
  "engines": { "vscode": "^1.56.0" },
  "categories": ["Snippets"],
  "contributes": {
    "snippets": [
      { "language": "javascript", "path": "./snippets/snippets.code-snippets" },
      { "language": "javascriptreact", "path": "./snippets/snippets.code-snippets" },
      { "language": "typescript", "path": "./snippets/snippets.code-snippets" },
      { "language": "typescriptreact", "path": "./snippets/snippets.code-snippets" }
    ]
  },
  "repository": { "type": "git", "url": "https://github.com/ljx94nb/yc-charts-code-snippets.git" },
  "homepage": "https://github.com/ljx94nb/yc-charts-code-snippets/blob/master/README.md"
}

Modify the README.md file (any content is acceptable, but it must exist).

Coding the Snippets

The actual coding consists of writing JSON configuration files, not JavaScript code. Edit the file snippets/snippets.code-snippets with content such as:

{
  "FormTable": {
    "prefix": "ycft",
    "body": [
      "import React from 'react';",
      "import YcCharts from 'xxx';",
      "",
      "function App() {",
      "  const ${1:treeConfig} = {",
      "    // config",
      "    ${2:primaryColumn}: {},",
      "    ${3:columnWidth}: 120,",
      "    ${4:indicators}: [],",
      "    ${5:leftDimensions}: [],",
      "    ${6:topDimensions}: [],",
      "    ${7:topDimensionDataSource}: {},",
      "    ${8:leftDimensionDataSource}: {},",
      "    ${9:dataSource}: {},",
      "    ${10:operatorColumn}: {},",
      "    ${11:filters}: {},",
      "    ${12:actions}: [],",
      "    ${13:downloadCfg}: {},",
      "    // ${14:onSort}: (colIndex, sortOrder) => {},",
      "    // ${15:decorateValue}: (indicatorKey, value) => {}",
      "  };",
      "",
      "  return <YcCharts.FormTable {...${16:treeConfig}} />;",
      "}",
      "",
      "export default App;"
    ],
    "description": "Code snippet for 'yc-charts FormTable'"
  }
}

In the snippet, placeholders like ${1:treeConfig} define tab‑stops; the number indicates the navigation order. Note that there is no space after the colon.

Debugging

Testing a code‑snippet extension is straightforward:

Create a global code‑snippet file in VSCode.

Open the generated example file and enable the snippet code.

Press command + shift + D to open the debug view.

Click the green triangle next to Extension to launch the extension host.

Create a test file (e.g., test.js) in the host.

Type the defined prefix to see the snippet expand (see screenshots).

import React from 'react';
import YcCharts from 'xxx';

function App() {
  const treeConfig = {
    // config
    primaryColumn: {},
    columnWidth: 120,
    indicators: [],
    leftDimensions: [],
    topDimensions: [],
    topDimensionDataSource: {},
    leftDimensionDataSource: {},
    dataSource: {},
    operatorColumn: {},
    filters: {},
    actions: [],
    downloadCfg: {},
    // onSort: (colIndex, sortOrder) => {},
    // decorateValue: (indicatorKey, value) => {}
  };

  return <YcCharts.FormTable {...treeConfig} />;
}

export default App;

Packaging

Run the following command in the terminal to create a packaged binary:

vsce package

Publishing

Publish the extension with: vsce publish After a few minutes, you will receive a confirmation email. You can view download statistics on the marketplace (see screenshots). If you see a 404 page, wait a few more minutes.

Conclusion

Developing a VSCode code‑snippets extension is one of the easiest ways to start building VSCode plugins. Although the actual code is mainly JSON configuration, many pitfalls exist; this guide aims to help newcomers avoid them. The project repository is https://github.com/ljx94nb/yc-charts-code-snippets .