Blog Written by Amuthan Balaji - Developer

Introduction:

Setting up a developer environment can be a challenge but doing it the right way is what matters and by the right way what I mean is to set up everything in a way that boosts the efficiency and productivity of the developer and also eases their work. Here we have given you a bunch of themes and extensions/plugins which help you do just that.

Productivity:

Programming productivity refers to the ratio between the quantity of software produced and the cost (time\money) spent for it. One can say that he\she is more productive by completing more things done on that day, not by filling his/her calendar fully or sitting for long duration and doing nothing. To increase productivity there are certain tools which will make our life easier.

VS Code Intro

Visual Studio Code is one of the top most powerful code editors used by the programming community. As for my experience with VS Code in single word "Awesome". You can do anything and everything you want in your own way with VS Code. Web Development, Machine Learning, Competitive programming etc. It has lots of features: integrated terminal, source version control (GIT), extensions, debugger and much more. I am going to share my setup which increased my productivity level. These upcoming choices are personal preferences, please customize according to your likes, and make a comment of your setup. I am using Git Bash as my default terminal of VS Code. If you want, you can too by following this article

To download VS Code, visit here

Theme

Monaki theme: My favourite theme so far, as I worked and Sublime Text before this resembles the same.

• Cascodia code: After trying different sets of fonts this one looks beautiful for my eyes. To integrate this font style to your editor, follow below articles.

1. To download Cascodia Code Font: Font Download
2. To integrate Cascodia Code into Windows: Integration

• Material Icon theme: In the extensions tab on the right search for "material icon theme" and install. Boom you have changed from boring file icons to exciting icons according to your file extensions.

Plugins \ Extensions

• Live server: To launch a local development server with live reload feature for static & dynamic pages. So, you don't want to locate the file and double click to open and also reloading is automated whenever a change appears on the file, to get the latest changes. To open live server 3 ways,

a. In the status bar, there will be an option saying "Go live", clicking on it will open live server

b. Right click inside the file, and in the context menu you will see an option "Open with Live Server" c.

c. (My favourite) Shortcut key: Alt + L and Alt + O

• Live share: Live Share enables you to quickly collaborate with a friend, classmate, or professor on the same code without the need to sync code or to configure the same development tools, settings, or environment. To get started with using Live Share in VS Code, you'll need to download the Live Share Extension Pack from the Extension Marketplace. More details here
• Prettier: Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary. To install this, search Prettier in the extensions tab and click install. After installing set, it is the default formatter by changing in settings. Additionally, search for format on save on settings and enable it. So, every time you hit ctrl + s, your code gets pretty. More details here.
• Bracket Pair Colorizer: This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. So, you can now reduce the confusion that you closed that bracket or not.More details here (https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
• Auto Rename Tag: When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.
• Color Highlight: Highlights the web colors in your editors.
• Todo Tree: This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO. Found TODOs can also be highlighted in open files. 
• Code Snap: Take beautiful screenshots of your code in VS Code! Features
• Quickly save screenshots of your code

1. Copy screenshots to your clipboard
2. Show line numbers
3. Many other configuration options

• Peacock: Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor. Open Extensions sidebar panel in Visual Studio Code and choose the menu options for View → Extensions. Search for Peacock. Click Install. Click Reload, if required.
• Laravel Extension Pack (Laravel developers): This extension pack is set of 10 extensions which will help Laravel developers. In the extensions tab search for Laravel extension pack and click install. By using this extension Laravel development has been made easier for me.
• Vetur (Vue Js Developers): This extension enables Vue tooling for VS Code. This is packed with a lot of features like:

1. Syntax highlighting
2. Semantic-highlighting
3. Snippet
4. Emmet
5. Linting \ Error Checking
6. Formatting

and much more. To use this search for Vetur in the extensions tab and click install.

Conclusion:

These productivity tools help you achieve more in less time span and ease your workload a lot. These are the same tools we use at icrewsystems and they have majorly impacted our workflow for the better and made us more efficient and productive. Check out our other blogs for more informational hacks and tools to improve your development lifecycle.

Have an idea? Let us make that a reality. Icrewsystems can make stunning modern websites for your needs. Contact us and we will see what amazing work we can do on your idea.