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:

<code>{
  "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"
}
</code>

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:

<code>{
  "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'"
  }
}
</code>

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).

<code>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;
</code>

Packaging

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

<code>vsce package</code>

Publishing

Publish the extension with:

<code>vsce publish</code>

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 .