Visual Studio Code Review
A versatile code editor for programmers and web designers
Discovery
I recently got back into coding after a very long absence. I needed a new code editor as
the Expression Web software that I had been using was hopelessly obsolete. I researched and watched
YouTube Videos to determine a good alternative. I was also hoping to find something similar to the old
Multi-Edit software from the DOS days. (I'm dating myself here!) VSCode by Microsoft was by far and away
the #1 recommendation anywhere I looked. This choice was a simple one.
Installation
The software can be downloaded FREE from the Microsoft VSCode website. It installs on
Windows 10 or 11 just like anything else. Nothing special is required and it could not be easier.
Installing the Linux version is slightly more challenging, depending on your distro. I believe there
is a Mac version as well. The software will notify you of any updates to the main program as well as any
extensions so you can stay current.
First Impressions
I admit that this editor appears a bit overwhelming at first because it has so many
features. I was able to adapt and learn it rather quickly. It's quite slick! VSCode does resemble my old
Multi-Edit software from years ago! The left-hand side shows your working folder with the various files
withing your project. The center and largest pane (editor) is tabbed and contains the whatever file(s)
you have opened for coding. On the far-right is a narrow pane that indicates your relative position in
the current file. I picked the dark color scheme as it seems to be easier on my eyes when coding for
long periods of time.
The beauty of the VScode editor is that it can be used for so many things by way of installing
extensions. VScode can be setup for Website design, Python, C++, Java or whatever else you need. I have
found the extensions listed below to be quite helpful. Of course there are many, many more. I will
update this article as I discover extensions that I find useful.
My verdict: VSCode is one program that Microsoft really did right!
My Favorite Shortcuts
VSCode has a TON of shortcuts that can save you time. However there are way too many (well
over a hundred) for most of us to remember. Users will tend to memorize the ones they use most often.
This won't happen overnight but you will eventually find yourself getting faster and faster. You can use
the cheat sheet for the rest. These are a few of my personal favorites. The rest can be found on the
VSCode website.
Toggle Line Comment
Comment an entire line: type Ctrl + /
lorem ipsum
Generate a paragraph of simulated text: type lorem and press
enter
Reformat
Shift + Alt + F
Toggle Full Screen
F11
'Must Have' Extensions for Website Design
HTML & CSS Support
This extension has everything you need for working on web page design. Everything is color
coded, which makes things easier to read and understand. The syntax checker will show your mistakes in
red to prevent simple errors. FOR EXAMPLE: HTML tags are checked to confirm that both the opening and
closing tag are present.
Live Server
This extension allows you to display your HTML file in a live browser window as you code. I
like to have VScode on one monitor and the browser window on anther monitor. It continually refreshes
the page after every change is made. (Even changes to CSS!) You won't need to clear your browser cache.
This is a great time saver for website designers! It essentially ads a preview window somewhat like the
old Expression Web and FrontPage.
Code Spell Checker
This extension will check your code for spelling errors and help you correct them. It will
go through the entire file and fix mistakes wherever they occur. It knows the difference between
keywords and website text. Be prepared to add items to the dictionary if your editing anything with
containing acronyms or technical words. The extension does NOT look at punctuation.
Indent-Rainbow
This extension makes your code easier to read by coloring the indents. It makes it easier to
see what's between a pair of HTML tags.
Material Icon Theme
This extension will change and color code the icons for every file in your project. The goal
is to make things more visually appealing and easier to find. CSS files are purple, HTML is red(ish) JS
is yellow, images are blue and so on. Everything is color coded.
Auto Rename Tag
This extension is more of a time saver. If you change an html tag in your document, this
extension will find the closing tag and change it accordingly. No more hunting around for the other
tag.
Apache Conf
This extension is a syntax highlighter for Apache web server configuration files. There
isn't much to it really. It just makes the files easier to read.
Extensions for Multi Purpose Use
SFTP/FTP
This extension allows a person to connect via Secure FTP to another computer such as a
webserver. A simple configuration file contains the login information. You're able to sync the entire
website with your local copy or upload individual files as you work on them.
Python / Pylance
Everything you need to code in Python is in this extension. All code is color coded, which
makes things easier to read and understand. The syntax checker will show any mistakes in red to prevent
simple errors. Code can be debugged and executed. You may also want the Python Debugger and Python
Environments extensions.
Rainbow CSV
This extension allows you to view .CSV files in a color coded format. Each column will have
a different color, making it easier to read. It works best in dark mode. There are some options to align
the columns and shrink the columns for easier viewing.
Remote Explorer & Remote SSH
These two extensions allow you to connect to other computers or virtual machines to
perform remote work via command line. I used it with a pair of Linux VM's and a physical Linux box to
make a simple Python automation script that would run software updates, OS updates and perform reboots.
It was a timesaver for me so I didn't have to do it manually. The SSH capability, combined with a simple
Python script for automation would be extremely useful for anyone working in IT.
WSL
This extension allows a person to work with the Windows Subsystem for Linux. This assumes
you have WSL installed on your system.
