PC tricks, Popular PC Apps, Windows apps, windows tutorial

Visual Studio Code Tutorial – Beginner to Advanced

Visual Studio Code is a code editor designed and made by Microsoft.  This is a very powerful code editor.  In…

Visual Studio Code is a code editor designed and made by Microsoft.  This is a very powerful code editor.  In Visual Studio Code Tutorial we will see some of the basics, extensions, settings and some intellisense features.  This is created by Microsoft but it is cross-platform.   It is available in Linux, Mac and of course windows.  It is also Open source.

It can be easily installed from code.visualstudio.com.  The installation is very self-explanatory, just keep clicking on next and Visual Studio Code will get installed.

Welcome page:

This is the welcome page.  This offers options that are self-explanatory.  The welcome page has the following options:

  • One can open a file.
  • One can even launch a folder.
  • Add a new workspace.
  • The recent heading offers the projects that you were working on recently.
  • And the Help heading offers the necessary introduction for a beginner to get started with.
  • On the right side, Visual Studio Code has many other options to customize and learn more from Code.

To start off let’s look at the sidebar on the left-hand side.

  • The first icon is Explorer and it has various options such as to view the currently open folder.  And also to open a different project file.
  • The second icon lets the users Search.   The users can search for files, search in the fils. Search and replace in the files also.  The users can include and exclude certain files from the search.  And more.
  • The Third icon is Version Control icon.  Once we initialize, we can push it to a Git repository.  There is a really good version control integrated with Visual Studio Code.
  • The fourth option is debugger and it has some really nice debugging capabilities considering it is just a code editor.
  • The fifth icon is the extensions.  By default, it shows some recommended extensions.  We can also search for some extensions that we like and install it.
  • At the bottom of the left pane, we have the cog icon.  It has various useful settings.
visual studio code tutorial
visual studio code tutorial

If you press the command pallet, you will find just about everything over there.  Use f1 as well to bring up the command pallet.

If you type open you will see that it shows everything that is related to the word as shown in the figure below.

If you are not sure what you are looking for using the UI, you can use the command pallet to find it.

Settings:

You can launch the settings window using File>Preferences>Settings or by using the keyboard shortcut ctrl+,.  The settings is a huge JSON file.  The settings are stored as key-value pairs.  There is a key for the option and the value against it.  If you want to customize a setting, you just pick the setting from the file on the left and put it in the file that is on the right. This will allow all the user settings to be present in one single file rather than scattered across the huge JSON file.

Let’s see the settings in action.  copy paste the

“editor.fontSize”: 14
on to the pane on the right side and press save.
visual studio code tutorial
visual studio code tutorial
Change 14 to 20 and use ctrl+s or your respective keyboard shortcut and see that the setting gets applied right away.
Other features many developers prefer is autosave.  So go ahead and copy paste autosave into the pane on the right side.  Now change the text from “off” to “on”.
visual studio code tutorial
visual studio code tutorial
You will notice a green squiggly line under on and if you hover the cursor over it, it will show the suggestions on how to fix it.
Change the “on” to “afterDelay”.  This will start saving the file after a delay.  There is also a search area on the top of the settings file.  Use the search area and type autosave.  You will see a pencil icon appear against the setting as well.  Now click on the pencil icon and select paste in the right-hand pane.
“files.autoSaveDelay”: 1000
Please check the image given below:
The delay is represented in milliseconds.  You can change the number of milliseconds after which the file should autosave.
A feature most developer like is the ability to simply pick the right setting from the UI by clicking the pencil icon.  Here we are turning word wrap on and off using the pencil icon. Please see the Image below.
visual studio code tutorial
visual studio code tutorial
The readers are advised to go through the settings and get an idea the vast array of customizable that is present in Visual Studio Code.

Opening a new Project:

There are multiple ways of opening a new project in Visual Studio Code.

  • Use the keyboard shortcut Ctrl+o and pick the folder using the file picker window.
  • Use the file’s icon from the left pane.
  • Right click on the project folder and select Git Bash (if you have it already installed).  and enter the following code.

code .

visual studio code tutorial
visual studio code tutorial
visual studio code tutorial
visual studio code tutorial

The Integrated Terminal:

