VS Code — Very Special Code 👨💻👩💻
“Vs code” is one of the most advanced and coolest things Microsoft has ever developed after the “Internet Explorer” or maybe not 😜(pun intended). Vscode not only supports a number of languages but also stands as a lone wolf when it comes to using it as a typical IDE. The plethora of extensions present inside it just takes it to another level. There are various bizarre of development that just looks like a cakewalk when you start using VSCode. All you need is to have a proper idea of what, where, and how an extension is to be used, one letter and hit enter, and your boilerplate is ready (sometimes even more than just a boilerplate). Well, it’s so obvious when there are so many recipes on the plate it’s hard to choose in what sequence ingredients are to be selected so that it doesn’t downgrade the taste of the previous one. In this blog, I’ll be sharing the most perfect menu that I choose for my regale.😋
Starters:
Well, let’s start with some light but a very basic extension that everyone should have if he/she is into development.
Well as soon as you get into coding the very first thing that almost everyone learns is C and why not, this language has some very core and basic principles which are required to build a strong foundation. As this is almost everyone’s first go in programming there are high chances that people will get into some trouble initially. Well in that case there has to be someone who can guide them in hard times, and nothing can serve the purpose better than this. This extension just not only suggests some uncommon keywords but also enhances your naive coding syntax which in return gives you the ultimate taste of C.
Well, how is it possible for someone to talk about coding and ignore java? Java is such a language that you can either love or hate, but you cannot ignore it. And if something is that important then there has to have someone special to take care of it as well, and this purpose is well served by this heavy extension. By heavy I mean, that this extension comes with some sub-extension of its own which might even change the perception of the way you look at java. All the bizarre codes and syntax will look as if its’s nothing. No matter what you want to develop whether it's a simple CUI or GUI application this extension gives you the ideal environment to develop your own java programs. If you are in java development and want to develop some cool projects without installing any other IDE on your system then just install this package on your VSCode and you are good to go.
Well, the last item in the starter should be the most delicious one, and nothing can be a more suitable match for it than Python. Yeah, just like the snake this language also looks small but many people are unaware of the perpetuation or devour it can bring in just one line, and if something is that powerful in just one line then there has to be a proper tool so that it can be used in the most effective way. There are 100–1000 number of inbuilt function which python has and definitely its not easy to remember it in a proper way. This extension takes care that we get proper suggestions while writing some compact codes.
I think these items were enough for starters, but before we jump to the main course just take some rest and give it go to all these above extensions before moving forward.
Main Course:
Well, I really hope that the starter was light and was effective so now you can enjoy the main course to its fullest.
Let’s start with the most important one.
Yeah, you read it right the ES7 React/Redux… snippets. Well if you are coming from a web development field you very well know how this thing means to your life. There are various complex and interesting syntax that we face in this field. There are 100 ways in which one thing can be written and performed, and when there are so many options to do a single task then there has to have a common root that binds it all together. When you have this extension in your VSCode trust me you can feel even more powerful than Thanos. Just 3 letters in your editor the basic layout the react project is in front of you that too with various version whether you want class-based component or functional-based component, even in functional-based there are various styles that developers practice. No matter what kind of syntax you follow just literally type 3–4 letters(eg. rafc,rfce), and it will suggest all types of options you can opt for.
One of the most important things this extension provides that you don't have to worry about the paths, like in which path your a particular function is, all you need is to type the proper name of that function you have to call, and this extension will not only search that function inside your development directory but will also import it automatically for you.
Opening and closing tag in HTML is still the annoying thing present on earth because it depends on the mood of the browser how it wants to compile your code, sometimes it does work and sometimes it doesn’t. Emmet does solve this issue quite well but in case if you are renaming a tag and forget to rename its closing tag, in that case, God only knows what the output will be, but there is a lifesaver if this extension is into your editor. It just makes sure that when you are making any changes in the opening tag then the same is reflected in the closing tag also and it takes off the headache of keeping the note that which opening tag has been renamed accordingly.
We all know how much brackets mean to us in development unless you are someone who just loves python.😍10–20 brackets don't make a lot of difference but what if there is a situation that in a single function, that there are 100–200 nested child function and each child function has a bunch of try-catch blocks with their own if else condition and each if-else condition are having 3–4 loops inside. Well, that sounds too complex and indeed it is, and if someone wants to debug this code that it might turn out to be a nightmare for him/her, with seeing the same brackets being opened and closed repeatedly without making any difference. In that case, this extension becomes handy as it just makes sure each individual function has its own type of bracket color so that it can be easily seen as where a block is starting and where it is ending.
This extension exactly does the thing that it depicts in its logo. It highlights the indented part of the code so that it becomes more readable. This just not makes the codes look cleaner but also gives them uniformity so that it easily differentiated. When you use the bracket-pair-colorizer and Indenticator together it just gives a beautiful look to your code as now, not only your brackets have paired color but also to the extent your block exists till there the codes remain in a particular colored indicator line.
Now if you are done with bracket-pair-colorizer and Indenticator let me introduce the extension which binds these two together all these three together give you the cleanest code one can have in their development. There are small things while you write the code as for eg. if you are importing a module either you write like ‘module-name’ or “module-name” both works exactly the same, either you give a terminator(;) or not in javascript it still works but this inconsistency makes your code less global and someone can find hard to read at the first time so to overcome this problem you can find this extension to be perfect, all you need to specify what you want either ‘’ or this “ ”, This extension will make sure that the uniformity is maintained throughout the code. Not only this it will format the code in the optimal way possible like the tab spaces will be uniform throughout the file and which just enhances the vibes of the code.
Desserts:
After all, these marathon dishes, let's move to something light and effective which just not enhances your productivity but also keeps you a little more alive by giving some GUI experience so that you can actually see what you are doing.
Well peeking into something is not what many of us consider a good habit but what’s the point of a developer if we don’t get some liberty.😜 Not much liberty in such cases, but yeah sometimes we do require to peek into other files for some reference, and it becomes a hectic task when it comes to CSS as not only its syntax are dramatic but also for some small changes sometimes we need to write the whole bunch of code again and when we want to refer that particular part of code it becomes a nightmare. This problem can be solved just by installing this extension. All you need is to keep your cursor on the class name you want the property of, and it will show you all the properties of that specific class on your screen without switching to another tab. This just not only saves time but also keeps the code clean as you can simply hover those properties and can navigate to that part of code and make changes if you want to.
We all know the importance of git in our profession, but who likes to write the command for everything in the era when almost everything is GUI. The problem becomes even worst when it comes to resolving the conflicts, this is really a nightmare for every developer, but thanks to git lens, once this is in your editor everything is like a cakewalk. What more you can ask, like writing code on an editor and managing the Github issue from the same place. The optimized GUI, GitLens offers makes the whole task simple and hell easy, especially the merging one. It shows you exactly what line has been modified or added and gives you the option of accepting the changes or not.
Reloading the browser for seeing the smallest changes is not what everyone likes, especially when one is working on minute details related to CSS. For seeing just a small change, one has to refresh the window and that is really an irritating task. Well, ReactJS does solve this problem as the auto-reloading feature comes with it but what about the basic HTML file? This problem can be simply overcome with this extension. All you have to is to install this extension in your vs-code and start the server on the port it shows and after that each time you save your file, the window auto reloads itself and reflect the changes we have made in the browser.
Sharing is caring! This quote rightly fits in the field of software development.
Whether you are an experienced developer or a beginner there always comes a time when you want to take the help of others while you are in between your development. Sharing the screen is one of the basic things which one opts for, but wait why share your whole screen with a 3rd party software and wait for someone to have that particular software on their system. This extension is a lifesaver for all of us in this situation. All you have to install this in your Vscode and it will give you your id which you can share with your coding partner and you that file will appear on his window. No third-party software, no high-speed internet, just his extension on both sides and you are good to go.
There are also some preferences which can try for smooth functioning. All you have to do is to open setting.json file can paste the following in that file.
“editor.minimap.enabled”: falseThis removes the annoying minimap which is present on the right side of the screen.
“[javascript]”: {“editor.defaultFormatter”: “esbenp.prettier-vscode”}This makes the prettier your default formatted so that the code gets formatted with a preference of what you have defined in the prettier extension. Here in the place of javascript, you can write any language for which you want the change.
“files.autoSave”: “afterDelay”This saves the file automatically every 3–4 seconds so that your code remains safe all time.
These were some of the extensions and preferences which I use for my vscode. There are many more extensions that you can try your hands on like Peacock, docker, indent rainbow, etc. You can also tweak around the setting.json file according to your convenience which suits you the best.
This concludes my work! Hope you had a good read.
