DEV Community: Bivor Faruque

Top VS Code Extensions I use for Productivity

Bivor Faruque — Sun, 26 Feb 2023 12:40:03 +0000

Hello Developers,
I am Bivor and I am working as a developer specializing in the Backend side. When I was starting my career as a developer I learned about VS Code. Though some of you already know, let me tell you about it …

VS Code

Visual Studio Code (VS Code) is a popular and highly customizable text editor among developers for its productivity features. One of the biggest benefits of VS Code is the ability to install extensions, which allow users to customize their workflow and improve their productivity.

Ability to Install and Use Extensions!!!

When I first installed VS code I like most people didn’t even know how to use it. I just wanted to write some code LOL. However, after finding that it can install extensions and about the marketplace of extensions, I immediately went on shopping. I played around with loads of extensions, watched a lot of YouTube videos, and read blog posts about what extensions others use that would help me to work smarter. As I am sure you all will too …

In this post, we will look at some useful VS Code extensions that help me save time and work more efficiently. I hope it helps you guys out,

Live Server

Live Server is a VS Code extension that allows developers to preview their web pages in real-time. This extension can be especially useful for web developers who need to see their changes reflected immediately. Live Server can be activated by clicking on the "Go Live" button in the status bar, and it will automatically refresh the browser every time you save your changes. This extension also supports live reloading, which means that changes made to linked CSS or JavaScript files will also be reflected in the browser without the need to reload the page.
Here is also a youtube video that might help,

https://www.youtube.com/watch?v=y4qqQeUDCBQ&ab_channel=JulioCodes

GitLens

GitLens is a powerful VS Code extension designed to make working with Git repositories easier and more efficient. It provides a wealth of information about the code you are working on, including commit history, blame annotations, and code authorship. With GitLens, you can quickly see who made a particular change, when it was made, and why. This extension also provides a variety of useful features, such as code diffs, branch comparisons, and pull request reviews, all from within the VS Code editor.

If you are working in a team, which will happen more often than you think GitLens will help you a lot. Trust me on this,

Here is a youtube video that might help you,

https://www.youtube.com/watch?v=UQPb73Zz9qk&ab_channel=GitKraken

Better Comments

Better Comments is a VS Code extension that helps developers write more readable and maintainable code by formatting comments in a way that distinguishes them from regular code. This extension supports different comment types, such as alerts, queries, and explanations, and it color-codes them to make them stand out. Better Comments can also be customized to match your preferences, allowing you to create your own comment types and formatting rules.

Here is a YouTube video,

https://www.youtube.com/watch?v=WHwi6-hzJhA&ab_channel=CoolITHelp

Prettier - Code formatter

Prettier - Code formatter is a VS Code extension that automatically formats your code according to a set of predefined rules. This extension supports multiple file types, including JavaScript, TypeScript, CSS, HTML, JSON, and Markdown. With Prettier, you can save a lot of time and avoid the hassle of manually formatting your code. This extension also supports custom formatting rules, allowing you to tailor the formatting to your specific needs.

Though I don’t like it that much now [Just my personal opinion], it helped me a lot in the past

Here is a YouTube video,

https://www.youtube.com/watch?v=__eiQumLOEo&ab_channel=CodingWithAdam

Honorable Mention

Bracket Pair Colorizer 2 [Deprecated]

Though it is Deprecated after 2022 I love it,
Bracket Pair Colorizer 2 is a popular VS Code extension that helps developers read and navigate through code more easily. This extension color-codes the brackets in different colors, making it easier to distinguish between opening and closing brackets. This can be especially helpful when working with nested code blocks. Bracket Pair Colorizer 2 also supports custom bracket colors, making it easy to customize the extension to match your preferences.

To colorize in VS Code now you will just have to paste this in your settings.json

"editor.bracketPairColorization.enabled": true

ESLint

