Great, you’re fresh to programming and thought you’d try your hand at obtaining god-like hacking skills and win a Nobel peace prize for your genius. You've downloaded Visual Studio Code(VSC), so now what? Perhaps, before you run the code editor you’re already imagining the boundless possibilities of programs, applications, and software that you can build along the journey as a code developer. If you’re a student, you’re probably struck with awe and wonder from all the things you want to learn more about. There’s so much for you to explore and you don’t know where to begin. On the flip side, you’re a student who is filled with dread because you’re now faced with so many features, functions and terminology coming right out of the box with VSC; technical jargon that appear so alien that you wonder when you’ll start to make sense of it all.
No matter what reasons you have for choosing VSC as a step towards learning and implementing your first few codes — know that what you are working with is a Tool. Just think about what a tool means for you and what it means for a person who depends on them almost every single day. If you say anything along the lines that a tool is a medium or device that help us carry out particular tasks and more efficiently compared to not using one, then you’re on the right track.
Disclaimer: before I go all Master-Oogway and tell you to look at tools as extensions of ourselves…if you feel like you understand where I’m getting at, that your code editor is as important to you as is a paint brush to an artist then, awesome. You’re quite in tune with yourself and you know what clicks, what doesn’t and that you understand what you need to do to accomplish any demanding task out there. You’re more than ready to move past this blog and venture on your own in VSC and mess with code. Heck, maybe watch this video on 5 Ways to Customize VS Code and then I’ll still be happy knowing I’ve at least contributed to your genius coding process. If you’re still with me and are still curious about what I have to offer beyond what a simple search on Google can already do, if not better, then I appreciate you.
Studio: Is a noun of which its definition primarily focuses on artists and their craft; be it painting, sculpting, choreography, singing or photography. Simply, a studio is a room where an artist can focus and develop their skills and talent. Above all, a studio is a space where individuals can freely express themselves. So, throw words like visual beside studio and what do you see? I think you get the gist. Make VSC yours. Learn the works from the inside-out and take the time to see what features it has to offer and perhaps play around with with some of its settings and functions. You might even be surprised at what you’ll find along the way that can enhance your experience while you code. And what better place to start than personalizing your workspace and visualizing your perfect canvas on which to paint your code on?
When you’re ready, open and run the code editor. By default, you should get a blank dark grey window with a giant VSC logo that’s positioned center along with some shortcut-key “hints” that can help you get started into coding. Let’s not worry about those since we’re just here to customize!
Now, look over to the top left corner of the window. There is a panel adjacent to the Toolbar (top) containing 6 icons. The first one starting on top that looks like paper sheets is where you explore, store and surf your files. Go 4 icons down from there and click on the icon that resembles Tetris with a floating block. This opens up a menu for Extensions a.k.a, the “Marketplace”. It contains A search-bar at the very top accompanied with a row of different “buttons” that do different things. These buttons lie on top of the bar across from the heading that reads “EXTENSIONS: MARKETPLACE”. From here, I will you show the one of the few methods I use to search for themes or “skins” (as some of you may know that reference better) to customize my VSC layout.
Click on the flashlight or inverted umbrella icon to drop down a menu containing [Category] which will pull unveil another plethora of options. From this menu of categories you will look for, you guessed it…themes! Click on [Themes] to only return to you items that involve customizing the visuals of your workspace in some shape or form; think colors, fonts and icons. And while we’re on the subject, you can also pull the selection of themes by entering the following text inside the search bar: @category: “themes”.
Now that you see a selection of themes in your Marketplace panel, explore and click on each individual item that piques your interests. Clicking on one will pull up a page giving you information on the extension, a direct install of the said extension, and ideally some screenshots or demonstrations of how your VSC will appear and other changes after installing the extension.
Now, let’s take a look at a few examples and compare that to our default theme and layout.
Now, after you found one theme you’d like to install. Go navigate into the page that is displayed after clicking on the extension you want and at the top of that page look for a install button and click [Install]. And after you installed the extension you may be provided a menu of different color schemes that you may choose from as shown below.
This extension only has one color scheme, “Panda Syntax”, besides the theme that you currently have on as shown underneath with the tag “Current” on the far right. Click on “Panda Syntax” to set your default theme to your new color theme.
Some extensions provide more than one option of color schemes and you may need to pull up a code or file in a separate window to see the differences. Select a theme according to your taste and preferences. Remember, you are able to download and save as many themes as you like!
NOTE : To quickly change themes and color schemes (on PC), Hold CTRL + K, and then while still holding the CTRL key press T …; CTRL + K to CTRL + T.
You can also access these themes via File> Preferences > Color Theme.
Now, before you go off and begin to create beautiful code I would like to share a little extra eye candy while you tackle your day to day programming.
Here is an example of an extension that provides you with custom file icon designs. There are a bunch of them out there. While some people prefer icons that are more obvious in telling you what type of files they are like so
…I prefer icons that hold some other meaning and or is something that I can relate to. Stardew Icon Theme implement designs taken from the video game “Stardew Valley”. And if you’re interested in changing up your file icons as well just type in the search bar: @category: “Themes” icon. Lastly, to change your file icons you need to navigate to File > Preferences > File Icon Theme. There are no keyboard shortcuts to access the settings for these.
Now that you made it this far, what are you waiting for? Go out there and have a little fun redesigning your workspace. Find a color you like, a theme that’s easy on your eyes, and file icons that help you keep track of things and stay organized. Maybe also throw in a dash of ergonomics and buy a nice standing desk and chair eh? Well, whatever you choose to do and however you want to treat your tools is entirely up to you. Just remember that although you may be eager or nervous to learn code, how you prepare and how comfortable you make yourself at the start can set the tone for the journey. Good luck and who knows, maybe I’ll talk about designing our own themes and uploading it to the Marketplace next time.