DEV Community: Phillip A. Wessels

FAQ: Editors, IDEs & VS Code

Phillip A. Wessels — Fri, 04 Feb 2022 04:39:25 +0000

Everything you need to know to get started with VS Code: useful context to the world's most popular code editor, a simple install guide, and some useful keyboard shortcuts.

What's a code editor?

At its most basic level, a code editor could be a text editor such as Notepad. While it is possible to use such an application, there are dedicated applications for writing code with features such as syntax highlighting. Visual Studio Code (VS Code) is one of them, but you may also encounter others such as Notepad++, Sublime, and Atom. Many editors are extensible.

What's an Integrated Development Environment (IDE)?

An IDE is an application that comes with a comprehensive set of features for software development, including a code editor. Standalone editors are distinct from full IDEs, but the distinction is blurred once an editor is sufficiently extended.

What's the difference between Visual Studio Code and Visual Studio IDE?

Visual Studio Code is a code editor for a quick code-build-debug cycle with debugging, task running, and version control. Visual Studio IDE is for more complex workflows. While VS Code is free, Visual Studio IDE is premium software.

Why use VS Code?

VS Code is the most popular editor and has many features, including syntax highlighting, IntelliSense code completion, snippets, an integrated terminal, git support out of the box, and the ability to install extensions.

Sources / additional material:
The official VS Code documentation:
https://code.visualstudio.com/docs
https://code.visualstudio.com/docs/editor/whyvscode
https://code.visualstudio.com/docs/getstarted/userinterface
https://code.visualstudio.com/docs/editor/codebasics
https://code.visualstudio.com/docs/editor/extension-marketplace

💻 Set Up VS Code

These instructions are for Windows.

Download the Visual Studio Code installer for Windows. https://code.visualstudio.com/download
- The Insiders edition is a nightly build with the latest features, but it is not a stable release and you may encounter issues. That said, you can have both versions installed. https://code.visualstudio.com/insiders/
Once it is downloaded, run the installer (VSCodeUserSetup-{version}.exe). This will only take a minute.
By default, VS Code is installed under C:\users\{username}\AppData\Local\Programs\Microsoft VS Code.
If you want to use Windows Subsystem for Linux (WSL) - which I highly recommend - install the Remote - WSL extension.
- Restart VS Code.

Sources / additional material:
https://code.visualstudio.com/docs/setup/windows

Let's talk extensions

Extensions are key to the VS Code developer experience. You absolutely should explore extensions; often times you will do so to find the best & laziest way to do things. Extensions help make development more accessible.

Here are some of my personal recommendations for beginners:

vscode-icons

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
I find this extension just makes it easier to identify my files at a glance.

Path IntelliSense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
When you're typing in a relative file path, this extension helps by displaying IntelliSense suggestions for directories and files. It will save you from typos.

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Launch a live preview of your current HTML project in your web browser. It updates as you save changes to your work.

Prettier - Code Formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Prettier cleans up your code's formatting on save. Formatting your code doesn't make it fully clean code, but it gets you one step closer. Formatted code is important for readability. You will have to read your code, and others you share it won't want to if it's a mess.

Settings

VS Code's settings are stored in settings.json. You can access this by opening the command palette and entering "Preferences: Open Settings (JSON)". .json files are in JSON - JavaScript Object Notation. This means settings have to be entered in a specific way.

The entire settings object is in a single pair of curly brackets ({}).
Keys - the names of different settings - need to be in quotation marks. E.g., "editor.tabSize".
Values can be strings (in quotation marks), numbers (without quotation marks), boolean (true/false), arrays (comma-separated elements in square brackets []), or objects (comma-separated key: value pairs in curly brackets {}). It's out of our scope here to cover data types, but you can be mindful of the indicated syntax.

Here are some settings that I recommend:

Set the editor to update closing tags when opening tags are updated. Useful for HTML.
Set the default tab size to 2 spaces. I find that a minimal tab size makes it easier to share blocks of code.
Set the word wrap as on by default. I don't like scrolling left & right to read a long line of code.
Set the editor to format the document on save, and to use Prettier as the formatter.
Set Prettier to not create line breaks after a certain number of characters by giving it a large print width.

{
  "editor.linkedEditing": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.printWidth": 9999
}

You can create settings specific to a certain project as well. Just create a .vscode directory at the top level, and inside it create a settings.json file. Any specific settings here will override those settings within VS Code's main settings.json.

Here you can see that since this is a React project, I am setting all JavaScript files (.js) to be associated with the JavaScript React language mode ("javascriptreact"). The icons update as well to the React icon.

📜Key Bindings: VS Code

