# Create Extensions for VS Code - Part 1

I wanted to develop a **VS Code extension ** to solve one of my daily problems, so I started to look at  [VS Code API](https://code.visualstudio.com/api)

They have really awesome documentation and sample extensions which are really helpful.

>I could run my first Hello world extension in less than 5 minutes.

It is very easy and super simple, come on let's see how to develop one.

### Installation
 Install the following Node modules for Kick Starting new extension [Yeoman ](https://yeoman.io/)  and  [VS Code Extension Generator ](https://www.npmjs.com/package/generator-code)

`npm install -g yo generator-code`

### Create New Extension

Execute this command  `yo code`  and select New Extension -Typescript (Which is most recommended one) to create a new extension then answer questions. It will create a Hello World **boilerplate ** and also Install required node modules.

![yo code.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1561096703338/0BeEQrUoe.png)


#### Extension File Structure
This auto-generated extension has dozen of files, refer following images to know more about file structure.

![atonomy.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1561097102805/Uxir8exLD.png)

But we are going to focus on only two files in major which are 

- src/exntension.ts
- package.json

### Run Extension

Running extension is pretty simple, Just go to debug menu from the left side menu or hit  `Ctrl+Shift+D`  keybinding, Then click **Run Extension**.

It will open a new window where your extension will be running, To confirm that you can see "Hello World" on the right bottom.

![Tada](https://media.giphy.com/media/OVXDh4cOaLawM/giphy.gif)

### Okay, But How Does it work?

VS code Extension is all event-based, we need to define all our commands (actions) in package.json

#### Package.json

you can **package.json ** files in the root dir, which holds the all the events inside of `contributes`  -> `commands`, In this case, we have only one command which is `extension.helloWorld`

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

We enable our events by adding our commands into `activationEvents`

```
"activationEvents": [
	"onCommand:extension.helloWorld"
]
```

`main` property holds file path which will be executed at first, once the extension is activated

```
"main": "./out/extension.js"
``` 

#### Extension.ts

Good to see that, this file has very detailed comments for better understanding.

- `function activate(context: vscode.ExtensionContext)` - This Function executed at first when extension gets activated and our all business logic will lie here.

- `vscode.commands.registerCommand('extension.helloWorld', () => {})` - Registering `extension.helloWorld` event with callback function.

- `vscode.window.showInformationMessage('Hello World!');`  - It makes message box on the right bottom

Finally, we should push our registered command into `context.subscriptions`

**Congratulations for your first vs code extension ** 🎉🎉🎉🎉🎉

![Made it](https://media.giphy.com/media/apdfsXZENhMsM/giphy.gif)

In the next article, I will explain how to implement the most common extension feature such as menus, settings, keybindings and status message bar.

If you have any issues or question please comment, I am glad to help you :D

Thank you !!!
![Thank you](https://media.giphy.com/media/l2R0eYcNq9rJUsVAA/giphy.gif)


#### Read Part two on  [Dev Blog](https://thamaraiselvam.com/create-extensions-for-vs-code-part-2-cjxa87y7t001mvzs11rgng6th)  or in  [Dev.to](https://dev.to/thamaraiselvam/create-extensions-for-vs-code-part-2-1gj7)