Like other newbies, I also choose Notepad++ as my first code editor. This is probably one of the simplest IDEs for programming. Gradually the demand increased, I tried Brackets, Atom, then Visual Studio Code. And eventually VSCode became my favorite editor. It impressed me with its modern user interface, many extensions, and great features like built-in Git and terminal. The main purpose of this blog is not to compare different IDEs. , but rather to discuss my experience with VSCode. Therefore, in this article, I will go into each of the following aspects in detail:

VSCode Brief Introduction VSCode ThemesExtensionsHow I take advantage of VSCode features to improve my productivity.

What is VSCode?

Visual Studio Code (VSCode) is a source code editor developed by Microsoft that can run on Windows, macOS, and Linux. It’s free, open-source, and offers debugging support and built-in Git version control, syntax highlighting, code snippets, and more. VSCode’s user interface is highly customizable, as users can switch to different themes, shortcuts, and options. VSCode was originally announced in 2015 as an open source project that was released hosted on GitHub before releasing to the web a year later. Since then, Microsoft’s code editor has grown in popularity rapidly. In the Stack Overflow 2018 Survey, VSCode was ranked as the most popular development environment with about 35% of the 100,000+. Better yet, that’s about 39% in the web development space. And with monthly updates, users can expect to enjoy an even better experience – bug fixes, stability and performance gains are frequently promoted.

Theme: Colors and fonts

If you are also interested in IDE themes and the idea that beautiful themes bring comfort when coding, then you are like me. For me, finding a suitable font and theme color is very important. Personally, I like a dark theme and hate VSCode’s default Consolas font on Windows. So the Monokai theme and the FiraCode font are my current choices. This combination results in high contrast that I find very pleasant to work with.

READ MORE  Why Choose Offset Printing Technique


To install the theme, click the Settings icon => Color Theme => Choose a theme you like. You can also try OneDarkPro, a pretty theme.

Extensions (Extensions => Search => Install)

Here are some of my favorite extensions:

Bracket Pair Colorizer: allows to identify square brackets by color



HTML Snippets: add rich language support for HTML Markup such as auto-close tags.Live Server: launch a localhost with live reloading features for your HTML or PHP web pagesMarkdown Preview Enhanced: run a live server for your markup files.Prettier: a nicer format for your JavaScript/TypeScript/CSS snippets.

UI Options


You can customize almost everything, from the font-family and font-size of your code to the line-height, by:

Go to User Settings (Ctrl + ,)Search for keywords related to your desired customizationClick the Edit button on the left side of the setting and select Replace in SettingsChange the value of the setting you just selected.

Currently I set fontSize to 14, lineHeight to 22 and tabSize to 3.

Things I wish I knew sooner

In addition to these themes and extensions, I wanted to share with you how I use VSCode’s amazing features to increase productivity. These are all things that I didn’t know when I first started and that would be very helpful to leverage and facilitate my workflow.

Integrated Terminals

The more time you spend developing software, the more important Terminal becomes. As a JavaScript developer, I use Terminal to install packages, run a server, or even push changes in an existing repository to GitHub. At first, I mainly did those tasks with Windows. Command Prompt or Git Bash. If you use Windows, then you probably know how annoying and frustrating CMD can be. Git Bash is a tool great, but switching between applications while you are working is not really a pleasant experience. VSCode really solved this problem for me with its awesome terminal.

READ MORE  Uses of Beeswax, Where to Buy Beeswax

Watching: What is Visual Studio Code

See also: What is Uk – And What countries are Uk, where?

See also: What is Mrs – Distinguishing between Miss, Mrs

And the cool thing is you can easily set it up to work just like Git Bash, but right inside VSCode! So you have a more logical combination. To access the VSCode terminal, use Ctrl + ` (to the left of your 1 key). Then Terminal will pop up.


From here, you can do a lot of cool things like create a new terminal or delete an existing terminal. You can also separate them or put them side by side for viewing.


Source Control (Git)


When you are working on a repository and constantly need to make changes, do you usually go to the terminal to make recent changes? VSCode gives you a great built-in tool to control your versions. By clicking on the Git icon on the left or using Ctrl + Shift + G (Windows), you can easily access it. SourceControl. Here you can do all the work with Git. Isn’t it convenient?

How has VSCode improved my productivity?

After working with VSCode for a while, I really believe its core value is to accommodate multiple features right in one environment. All my needs are perfectly met by VSCode.


Let’s say I have some ideas working on a Music app created by React. I usually start a project by creating an empty folder called music_react. Then I can instantly open this project in VSCode with a single click. When I’m in my working project, I can quickly create files and folders with shortcuts in the side panel. left. In this project I want to use the create-react-app feature so I will need to install that package. I open my terminal by typing Ctrl + `. To my surprise, the terminal automatically navigated to my correct directory. No need to change directory anymore. After entering the command line to install the npm package, all I needed to do was wait until all the dependencies were installed.

READ MORE  Kaolin Industrial Application



I also want to publish my project on GitHub, so maybe I should initialize a Git repository at first. After the packages were installed, I typed the Git initialization command right in my terminal.


Once Git is successfully installed, I can commit all pending changes right in the Source Control on the left side. After that, I can continue working on my project as usual. . Besides, I can push all the changes to GitHub from my terminal if I want to.


So that’s my normal workflow in VSCode environment. This may vary slightly depending on how you work. A back-end developer might have a completely different workflow than mine. However, if you’re a front-end developer who is new to VSCode and you want a pre-review, then hopefully this article is for you. This gives you insight and helps to improve your productivity. After all, my biggest inspiration for writing this little tutorial was because I couldn’t really find any thorough reviews of VSCode for newbies. Therefore, hope the article can bring you value.