Ctrl+Shift+P Show Command Palette
Ctrl+P Quick Open, Go to File...
Ctrl+` Show Integrated Terminal
Alt+Click Insert additional cursors.

Sources / additional material: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

📜Key Bindings: Navigating & Selecting Text

Ctrl+→ Move the cursor one word to the right
Ctrl+← Move the cursor one word to the left
Shift+→ Select text to the right
Shift+← Select text to the left
Ctrl+Shift+← Select the word to the left.
Ctrl+Shift+→ Select the word to the right.
Shift+Home Select from the current position to the beginning of the current line.
Shift+End Select from the current position to the end of the current line.
Ctrl+Shift+Home Select from the current position to the beginning of the document.
Ctrl+Shift+End Select from the current position to the end of the document.
Ctrl+A Select all document content.

More here specific to VS Code: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

FAQ: Operating Systems, Terminals & Shells

Phillip A. Wessels — Wed, 02 Feb 2022 02:02:36 +0000

Hello! This is the first in a series of FAQ posts for beginner web developers. I hope this format is helpful!

What is UNIX?

UNIX is the ancestor of many modern operating systems (OSs). In 1969 at Bell Laboraties, Ken Thompson starting developing UNIX OS in PDP-7 computer assembly language. Dennis Ritchie joined Thompson and invented the C programming language. Then they rewrote UNIX in C, allowing different computers to run the code. UNIX also included user management and hierarchical file systems. Bell Labs released the first version of UNIX, Version 6 (V6), in 1976. Its design philosophy emphasizes small modular programs that can be used in combination for complex tasks:

Write programs that do one thing and do it well.
Write programs to work together.
Write programs to handle text streams, because that is a universal interface.

What is Linux?

The open-source GNU/Linux (commonly referred to as Linux) is the most famous Unix-like operating system (OS). Released in 1993, it spawned from the Free Software movement of the 1980s. Richard Stallman started the GNU Project of free software which needed a kernel. Fortunately, Linus Torvalds released the Linux kernel in 1991, which the GNU Project was able to combine with for a full OS that was released in 1993. Countless distributions have derived from GNU/Linux.

Why aren't all Unix-like operating systems called UNIX? Why do Mac OS X and Linux use the same commands?

The UNIX brand is trademarked and "True UNIX" operating systems like Mac OS X paid to be certified by The Open Group. While not officially UNIX, Unix-like OSs like Linux do fully or mostly meet the UNIX specification but are not certified; therefore, they do not use the UNIX name. The command line works the same, whether True UNIX or Unix-like. While not officially licensed, Unix-like OSs like Linux are designed to meet the UNIX specification.

What is the history of the modern Windows OS?

Windows NT, upon which the modern Windows and Xbox OSs derive from, started in 1977 with Digital Equipment's release of VMS 1.0 (one year after the release of the first version of UNIX). Many of the developers left Digital in 1988 to join Microsoft, which released Windows NT 3.1 in 1993 (the same year as the release of GNU/Linux).

How do Windows and UNIX-based OSs differ?

Both Windows NT and UNIX have roots in the mid-1970s and both were influenced by many identical theoretical OS concepts and principles. However, Windows and UNIX-based systems have different kernels engaging the hardware with different software built on top of those kernels, all based on different specifications. The software differs in many ways.

What is Windows Subsystem for Linux (WSL)?

Windows Subsystem for Linux lets developers run a GNU/Linux environment—including most command-line tools, utilities, and applications—directly on Windows, unmodified, without the overhead of a traditional virtual machine or dualboot setup. WSL 2 introduced an entirely new architecture that benefits from running a real Linux kernel. It runs in a lightweight virtual machine environment through a subset of Microsoft's Hyper-V features.

On Windows, why not use a virtual machine (VM) for Linux?

You can, but WSL requires fewer resources (CPU, memory, and storage) than a full VM. You can't easily work between the VM and Windows software.

What is a terminal?

A terminal is a program that runs a shell. There are many terminal applications, one being the Windows Terminal, another the integrated terminal in VS Code.

What is a shell?

A shell is an interpreter for command line language. The most common is Bash for UNIX-based operating systems, and PowerShell for Windows. Note: You cannot run UNIX-based commands through PowerShell, but there are many aliases matching UNIX-based commands which map to PowerShell cmdlets.

Are Bash and PowerShell just shells?

The same names are used to refer to the shells' scripting languages as well.

Why are Bash and PowerShell both useful?

Bash is the scripting language of the Bash shell and its various packages, while PowerShell adds advanced efficiency as an object-oriented scripting language.

What is PowerShell Core?

PowerShell Core is an open-source cross-platform (Windows, Linux, and macOS) fork of PowerShell. It is essentially the new version of PowerShell.

Sources / additional material:
https://www.itprotoday.com/windows-78/nt-vsunix-one-substantially-better
https://docs.microsoft.com/en-us/windows/wsl/about
https://www.udemy.com/course/the-linux-command-line-bootcamp/

Read the next FAQ: Editors, IDEs & VS Code