What is it

At this VS Code Hackathon, I created an extension called What is that helps beginner programmers become familiar with certain auto-generated project files that may seem confusing and daunting at first. For instance, when you create a React project for the first time, you may be wondering, what is package.json? Or when you are browsing a GitHub repo for the first time, you may wonder, what is a README file?


As an avid programmer, I like to understand how all the files work together and what all the different language syntax means in a project. Since some projects are just too difficult and complicated to get started manually, programmers tend to use some pre-configured code and settings files. However, starting a project with dozens of files already created, and sometimes in languages that you may not even know, it can be daunting and confusing. That's why I find it hard to jump right into a project when there is so much starter code and so many auto-generated files that I don't even understand. The What is extension was created so that other new programmers can learn briefly about these files and feel less overwhelmed when starting a new project.

How it works

The file options currently supported are the following: package.json package-lock.json README.md .gitignore robots.txt

When one of these files appears in your project, you will have the option to learn more about the file by right-clicking on it and selecting the feature What is. A brief description of the file will then be shown in a message. This extension is a quick, easy way for new programmers to become more comfortable with their projects.

How I built it

This extension was built using the VS Code Extension template for TypeScript. The extension contains a single command, What is, that appears in the menu when a file is right-clicked. When the command is selected, a function is run that parses the file name to determine which of the file options it is. Then a description of the file is retrieved from a predefined mapping. Finally, a message is shown to the user with the description of the file.

Challenges I ran into

One challenge I ran into was figuring out how to determine what type of file the user clicked on. I wanted to make a single, universal command What is to increase readability and improve the user experience. Thus, the determination of the file type would need to be done on the backend. However, there is no method to get just the file name as opposed to the whole path of the file that was clicked. So instead, I decided to use a handy tool in JavaScript, endsWith() to check which of the file options the path ended with.

Additionally, I ran into a lot of unfamiliar errors since this was my first time using TypeScript. I had an issue with declaring types in a nested object and didn't realize that I had to create interfaces and abstract types. Through browsing the web, I was able to find the right syntax.

Another challenge was just navigating and learning the VS Code Extension API. This was my first time building a VS Code extension and at times I was confused about what to put where in the package.json file. Some commands needed to be in the activationEvents and the contributes commands, and a separate explorer menu. But, as I worked through the project, I caught on quickly and feel more prepared to build a new extension in the future.

Accomplishments that I'm proud of

I am proud of myself for completing this project. I got stuck a lot along the way and was feeling the time pressure towards the end. I had a lot of good ideas, but was only able to build something simple. Nonetheless, I learned a lot, I had fun, and I am excited to continue building in the future.

What I learned

I learned how to build a VS Code extension, navigate the API, work with a package.json file, and publish my extension to the VS Code Extension Marketplace. I also got to work with TypeScript for the first time.

What's next for What is

In future updates, I would like to add support for more types of files that beginner programmers often find confusing as well as maybe generalizing the support to file types/languages rather than specific file names. For instance, if someone was coding in Python for the first time, they could right-click on a .py file, select What is, and read a brief description about Python.

Built With

Share this project: