Building a VSCode Extension: Part Two

Now that I have an idea of what I am going to build, It's time to set up the repository.

VSCode has a straightforward method for bootstrapping a new extension.

Making sure all the prerequisites are installed

The prerequisites for developing an extension is having Node.js and Git installed on your machine.

If you need to install Node, I recommend using NVM if you are on Linux or macOS and NVM-windows for windows.

Disclaimer: I develop on Linux, so I will be using those commands.

Install NVM using

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Restart your terminal then install node using

# Current LTS version while writing this is v12
nvm install 12
# I recommend setting this version as default
nvm alias default 12

Bootstrapping the extension repository

Now that node is installed to the latest LTS, it's time to bootstrap the extension repository.

Navigate to wherever you want to create the repository. For me, it's in a folder called workspace

cd ~/workspace

VSCode offers a Yeoman template to generate a basic extension.

Install the required NPM packages globally for Yeoman and the VS Code Extension template. After its installed, you can run the generator.

# Install the npm packages globally
npm install -g yo generator-code

# Running the generator
yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension?
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension?
# ? What's the description of your extension?
# ? Initialize a git repository? Yes
# ? Which package manager to use? yarn

I decided to use yarn because I normally use NPM but I wanted to try something new.

Since I am hosting the code on GitHub, I create a new empty repository there. Then I linked my GitHub repository with my local one.

cd vscode-todo-task-manager/
git remote add origin git@github.com:CodeByCorey/vscode-todo-task-manager.git

git commit -am 'initialize extension'

git push -u origin master

Starting the development environment

Now that the repository is set up, time to run it locally.

# Since I am already in the project directory
code .
# the . means it will open the current directory in vscode

Once VScode is open, press F5 to compile and run the extension.

To verify it is running, hit (ctrl+shift+p) and run the hello world command.

Time to dig into the API docs

Now that I have the base project running, I need to start reading the API Docs to figure out how to start implementing the task manager.

I might also look at some open-source extensions to see how they implement specific features. I tend to learn a lot from reading open-source projects.

Building a VSCode Extension: Part Two

Comments (2)