console.environment(visualStudioCode)

One of the most important decisions you will make in the early days of aspiring to become a full-stack dev is which IDE (integrated development environment) you will choose. Now, technically it is way more important to find good instruction, but, finding an IDE that has a large community and is widely used is indispensable. Having support in the droves of millions for whenever you have questions gives a peace of mind that I didn't know I needed with this decision.

Both Webstorm and VS Code have very similar layouts and file structures.

Originally, I wanted to use WebStorm by JetBrains. An IDE made for JavaScript and TypeScript (but can be used for HTML, CSS, and many others). I have a fondness for JetBrains. Their font "JetBrains Mono" is what this site runs on and I really like the sleek, simple layout of their software. But I was reminded gently by a co-learner over on Codecademy that having the things mentioned above are really more important than what an IDE looks and feels like. Especially if you are just starting out like I am and don't have the first idea what these things really can do.

So we start with Visual Studio Code, made by Microsoft. It is an IDE that feels open source at first look. It has what seems like an endless chasm of plugins and themes to dive into. In this post, we will go over basic install and setup of VS Code as well as some of the plugins that I use daily that make life easier and some that are just fun little QoL things.

If you, like me, had a hard time choosing an IDE at first, then keep reading! I'm sure by the end of this you will either be excited to install VS Code, or even more confused like I was on my first VS Code walkthrough.

If you follow console.log weekly (first off, thank you! I am wildly flattered!), then you might have noticed last week I teased that we would be going over 3 different tools I use daily for dev study. Well, I have raging ADHD and decided that we would turn it into a mini series of posts about my 3 most used tools as an aspiring dev.

I mentioned in a different post that in a previous life that I was an editor for Film Production. Using editing/compositing software was a daily thing for me. Which helps make me no stranger to using heavily technical software, and all of the little caveats that it comes with. Both fun, and nightmarish.

While I do not have a lot of experience with IDE’s, I do have a decent amount of experience over the last year of using a markdown style software called obsidian.md. Luckily, that software and IDE’s feel similar in setup. Both in setting up the base file structure and the plugins marketplaces. So jumping into setting up VS Code wasn’t as difficult as I originally thought it would be. What was difficult was the plugins.

I had watched a couple videos and read some posts about “The Best IDE”. And like any fledgling dev, I got sucked into that idea. The best, this seems to be a massively common thread in this industry. People always want the best based on another opinion (maybe that’s what we get for letting capitalism win), not what is best for them. So, looking at a couple different IDE’s, I worked two very simple projects in both. I ran the index.html file for this site in WebStorm and In VS Code. And for this low level “coding” (idk if we can call what I do coding as I don’t actually write any programming languages yet, but might mess around and learn Python to do some game dev stuff for fun?) I couldn’t tell any differences between the two. So, I went with the one that had the larger user base, also, it is very important to know that WebStorm is free for non-commercial use only! If you are learning, or doing personal projects then its okay to use. If you want to use it to write a SaaS, then you will have to get a license.

Now let’s get into the fun shit. Let’s get VS Code on your computer and get it set up!

You will want to start by going to Visual Studio Code and selecting whichever OS you run (extra points if it is Linux because I said so). Once you have it downloaded you will want to run the .exe file and choose wherever you want it to live on your computer.

the steps we take for vanity

1. download vs code (you've already done this, great job!)
2. open once installation is complete
3. press CTRL + SHIFT + X (CMND instead of CTRL if on a mac)
4. install the following plugins
• Auto Close Tag - this will automatically create a closing tag when you type the opening.
• Auto Rename Tag - if you need to rename a tag, this will rename the connected tag.
• Bongo Cat - QoL, cute bongo with each keystroke.
• Nyan-mode - QoL, nyan progress bar.
• Purrgrammer: Kitty Pomodoro Timer - QoL, cute cat pomodoro timer for breaking up coding sessions to keep productivity at peak!
• Dark Horizon (theme) - simple, pastel/dark mode, and cute. The perfect theme!
• Prettier - reformats code once saved to be more readable and look... well, prettier.
• Open in Browser - take a guess ;)
• Live Preview - gives a live preview inside the IDE.
• Path Intellisense - autocompletes file names for you.
5. now you are ready to start building out your first project!

Obviously, feel free to download any other plugins you need as you go along. This is just a base 10 that I use everyday. And most are just QoL honestly to make things feel smoother. Personally I have added some React snippets and ES6/7 snippets as I am now beginning to work with those libraries.

I know there are a bunch of resources out there that claim to have the best list of plugins for you to download, I am not one of those at all. If you want that, then YouTube is the place for you honestly. This is just some practical, and cute resources that hopefully will make things easier for you starting out on your dev journey!

Honestly, if I could do this whole process over again, I would probably have just gone with VS Code straight out of the gate. I do really enjoy WebStorm, it just seems limiting to what you are legally allowed to do with the personal license. I want to write things that can be used commercially, not necessarily to make money, but I do want to contribute to open source very badly!

The biggest frustration to me was just finding the original list of what plugins would work best for me. I hope that by writing this, I can give someone some semblance of peace of mind. This list is just my opinion, and I’m just a lil pre-dev right now so take it with a grain of sand. If you want full good walkthroughs of how to use VS Code I recommend checking out the resources section below!

Here is something that has saved me mountains of time when working on console.log. You can make “snippets” as templates and populate a new doc with that template. Below is a simple walkthrough video of how to do that.

Using this I set up a snippet for each time I write a new blog post (technically I write my posts in Notion, then I transfer it to VS Code).

If you, like me, are just starting out on this wild ride of the wide world of dev, I recommend going as bare bones as you can, then find plugins as needs arise. This will allow you to natively see what the software can do and then fill in its gaps as they become apparent.

Finding the right tool for yourself can be grueling if you are just starting out. Being able to follow along to someone's pre-made list of things helps me a bunch, and I hope that it has helped someone feel more comfortable with getting into coding!

This is a really versatile and welcoming industry it seems and I would be honored if I helped just one person decided to join it!

• VS Code - Getting-Started

next up

github for beginners, by beginners