The work of a frontend developer can be divided into a wide variety of tasks. Such as styling to create UI (User Interface) and UX (User Experience), implementing movement and animation, creating, editing and deleting data through API requests, and handling errors in sent requests. Here at Moonward, we use a range of tools to do these tasks more efficiently, as jumping in and out of windows can take the momentum out of your day.
Visual Studio Code (VS Code) was created by Microsoft and is one of the most powerful source code editors available. It makes developers lives easier, by providing tools like IntelliSense, code completion and debugging.
VS Code extensions allows you to add languages, debuggers, and other elements to your installation and support your development workflow. VS Code's rich extensibility model lets extension authors plug directly into the VS Code UI. It contributes its functionality through the same APIs used by VS Code.
There are thousands of extensions in the Visual Studio Marketplace.
Throughout this article, I would like to mention some extensions that have been vital to my frontend development journey.
GitLens makes it easy to see who wrote the code you are looking at, who made the commit and how the code has changed in VS Code. When you are trying to get into your development flow, this matters, otherwise we would need to run numerous Git Commands in the terminal. Because the transition of each branch is visualised, when you are developing a product individually, you can check the details without going to Github’s page. Or when you are developing with multiple people, you can see the editor's name and the time of committing next to the committed code.
If you can’t tell who wrote the code, you don’t know who you are going to ask about the code intention.
As you can see in the image above, GitLens adds sidebar views to provide additional rich functionality. The default layout (location) of these views can be quickly customised via the GitLens.
Here are just some of the views that GitLens provides:
Commits View
You can see a list of commits in the current branch as well as details of past commits.
File History View
A view that visualises the update history of the current open file. You can also check the details of the commit here as well as the commit view.
Branches View
This view allows you to see a list of all local branches and marks the current branch with a tick.
Remotes View
This view allows you to visualise, explore and manage remote repositories and branches.
Git Graph is a tool that visually represents the history of commits and branches called the Git tree.
Gitlab and Github can also visualise Git history chronologically for each branch, but if you try to see this in a local environment, you have to do something like git log --graph --oneline, which can be hard to see.
Git Graph not only visualises the history but also allows various commands to be used on the history.
If you want to see the contents of a commit, click on the dot to see the changed files, and click on it to see the diff. It's convenient to intuitively check the contents of the commit
After stashing, it is easy to check what is stashed later. It is intuitive because it can be done in the same way as confirming a commit
While testing APIs, we often have to leave VS Code and head over to other API Clients such as Postman and Insomnia. Jumping between projects wastes time and productivity. With the RapidAPI Extension, you can test APIs quickly without leaving VS Code.
At Moonward, we use TypeScript for the vast majority of our projects, having this extension auto-generate return types is beyond helpful.
The basic usage of Rapid API Client is the same as Postman, you can set the URL, specify the method of the request, pass the value to the body, and set query parameters. You can also name and save API requests, so once you set it up, you can return to the API at any time.
This function is one of the features unique to Rapid API Client. Rapid API will automatically generate the return type of the endpoint in a number of popular programming languages (Python, Swift, and TypeScript). This feature is very useful when working on larger projects as the return objects can become quite complex.
I’ve only mentioned three extensions in this article, but there are many more on the Visual Studio Marketplace that can streamline your workflow and make you a more efficient developer. I’d recommend regularly checking the marketplace to see if the work you’re doing can be replaced by a VS Code extension.
Links:
Visual Studio Marketplace: Visual Studio Marketplace
Gitlends: GitLens — Git supercharged (amod.io)
Git Graph: Git Graph - Visual Studio Marketplace
RapidAPI Client: RapidAPI Client - Visual Studio Marketplace
If you want to know more about what Moonward can technically do for you and your project, book in for a free 30-minute strategy call here.
.svg)
.svg){kind=logo}
