Visual Studio Code is a popular and powerful editor for building apps in different languages, including C#. It can also be used as a Git client to create commits of source code or manage the software development lifecycle (SDLC). This article will give you everything you need to know about how Visual Studio Code functions and what it offers developers.
The “visual studio code download” is a free and open source text editor that can be used for programming. It is available on Windows, macOS, and Linux. The “Git” is a version control system that allows users to keep track of changes made to their files.
Those who are unfamiliar with Visual Studio (VS) Code may only see a code editor. Extensions, an integrated terminal, and other features give VS Code its true power. You’ll learn how to utilize Visual Studio Code by working with a Git repository in this hands-on course.
A Tutorial on What You Need to Know About Visual Studio Code
You’ll create code and commit it to source control using a single interface, thanks to the built-in VS Code tools plus a few enhancements.
This blog article is a chapter excerpt from the eBook From Admin to DevOps: The BS Way to Azure DevOps. Check read the next part if you like this one and want to learn more about DevOps on Azure.
Overview of the tutorial
By creating a project using Visual Studio Code and Git, you’ll learn how to utilize numerous VS Code capabilities on Windows in this course. As a short proof of concept (POC) project, you’ve been entrusted with finding out how to construct an Azure VM using Terraform. You’ve downloaded VS Code and heard good things about it as an IDE, so you’re eager to put it to the test.
You’ll do the following:
- Make a shared VS Code workspace for your team.
- Download and install the Terraform extension.
- Change the Terraform configuration file to match your naming scheme and Azure subscription.
- Make a snippet for a typical job that you find yourself repeating.
- Create a Git repository for the Terraform configuration file.
This article will not teach you how to use Terraform to install Azure virtual machines. For that, we already have a Terraform with Azure VMs post. The goal of this lesson is to teach you how to use Visual Studio Code.
Is this a project that you’d be interested in working on? If that’s the case, keep reading to get started!
Prerequisites
Please make sure you have the following items in order to follow along with this Visual Studio Code Git tutorial:
- VS Code — All examples will be done in VS Code 1.44, however previous versions should also function.
- Terraform – Terraform for Windows v0.12.24 will be used in all examples.
- Installed Git for Windows – v2.26 will be used in all examples. If you want VS Code to be Git’s default editor, make sure you check the box when installing it.
Git’s default editor
Clone the Github repository
Because this lesson will concentrate on working with code in a GitHub repository, the first step is to clone the repository to your own computer.
You’ll be working from a GitHub repository named VSCodeDemo for this project. You can clone a Git repo with no further settings since VS Code includes native Git integration. To do so, follow these steps:
- Type git in the command palette (Ctrl-Shift-P), and you’ll see a list of possibilities, as seen below.
Using VS Code to clone a Git repository
2. Select Git: Clone the repo, and VS Code will question you for the URL. Enter the following URL: https://github.com/NoBSDevOps/VSCodeDemo.git.
3. Select a location for the copied project files. The repo folder will be created at the root of C:. VS Code will run git.exe in the background and clone the repository to your PC after you specify the repository location.
4. When it’s completed, VS Code will ask whether you want to access the cloned repository right now, as seen below. Click Open.
Getting into the copied Git repository
In VS Code, the Git repo now has an open folder. You must now “save” this open folder as well as any other adjustments you’ll be making in a workspace.
Creating a Working Environment
Now that you’ve opened a folder with a Git repo, you can save a workspace by navigating to the File menu and selecting Save Workspace As….
VS Code workspaces may be saved.
In the project folder, save the workspace as a project. In the Git repo folder, VS Code will generate a file named project.code-workspace. This workspace is now aware of the folder you’ve accessed. When the workspace is accessed in the future, the C:VSCodeDemo folder will be automatically opened.
Instead of a folder name, you will now see the workspace name.
Examining a Visual Studio Code workspace
Installing Extensions
One of the most helpful aspects of VS Code is extensions. Extensions provide you the ability to add features to assist you manage a variety of tasks. You will be working with Terraform in this lesson.
In the workspace in the left sidebar, open one of the Terraform configuration files. Notice how an editor tab appears and displays the text, but that’s all there is to it. There are no standard syntax highlighting or other features available. VS Code interprets this file as plain text and presents it as such. Let’s put it right.
For a Terraform configuration file, there is no syntax highlighting.
You’ll need an extension for VS Code to “understand” a Terraform configuration file. Extensions are a big component of VS Code, and they provide you a lot of additional options. In this situation, the Terraform extension is required to aid in the creation of Terraform configuration files and the deployment of infrastructure using Terraform.
To Download and install the Terraform extension., click on the extensions button on the Activity Bar and search for terraform. You’ll see multiple extensions show up but for this project, click on Install for the top result created by Mikael Olenfalk. VS Code will then install the extension.
Adding a Terraform extension to your environment
Return to the workspace and choose one of the TF files in the workspace after it has been installed. When you use an extension, you’ll notice one of the most noticeable modifications right away: syntax coloring.
Now you can see how VS Code “knows” what a comment is (by turning it green), what a string is (by making it red), and so on in the following snapshot. A Terraform configuration file is now lot simpler to understand.
The VS Code Terraform addon provides syntax highlighting for Terraform.
Mikael’s Terrafom addon comes with a ton of additional features. If you’re using Terraform, be sure to look into all of the possible advantages of this extension.
Editing Code
It’s likely that a script or configuration file you discover on the Internet won’t be precisely what you need. You’ll have to change something about it.
You’d want to update the main block label in infrastructure-before.tf in this tutorial’s example. To possibly project, Terraform configuration file. You’ll need to locate and change some text to do this. There are many options in VS Code for doing so.
The search and replace feature is one of the most frequent techniques to discover a string and replace it with another.
If you press Ctrl-F, you’ll receive a window similar to the one below. You may write in the string you want to locate here, and if you click the down arrow, it will expand and provide you a space to fill in a replacement string. You can see choices like Aa and Ab| for case-sensitive searches, as well as regular expressions, in the screenshot below.
Text search and replacement
Ctrl-D may also be used to do a “find and replace” operation. Simply choose the text you want to search for and press Ctrl-D. VS Code will begin to highlight each occurrence of the string with a flashing cursor.
Start typing once you’ve chosen all of the elements, and VS Code will alter all of them at once, just as if you’d picked each one separately.
Using several cursors to synchronize changes
Using Snippets to Save Time
Let’s imagine you’re really getting into Terraform with Azure, and you’re sick of typing out the Terraform configuration file block in the following code snippet to establish a new Azure resource group.
resource “azurerm_resource_group” “<element name>” { name = “<resource group name>” location = “<region>” }
Create a VS Code snippet to save time while building these blocks.
VS Code Snippets: Shortcuts to Make Coding Faster
To make a VS Code snippet, follow these steps:
- From the Infrastructure-before.tf Terraform configuration file, copy the azurerm resource group block.
2. Press Ctrl-Shift-P to bring up the command palette.
3. To narrow down the possibilities, type “snippets” into the search box.
4. Go to Preferences > User Snippets > Configure User Snippets. This displays a list of all the snippet files, which are usually organized by language.
5. To filter by Terraform snippets, type “terraform.”
6. Open the Terraform snippets file by selecting terraform (Terraform) (terraform.json).
Remove all of the comments from the Terraform snippets file and insert the following JSON element inside.
“Create Azure Resource Group Block”: “Create Azure Resource Group Block”: “Create Azure Resource Group Block”: ” “prefix”: “rg”, “body”: [“resource “azurerm resource group” “$1:block label”], “tname = “$2:name””, “tlocation = “$3:region””, “description”: “Creates a Terraform Azure Resource Group block”], “description”: “Creates a Terraform Azure Resource Group block”], “description”: “Creates a Terraform Azure Resource Group
The usage of the letter t, as well as the backslashes, should be noted. Tab characters cannot be directly inserted into a snippet. You must use the letter t to indicate a tab character. You must also use a backslash to escape characters like double quotes, dollar signs, curly braces, and backslashes.
8. Keep the terraform alive. a file in json
9. Return to the Terraform configuration file and enter “rg” on the command line. You’ll see that you may now enlarge a snippet.
Adding to a snippet
10. As indicated above, choose the rg snippet. It now extends to the snippet you just wrote, which has three highlighted elements.
Because of the variables specified in the terraform, VS Code highlighted each of the words to function as placeholders. $1:block label json snippets file
Filling in placeholders for snippets
You may now click Tab and enter in the data you need without having to worry about how to build the block itself.
Check out the Snippets in Visual Studio Code documentation for a complete description of snippet syntax.
Git is a version control system that allows you to share your code with others.
You’ve cloned a public GitHub repo containing a few of Terraform configuration files at this point. You’ve made some modifications to certain files and are now ready to push them back to the GitHub repository.
To bring changes back up to the GitHub repo, you must first commit changes to your local cloned Git project using Visual Studio Code and Git. You downloaded not just the configuration files but also a Git repo when you cloned the GitHub repo previously.
You should now have the cloned Git repo open with a couple of pending changes, two to be precise, if you’ve been following along. How did you figure it out? As illustrated below, by observing the number in the Activity Bar.
The amount of files you can stage and commit into a local Git repo is shown in the Activity Bar when you have a Git repo open in Visual Studio Code.
Git contributions that haven’t been staged
You’ll notice two things when you click the Source Control item on the left: the infrastructure-before.tf Terraform configuration file and the workspace you created previously (project.code-workspace). A red M to the right of the configuration file indicates that it has been changed. Because it’s untracked, or not under source control, the workspace file will have a green U to the right of it.
Change labels in VS Code Git
To guarantee that both of these files are returned to the GitHub repository, write an useful commit statement explaining why you’re committing them. Any descriptive summary may be used as the message. Stage the modifications once you’ve created a commit message. In Git, staging changes in Visual Studio Code moves the contents of the file to the staging area in preparation for a commit to the repository.
Click the Plus symbol beside each file in the Source Control window to stage them as shown below.
Git changes are being staged
Once the changes have been staged, click the check mark to commit all of the changes, as illustrated below.
Git commits changes
You’ll almost certainly see an error message telling you that you need to setup a user. In Git, enter your name and user.email.
The Git setup does not have your Git user configured.
It’s no issue. All you have to do now is provide Git the information it need. To do so, type the following two commands into your VS Code integrated terminal, replacing my email address and name with yours.
—global user.email “[email protected]” git config —global user.email “[email protected]” —global user.name “Adam Bertram” git config
Attempt to commit the files now. The files should now be committed to the repository.
By committing all updated files at once, you may avoid manually clicking on the + beside each one. All of the files will be staged automatically by VS Code.
If you’re part of a team with a shared repo, the next step is to publish your modifications to the GitHub repo or submit a pull request.
Conclusion
VS Code is an IDE with a lot of features. It may not only aid in the writing and understanding of code, but also in the construction and modification of infrastructure, the use of utilities, and more. You can manage all of your development efforts in one location with VS Code.
Although this video just touched on a small percentage of what VS Code can accomplish, this IDE is quite powerful. Check out What You Need to Know About Visual Studio Code: A Tutorial if you want to learn more about what VS Code can achieve.
“How to push code to github from visual studio code terminal?” is a question that I get asked quite often. This blog will give you the basics on how to do it. Reference: how to push code to github from visual studio code terminal.
Frequently Asked Questions
Is Visual Studio Code good for Git?
A: Visual Studio Code is a code editor, which supports Git. Therefore, it would be appropriate to use this as your primary source of editing any source files that you need to edit in order to work with the Git repository. However, if you are looking for an IDE that offers additional features such as debugging and other development benefits, then using something like Eclipse or PyCharm may be more beneficial for what you want to do with the program
How do I use Git code in Visual Studio?
A: You can use the Git Bash command line interface to work with your code. This is a program that you can download and install on Windows, macOS, or Linux for free.
How do I use Git and GitHub code in Visual Studio?
A: To work with GitHub code, you need to have an account on the site. If you dont already have one, create a new free one at https://github.com/join/. Then log in and go to Settings > repositories .
Related Tags
- how to use git in visual studio code
- visual studio code github
- how to push code to github from visual studio
- how to clone git repository in visual studio code
- install git on visual studio
