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.
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.
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.
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
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.
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.
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.
We can delete a file named newfile.php using the following command.
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.
By default, the Intellisense works with only the following languages
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.
- 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.
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.
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.
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.
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.
Enter the command in the terminal. This will connect the project to the remote repository.
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
Be the first to write a comment.