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 within 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.

TODO Highlight

This simple extension will highlight all TODO: and FIXME: tags in your files so they stand out. You wont forget about things you still need to fix within your project.

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.