Launch the Integrated Terminal using the command Ctrl+`.  By default the integrated terminal is Powershell.  Most developers do not like PowerShell and rather use Git Bash.  You can get Git Bash at git-scm.com.  And change the setting to the following using the settings option.

“terminal.integrated.shell.windows”: “C:\\Program Files\\Git\\bin\\bash.exe”,

Close visual studio code and open it.  Open the terminal using the shortcut and you will see that Git Bash it the terminal now.

The integrated terminal is great for developing in React where the developers have CLI, the Dev server.  Running the dev server will take up the terminal and so launching the terminal with a terminal open will create a new terminal side by side.

We can create a file named newfile.php using the following command.

touch newfile.php

We can delete a file named newfile.php using the following command.

rm newfile.php

visual studio code tutorial
visual studio code tutorial

Intellisense:

Use the keyboard shortcut ctrl+shift+e and go to the file newfile.php.  When we start typing, we will see that a drop down will show up to complete the code.  This drop down is named intellisense.  It is a great feature and will be a key feature of using Intellisense.

visual studio code tutorial
visual studio code tutorial

By default, the Intellisense works with only the following languages

  • Javascript
  • TypeScript
  • JSON
  • HTML
  • CSS
visual studio code tutorial
visual studio code tutorial

If you want Python or PHP,  install the extension and it is very easy to do that.  Now try to complete the code and you will see a pop-up box appear and show the necessary things to remove all the errors.

  • It can also do camel case hinting.
  • Go to definition of a function using right click and go to definition or using f12.
  • Use Peak Definition and see the definition right there and also edit it right there.

Keyboard Shortcuts:

  • Press the Home key to get to the beginning of the line.
  • Press the End key to get to the end of the line.
  • Press Ctrl + Home to go to the beginning of the file.
  • Press Ctrl + End to go to the end of the file.
  • Bring the cursor to the starting of a line and press Ctrl+c and go to the end of the file and paste Ctrl+v.
  • Similarly, Ctrl + x can be used to cut the entire line and paste it where needed.
  • Press Shit+Alt+down arrow to copy the line and paste it below it.
  • Similarly to copy the line and paste it above is Shift+Alt+up arrow.
  • To move a lineup and down, use Alt + up or down arrow.
  • Use Ctrl + / to coment a line.  Use Ctrl + / to undo the comments.
  • Select a bulk of code and use Ctrl + / to comment them and use Ctrl + / to un commnet them.

To change keyboard shortcuts, use the keyboard shortcut Ctrl + k Ctrl + s or go to Files>Preferences>Keyboard Shortcuts and search for the shortcut and edit it using the pencil icon on the left side.

Themes:

The users can just click on the cog wheel icon in the bottom left and use the color Theme settings as well.  The Monokai theme is very popular as it makes code look like sublime text.

visual studio code tutorial
visual studio code tutorial
visual studio code tutorial
visual studio code tutorial

The users can install custom themes by going to the last option of install custom theme and see a bunch of options on the left pane.

Extensions:

Let us install an extension to see how to use extensions in VS Code.  Let’s install Bracke Pair Colorizer.  Go to Extensions and search for Bracket Pair Colorizer.

Click on install and click on reload.

visual studio code tutorial
visual studio code tutorial

Version Control:

Version Control is very easy with Visual Studio Code.  Just go to github.com and create a new repository.  Now come back to Visual Studio Code and press Ctrl+Shift+g and press the small version control icon and select the initialize repository option without selecting any folder.

That will create a new folder inside the root folder and it will bring local repository for the project.  For committing it to the Git repository, use the command shown in the figure.  Use the command that corresponds to your git repository.

visual studio code tutorial
visual studio code tutorial

Enter the command in the terminal.  This will connect the project to the remote repository.

Conclusion:

In this post, we saw how to install Visual Studio Code.  It is easy to install Visual Studio code.  We also saw how to install an Extension and also to click on reload to make sure the settings apply.  There are plenty of keyboard shortcuts and they are customizable.  One of the best features of Visual Studio code is having all the settings in a JSON file.  If you want more such posts explaining how to use some of the awesome software out there, please stay tuned to My Pc Updates.

Visual Studio Code Tutorial
  • Explanation of the Article
  • Clear Visual Representation
  • Working methods of the Article
  • Content Quality
  • Article Reliability
  • Quality of the Article
  • Visual Representation
  • Value of the Content
4.6

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *