Visual Studio Code
Best IDE that I’ve used so far.
what is an ide.
You can pretty much code in any text editor. Or if you are brave enough, you can even use interactive shells to create an entirely functioning program from scratch. But trust me, it will be a pain in the neck.
If you know a little bit about programming, you probably heard about the term “IDE” before. If you haven’t, IDE is an acronym for Integrated Development Environment, which is basically a suite of a code editor with capabilities of syntax highlighting, various auto-complete features, debugger tool and a compiler. An IDE gives you superpowers in programming, decrease the workload off your chest, solves some of the problems (or at least indicates them) way before they actually happen. To increase your learning curve and become more efficient while coding, I definitely recommend using an IDE for every type of development process.
why vscode.
Well, it is technically not a full-featured IDE, in fact, according to the Frequently Asked Questions section of the VSCode, they define it as “a streamlined code editor with support for development operations like debugging, task running, and version control”. But it is not just limited to that. It. Is. Customizable.
You are not limited to what VSCode gave you in default settings. You can adjust and tweak literally everything. There are tons of extensions that are ready for use at your fingertips. Would you like to work with other programmers? Install an extension and you are working already. You wanted to change the colour theme? Go ahead and try countless themes under the extensions. Would you like to add another language support? Install an extension and it is working. You need to adjust your code to meet the standards of the language you are using? In a few clicks, your code is just looking like it has been made by a professional. The possibilities are endless what you can do with VSCode at this point.
You can go to this link to download VSCode. It is pretty straight forward to set it up.
basic usage.
I can describe the whole process of using VSCode in full detail, but it would make this article longer and much more detailed than what you need to know. You will learn them as you go anyway. So, I would like to show you around and give some useful details about VSCode.
VSCode works in three different ways: Files, folders, workspaces. When you open a new file or an existing one (rather from file explorer or VSCode) it goes to file edit mode. When you open a folder, you can access all the files in that folder and edit them. If you open more than one folder or add more folder to the already selected ones, you will be using workspace mode. You can only use source control on folder mode or workspace mode (which you can upload files to Github or Gitlab like platforms), which I will be covering in a later article.
The giant empty space (if you haven’t opened any files yet) is the code editor. If you open up a file, you can see and edit your code from here.
On the top-left side, you can see a navigation bar. From top to bottom, the icons are corresponding to the Explorer, Search, Source Control, Run and Debug and Extensions panels.
Explorer
This panel is where you can see all the files and folders you have opened. You can add, delete and edit your files from here. When you single-click a file, the corresponding file opens in a new editor. You can see that the title of the editor is italic, which means that it is temporarily opened.If you single-click another file, it will replace the temporary editor. To permanently open a file, you can double click.
Search
You can search and replace any type of words and variables here. It is self-explanatory, I think.
Source Control
This is where you can use Git and push, pull, commit or looking at the changes that are different from the source. I will be covering this in another article since it is a relatively deeper subject.
Run and Debug
You can debug the program from this panel. Since it has a bunch of settings and is dependent on the programming language you use, I prefer to explain it in my tutorials (which I am working on Python tutorial series at the moment).
Extensions
This is the place that makes VSCode very powerful. You can see you installed extensions and add new ones if you want.
Since the settings and personalization is endless, I can only point you in the direction to do yours if you need. Click on the settings icon on the bottom-left corner and click on the Settings. You will probably need to use the search bar at the top. If something is not right and you want to change it, this is the place to go.
extensions.
Since it depends on which programming languages you are intended to use for or your preferences, I have been using a few of them for now. I would like to share my best 10 extensions with you as well, with the languages or purpose I am using them with.
Auto Rename Tag — HTML
When renaming HTML elements, normally you need to change both of them manually. This can become frustrating especially if you have a nested code and try to rename that element by hand. This extension gives you the ability to change either of them and automatically correct the other one.
Bracket Pair Colorizer 2 — HTML, CSS, JS, Python, C++, C# and others
If you are using a language that requires opening and closing brackets, parentheses or curly brackets, looking at your code and trying to understand which bracket corresponds to which could be very painful. With this extension, you can easily identify them, usually very useful on nested codes.
Code Spell Checker — HTML, CSS, JS, Python, C++, C# and others
If you have misspelt a variable, your program may not work properly. After hours and hours of research and ensuring your code should work properly, you discover that you have a misspelt variable name. This extension prevents that and assists you in naming variables from defining to checking them.
GitLens — Git supercharged — Source Control
You have a default source control feature in VSCode already, but this extension allows you to see which part of the code is changed in which update in the code editor section. It will be a lifesaver if you are using source control (which I highly recommend and will upload a tutorial about it).
Live Server — Web Development
If you want to start a new server to test your website in server mode, you don’t have to bother with it with this extension. It automatically deploys a live server that updates as you change your code.
Live Share — Team Work
This extension allows you to work with other developers on the same code editor. You can share your code with others or join them to collaborate with them much quicker. You can see which developer is editing the code in real-time and will become your favourite if you are working with a team.
One Dark Pro — Theme
This my favourite theme so far. It gives VSCode a dark but easy-to-read interface.
Prettier — Code Formatter — HTML, CSS, JS, Python, C++, C# and others
Prettier formats your code according to the standards of it. If your code is working fine but not looking that well, this extension automatically wraps your code to a very good-looking one in seconds.
Python — Python
Giving VSCode the capability to run Python codes without a terminal screen. Simple yet powerful.
vscode-icons — Theme Add-on
This extension will add icons to the explorer section of your interface. You can identify the files much easier without looking at their extensions.
You can check out the other extensions of your likings, there are tons of them. Also, you may not need these and/or need more extensions than that. You can google the objective you want to do and find a suitable extension for it.
conclusion.
The possibilities are endless with the VSCode. You may need to use another IDE for your projects (like Visual Studio or Xcode), but if you have a chance to use VSCode, I highly recommend it. It makes your entire coding process much faster and simpler. I will be showing more and more features about it in my tutorial series later on. Until the next time, happy programming.
