Visual Studio Code
📝 What is VS Code?
Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging.
First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-build-debug cycle means less time fiddling with your environment, and more time executing on your ideas.
🧠 In My Experience
Now their main page blurb is all about AI. Atom was my favorite code editor, made by GitHub, but Microsoft, who makes VS Code, bought GitHub, so here we are. VS Code is the best editor these days for JavaScript and Python in my opinion. It became popular because it was simple and easy to setup and use, unlike Visual Studio, and it came with a lot of features so you were up and running quickly - and also because of the massive corporate sponsorship by Microsoft. There are other great editors, and ultimately it is up to your own preference. You will find that most JavaScript developers use VS Code.
Download and Install
They have a guide for installation. On windows, it's really simple, though. Just go to their main page, assuming you're using Windows you should see a Download for Windows
button, and click that.
Go to your Downloads or wherever you downloaded the .exe file, and double click to run it. You should not need Admin privileges to run it.
Using a Code Editor as a Skill
Before I go into settings, or extensions, or keyboard shortcuts or anything else, I just want to introduce one concept: the use of a code editor, or any tool, as a skill. The better you know your tool, the better you will be at your job. I can't overstate how important it is to know VS Code or whatever editor you're using. It will greatly increase your productivty. Imagine trying to code without copy/paste. Or without multiple cursors. It takes time and might seem annoying at first, so my advice is to approach it like anything else you are learning. There is a lot to it and it will take time and that's ok. You will get stronger and more agile over time and coding will be a better experience for you.
A student on the inside shared a story with me when I introduced this concept to her and the class. I am so grateful to know her and to be able to share that with you now.
A young man and an old man were in a wood chopping competition. The young man started hard and fast and took as few breaks as possible. When he took a break, he would see that the old man was sitting and seemingly resting. The young man kept going, at the same pace, barely taking a break, and every time he looked over the old man was sitting. Finally towards the end the young man saw that the old man was done. Dumbfounded, he asked him, how did you beat me? Every time I looked at you, you were taking a break. The old man replied, I wasn't taking a break. I was sharpening my axe so that I could cut more quickly.
Extensions
You will need to install some extensions, depending on what you're doing. There are a lot of extensions that will support other languages like Python or C, and tools like Docker, API testing and databases.
Focusing on React full stack, I recommend:
- ES7+ React/Redux/React-Native snippets
- a Markdown editor/previewer, I like Markdown Preview Enhanced
- Thunder Client is great for testing APIs, and is easier to setup and use than Postman, although I do find Thunder Client to be buggy sometimes.
And most importantly, I strongly recommend getting a theme that is easy on the eyes and/or that makes you happy. I like Atom One Dark Theme. You can have as many as you like and I recommend going 🐖 wild.
VS Code Tutorial
I will refer to their own site for the following information. It's a great reference although it can be a little strange to navigate and find things. There is so much more available here than the basics that I have noted below.
- VS Code Tutorial: https://code.visualstudio.com/docs/getstarted/getting-started
- Settings: https://code.visualstudio.com/docs/configure/settings
- Extensions: https://code.visualstudio.com/docs/getstarted/extensions
- Keyboard shortcuts: https://code.visualstudio.com/docs/configure/keybindings
- Kayboard shortcut reference: https://code.visualstudio.com/docs/reference/default-keybindings
- Keyboard shortcut reference (PDF): https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
- The VS Code terminal: https://code.visualstudio.com/docs/terminal/getting-started