Why should you learn how to clone git repository in visual studio code? What are the best git extensions for visual studios? Git is by far one of the most widely used source code management systems, today. It’s one of the leading tools that are being used by many developers. With just a couple of commands, you can create a new repository, clone an existing one, view files, create branches, and much more.
Visual Studio Code, by Microsoft, has eclipsed IntelliJ as the leading IDE in the market. Over half of developers surveyed by StackOverflow use VS Code as their development environment. Sure, there are some who still hang onto their old favorites like Eclipse and Emacs.
What is the best extension for git in visual studio? This is a question that many coding enthusiasts would ask at some point. If you are a programmer or a web developer, you’re likely to need an extension that can help manage your git repository.
Getting started with GitLens in Visual Studio Code to see the different branches and tags for each file is really helpful. And the GitHub integration is the best git extension for visual studio 2019.
Path Intellisense
Whether you’re a seasoned dev or you’re new to the game and find the number of things you need to remember overwhelming, you won’t know how you ever lived without Path Intellisense.
Path Intellisense makes working with file paths easy by offering either an autocomplete or suggestions for your code. Simply begin typing a path in quotations, and Path Intellisense will either automatically complete the path for you or suggest a variety of different options if it’s not sure what option you want.
Plus, if you’re using hidden files, Path Intellisense can help you with that too.
It’s quite a simple quality-of-life improvement, but it’s one that every dev never knew they needed.
GitLens — Git, Supercharged
GitLens is a super tool if you are working on a project that involves multiple team members. It lets you peek into the last revision of the code precisely from the line where your cursor is. Sleek, right? You can view the code author, when was it written, and directly hop onto that particular commit from within the VSC interface. It is a really powerful tool one must-have.
Quokka.js
If your language of choice is JavaScript or TypeScript, then you’ll love Quokka.js. This extension aims to speed up development by displaying runtime values in your IDE as you code, so you can focus on writing code instead of building custom configs simply to try something new.
It’s a simple, lightweight extension, and one that’s perfect for both seasoned developers and newbies alike. It’s also free for community use, but if you’re a JavaScript/TypeScript professional, you can also buy a Pro license that lets you modify your runtime values without having to change your code.
ESLint
ESLint is the linting utility for JavaScript. It checks your code for common errors and lets you know in the editor itself. It’s like a virtual peer who is validating your code while you are writing it.
To save tons of time in debugging and to produce quality code, this extension is a must-have for the Visual code studio users.
Before installing ESLint in the visual studio, install it as a global package first.npm install -g eslint
To install ESLint in visual studio code, open the extension tab and search for ESLint. Install it by using the Install button.
Bracket Pair Colorizor
Brackets are the bane of a developer’s existence. With tons of nested code, it gets almost impossible to determine which brackets match up with each other. Bracket Pair Colorizer (as you might expect) colors matching brackets to make your code much more readable. Trust me, you want this!
Snippets
Snippets are an excellent add-on for productivity. The snippet is a collection of various extensions for the most commonly used programming languages. The React Snippet is a popular extension, for example, that allows you to use and create shorthands for things you do over and over again.
Some popular options are:
- Angular Snippets (version 11)
- Python
- JavaScript (ES6) code snippets
- HTML Snippets
- Vue 3 Snippets
Auto Rename Tag
Auto Rename Tag is a super useful VS Code extension for web developers. As the names suggest, Auto Rename Tag renames the second tag as the first one is updated and vice versa:
You will find this extension helpful not only with HTML but also with React because of JSX.
In the above example, there is only text inside the tags, but in a real application, there can be nested tags and elements, making manual updates difficult and tedious.
Open in Github, Bitbucket, Gitlab, VisualStudio.com
Sometimes, it’s helpful to view a file in Github (or other source control providers). This extension gives you the option to directly open a file in the browser at Github.com (and others).
CSS Peek
CSS Peek is a great tool if you keep forgetting what was a CSS class was used for. However, that could also mean that your CSS class names are not meaningful, or you have written too much “unmaintainable” code. Still, this is sure going to be handy if you are viewing/rewriting someone else’s code. Again, this can be useful if you are working with a large team and have a large codebase to work with.
Live server
Make changes in the code editor, switch to browser, and refresh to see changes. That’s the endless cycle of a developer, but what if your browser would automatically refresh anytime you make changes? That’s where Live Server comes in!
It also runs your app on a local host server. There are some things you can only test when running your app from a server, so this is a nice benefit.
Bracket Pair Colorizer
Bracket Pair Colorizer is an extension that matches corresponding brackets with the same color. Having nested components, functions, objects, etc., in a file, can become confusing with multiple parentheses, brackets, etc.
For example, consider the following code snippet:
At first glance, it’s quite hard to differentiate between different code blocks in the code, but the Bracket Pair Colorizer extension colors the corresponding parenthesis and brackets for easy navigation and accessibility.
Better Comments
Better Comments is an extension used for writing human-friendly comments in your code, which is helpful for you and anyone who is reading source code (especially for teams). Descriptive, human-friendly comments save so much time for everyone involved.
With this VS extension, you can use the following characters after a double forward slash // to add easier commenting:
*for highlighted text!for errors and warnings?for queries and questions//for strikethroughTODOfor to-dos
Prettier
The Prettier extension is a formatter that helps to keep code style consistent. You can configure your settings however you need and save with shortcuts. Prettier is one of the most popular code formatters out there, with over 38.5k stars on GitHub.
Prettier will automatically fix formatting issues in your code, like fixing the mix of single and double quotes or irregular use of semicolons.
This extension works with the following technologies: JavaScript, TypeScript, Java, JSON, CSS, HTML, Vue, Angular, Markdown, YAML, and more.
Debugger from chrome
This extension is exclusively designed for front-end developers using chrome. One of the key reasons why Chrome is a go-to browser for developers is because of its debugger.
Chrome shipped the powerful debugger with its browser for testing. You can set breakpoint, view data at each step, and figure out the error in no time.
Auto Rename Tag
Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!
Tabnine
Tabnine is a massively popular AI assistant for VSCode that works with all major programming languages, so there’s no doubt you’ll find it useful no matter what your skill set is.
By studying publicly shared codebases, Tabnine uses deep learning algorithms to predict what you need and offers one-click code completion so you can work through your project quickly and efficiently. For newbie coders, this makes learning a breeze, as it gives you the space to play with ideas without needing to remember the coding syntax or search StackOverflow.
And, if you’re a seasoned dev, then you’ll find that Tabnine saves you oodles of time on whatever you’re working on by giving you the building blocks you need to get things running.
Conclusion:
Git is software that facilitates version control, but often users use GUI tools to access this application. These GUI tools have many features which are very helpful in achieving very complex tasks.
git is a popular distributed version control system. In the early days, most developers used GUI tools for performing different Git operations(like git add, git commit, etc) but with the evolution of technologies, most developers shifted from GUI to command line mode. and there were fewer and fewer opportunities for interaction with Git.
A new breed of GUI tools has emerged to provide an enhanced version control experience on the desktop. these tools keep track of your code changes and it’s associated files, while you can interact directly with the code in several ways: Integrated diffing, copy/move/rename/delete actions across local or remote branches, staging and upstaging, or even just viewing full file content using a built-in file browser. Best Git Extension for Visual Studio Code
Ever since Microsoft ported Git to Windows, they have set out to make it the default version control system for the Windows platform. There are quite a few Git clients available but perhaps the best of them all is Visual Studio Code.