How to Build Your Own VS Code Extension Pack 🚀

Prerequisites

Node.js and npm installed
Visual Studio Code

Setup Instructions

1. Install Required Tools

Install Yeoman and VS Code Extension Generator globally:

npm install --global yo generator-code
yo code

2. Generate Extension

Follow the generator prompts:

*-----* ╭──────────────────────────╮
 | | │ Welcome to the Visual │
 |--(o)--| │ Studio Code Extension │
 `---------´ │ generator! │
 ( *´U`* ) ╰──────────────────────────╯
 /___A___\ /
 | ~ |
 **'.**_.'__
 ´ ` |° ´ Y `

Select these options:

. Extension type: New Extension (JavaScript)
. Extension name: Your Project Name
. Extension identifier: your-project-name
. Description: Your Description
. Enable JavaScript type checking: No
. Initialize git repository: No
. Package manager: npm

3. Configure Extension Type

Update package.json:

{
    "categories": [
        "Extension Packs"
    ],
    "extensionPack": [
        "aaron-bond.better-comments",
        "alexcvzz.vscode-sqlite"
    ]
}

4. Install VSCE

Install Visual Studio Code Extensions tool:

npm install -g @vscode/vsce

5. Azure DevOps Setup

LINK
Create a Microsoft Azure DevOps account:

. Visit Azure DevOps Sign Up
. Complete registration

6. Generate PAT Token

1- Go to User Settings
2- Select Personal Access Tokens
3- Click New Token
4- Select Marketplace > Manage under scopes
5- Create and save your token

7. Create Publisher Account

LINK
1- Visit VS Code Marketplace Management
2- Click "+ Create Publisher"
3- Fill required information
4- Submit form

8. Update Package.json

Add your publisher ID:

{
    "name": "my-pack",
    "publisher": "your-publisher-id"
}

9. Update README.md

10. Deploy Extension

vsce login your-publisher-id
vsce publish

lionPack

badr