ESLint is a popular VS Code extension that helps developers write cleaner and more consistent code by identifying and highlighting errors and code smells in their code. This extension integrates seamlessly with VS Code and provides real-time feedback on your code as you type. ESLint supports a wide range of rules, including best practices, coding style, and security issues. With ESLint, you can ensure that your code is of the highest quality and conforms to the best coding practices.

Note: If you are just starting your development journey, do not use it now. Use it after you are a little bit comfortable with it.

Here is a YouTube video,

https://www.youtube.com/watch?v=eMgLHOrDkAs&ab_channel=WEBCIFAR

Conclusion

In this post, we have looked at some VS Code extensions that can help developers save time, work more efficiently, and write better code. Whether you need to navigate through code more easily, preview web pages in real-time, work with Git repositories, write more readable comments, or automatically format your code, there is likely an extension that can help. These extensions can significantly improve your productivity and help you customize your workflow to match your preferences. So, go ahead and explore the vast library of VS Code extensions to find the ones that work best for you!

Why DTOs are a Must-Have in Nest.js API Development

Bivor Faruque — Sat, 28 Jan 2023 11:17:51 +0000

DTO, or Data Transfer Objects, are a crucial concept in building robust and maintainable APIs, especially when using Nest.js. They serve as a way to structure and validate the data that flows between the client and the server.

One of the main advantages of using DTOs in Nest.js is that they allow for a clear separation of concerns between the client and the server. By defining a specific set of data that the client can send to the server, and a specific set of data that the server will send back, we can ensure that the API is only handling the data that it needs to. This can help to reduce the complexity of the API and make it easier to maintain.

Here is an example of how to define a DTO in Nest.js:


import { IsString, IsInt } from 'class-validator';

export class CreateProductDto {
  @IsString()
  readonly name: string;

  @IsInt()
  readonly price: number;
}

DTOs also provide a way to validate the data that is being sent to the API. By defining a set of rules and constraints for each DTO, we can ensure that the data that is sent to the API is in the correct format and contains all of the necessary information. This can help to prevent errors and bugs in the API, and make it more reliable and robust.

For example, in this CreateProductDto, we are using the class-validator package to ensure that the name property is a string and the price property is an integer.

Another important aspect of DTOs is that they can be used to transform the data that is sent to the API. For example, we can use DTOs to convert data from one format to another, or to add or remove fields from the data. This allows us to have more control over the data that is being sent to the API, and can help to make the API more flexible and adaptable.

In summary, DTOs are a powerful tool for building robust and maintainable APIs in Nest.js. They allow for a clear separation of concerns between the client and the server, and provide a way to validate and transform the data that is sent to the API. By using DTOs in your Nest.js API, you can ensure that your API is reliable, flexible and easy to maintain.

Alias for git add, commit and push all together.

Bivor Faruque — Tue, 09 Aug 2022 11:49:30 +0000

As we are developers we love to automate stuff. However, I feel that our use of git is quite a manual process and takes our time. In this article, I am going to discuss how I use alias to help me. Hope this is useful to you.

Alias for add, commit and push

So we all remember the tedious commands for pushing our code to a remote git branch whenever we make any changes to our code we have to use,

git add . //To add all your changes 

git commit -m "my commit" //commit the changes that are made with a message

git push //push the commit to your repo

It seems like small but it is a very tedious process once you do it over and over again. Thus, comes the following alias to do add, commit and push it all in one command

git config --global alias.cmp '!f() { git add -A && git commit -m "$@" && git push; }; f'

After running this command in your cmd. You can just do the following to add, commit and push your changes.

git cmp "my commit"

Alias for add and commit

However, sometimes we just need to do a local commit.

git add . //To add all your changes 

git commit -m "my commit" //commit the changes that are made with a message

No worries, I am lazy too,

git config --global alias.ac "!git add -A && git commit -m "

After running this command in your cmd. You can just do the following to add and commit your changes.

git ac "my commit"

Thanks for reading, and happy coding!