When the marketplace extensions are not enough for you, there’s only one choice: to dive into the world of VS Code extension development. With it’s simple yet powerful API that will let you customize your experience whatever you like.
VS Code presents a highly customizable experience as a code editor. There are thousands of free extensions for you to choose. The VS Code team made it really easy to create your own extensions.
Extensions in VS Code are implemented using an Extension API. It’s so powerful that even some base features of the code editor are made with it. The Extension API can change almost everything from VS Code: looks, add components and support new programming languages.
This API is not complicated, starting to work with it is really simple.
The First Steps
Start by installing Yeoman and the VS Code Extension Generator. Input this commands,
npm install -g yo generator-code
Then execute the following command,
This will create a new folder. Open it VS Code and press F5. This will run the default new extension on a new window. Press ctrl+p and write,
Changes to the behaviour of the extension can be made by changing the file extension.ts.
How Does It Work?
Mainly it makes use of three things: Activation Events, Contribution Points & VS Code API.
Activation Events. Events that cause your extension to become active.
Contribution Points. Static declarations made in the package.json
├── .vscode │ ├── launch.json // Config for launching and debugging the extension │ └── tasks.json // Config for build task that compiles TypeScript ├── .gitignore // Ignore build output and node_modules ├── README.md // Readable description of your extension’s functionality ├── src │ └── extension.ts // Extension source code ├── package.json // Extension manifest ├── tsconfig.json // TypeScript configuration
The package.json file forms the Extension Manifest. Its most important fields are,
- `name` and `publisher`: these are used to form a unique ID for the extension.
- `main`: the entry point file for the extension.
- `activationEvents` and `contributes`: the Activation Events and Contribution Points are defined.
- `engines.vscode`: specifies the minimum version of VS Code API that your extension is compatible with.
The Extension Entry File exports two functions, `activate` and `deactivate`. `activate` is executed when your Activation Event happens. `deactivate` gives you a chance to clean before your extension becomes deactivated.
Remember to check if there’s an existing extension before going out there and making your own. You can find it in an Open Source project, and you could give back something instead.
For more info on this topic → VS Code API
If you have any questions feel free to drop me a line at [email protected].