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
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.