Quick Complete Guide : VS Code Extensions

My VS Code Extensions : For Salesforce

1. Quick Metadata Backup (SFMDB)

VS Code Extension for Metadata Backup with Single Command in VS Code Command Palette.

you can download from Microsoft Marketplace : https://marketplace.visualstudio.com/items?itemName=SanjayRathore.quick-salesforce-metadata-backup

2. Quick Salesforce Apex Class (SFAC)

VS Code Extension for Salesforce Apex Classes with Single Command in VS Code Command Palette.

you can download from Microsoft Marketplace : https://marketplace.visualstudio.com/items?itemName=SanjayRathore.quick-salesforce-apex-class

What are extensions?

It's not a secret that VS Code is becoming a very popular choice as editor for many developers.VS Code extensions are awesome, they provide amazing convenience that is limited only by your imagination.
One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. If you're a web developer, you won't be able to live without installing these extensions!

In this article we’ll take a quick tour of the tooling now used to help create Visual Studio Code extensions, and show you how to get started with a simple extension that you can then build out on your own. Make sure you have "Node.js" and "Git" installed and config correctly, then install Yeoman and VS Code Extension Generator with:

Steps are following (All cli command run in terminal) :

1. Install Yeoman

npm install -g yo generator-code

2. Creating the extension project

yo code

You will then get asked several questions to setup the project.

• What type of extension do you want to create? New Extension (TypeScript/Javascript etc)
• Name: The public name of your extension; it can be anything you want.
• Identifier: The internal name for your extension.
• Description: Any text to describe the extension; keep it brief for now, as you can always alter this later.
• Enable JavaScript type checking: Set this to No for now; you can always alter this later if you need it.
• Initialize a Git repository: Select Yes, except in the unlikely event you’re not using Git to manage your projects.
• Which package manager to use: Choose Yarn or NPM; we’ll continue using yarn here.

3. Build out your new Visual Studio Code extension

The generator-code project creates the most basic wiring and plumbing needed for a functioning extension. If you look in the extension directory, you’ll see several files:

• vsc-extension-quickstart.md provides some instructions for creating and using the extension.
• extension.js is the actual code for the extension. The entire extension doesn’t need to fit into this one file, but this is the default entry point for the extension.
• jsconfig.json controls how the project’s JavaScript code is handled by the Node.js runtime. You generally don’t need to change anything here.
• package.json contains the packaging information for your extension. Some of the fields, like name or description, should be familiar and can be edited as needed. The main field describes the entry point for the extension; by default it’s extension.js, but it can be changed if needed. However, the devDependencies fields should be left as-is.
• README.md is a boilerplate README file for your extension that you can customize to suit.
• CHANGELOG.md is a blank change log for documenting what you fix or add as you go.

Diving into the code : After project creation is completed template code done by yo code

The template code defines a command called Hello World which will display a "Hello World!" notification at the top of your VS Code instance:

This is made possible by three connected snippets of code in the package.json file and the extension.ts file.
That command field value extension.sayHello, which is the key for this command. The title is the text displayed in the Command Palette.
VS Code that your extension contributes a command by adding it in package.json under the contributes field, as an object in the commands array:

"contributes": {
        "commands": [
            {
                "command": "extension.sayHello",
                "title": "Hello World"
            }
        ]
    }

you will have to define the events which will activate your extension. In our case, we say that our extension will be activated when the extension.sayHello command is run.
Another thing which has to be added to package.json is activationEvents:

"activationEvents": [
        "onCommand:extension.sayHello"
    ],

when the activationEvent defined above is emitted. This happens when we run Hello World in the VS Code Command Palette.
To actually implement the command itself, we have a src/extension.ts file, which exports an activate function:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // do stuff here
}

Finally,The command is also added to the context.subscriptions array:

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand(
        'extension.sayHello', 
        () => { vscode.window.showInformationMessage('Hello World!'); }
    );

    context.subscriptions.push(disposable);
}

Open the code in VS Code

code ./helloworld

Run the extension

inside the editor, press F5. This will compile and run the extension in a new Extension Development Host window.
Run the Hello World command from the Command Palette (Ctrl+Shift+P) in the new window. After run command you should see the Hello World notification showing up.

Developing the extension

Let's make a change to the message:

• Change the message from Hello World to Hello VS Code in extension.ts
• Run Reload Window in the new window
• Run the command Hello World again

You should see the updated message showing up.

Debugging the extension

VS Code's built-in debugging functionality makes it easy to debug extensions. Set a breakpoint by clicking the gutter next to a line, and VS Code will hit the breakpoint. You can hover over variables in the editor or use the Run view in the left to check a variable's value. The Debug Console allows you to evaluate expressions.

Publishing Extensions

Read Step in url : https://code.visualstudio.com/api/working-with-extensions/publishing-extension

Happy Sharing...

Everyone has their own favorites, so please feel free to share yours in the comments below!