Install VS Code
There are several viable code editors for web developers, but VS Code is a standard solution.
Visual Studio Code is an integrated development environment where you can write and manage your source code. Of course, you could write everything in a text editor, but that would be much slower and prone to errors.
Previously, we learned command-line basics for navigation and file management. In this article, you'll install VS Code, do basic configuration, take note of frequently used keyboard shortcuts, and get connected to resources.
Note: There is a different product called Visual Studio, which Microsoft also makes. However, that's not what we're looking for here.
For web development, we want Visual Studio Code (VS Code).
macOS Requirements:
https://code.visualstudio.com/Docs/supporting/requirements
The tested version is 10.11+ or OS X El Capitan. Apple has a support article for El Capitan showing supported hardware from 2007 for some models.
https://support.apple.com/kb/SP728
To download VS Code, visit:
https://code.visualstudio.com/Download
Make sure to download the correct version for your hardware. For example, if you have an Apple M1 chip, click on the "Apple Silicon" button. "VS Code supports macOS ARM64 builds that can run on Macs with the Apple M1 chip."
You can follow the step-by-step installation instructions for macOS here:
https://code.visualstudio.com/docs/setup/mac
Launching from the command line
I often download or clone GitHub projects using the command line. After downloading a project, it's helpful to open your working directory in VS Code with a shortcut. Be sure to follow the instructions in "Launching from the command line."
In VS Code:
"Open the Command Palette (Cmd+Shift+P) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command."
"Code will now prompt with 'osascript' for Administrator privileges to install the shell command."
Yes.
"Shell command 'code' successfully installed in PATH."
Restart the terminal for changes to take effect. In the future, you can navigate to a directory and enter code, space, period (code .) to open the folder in VS Code. And this works even when VS Code isn't open.
You may need to provide VS Code further permissions. For example:
"Terminal" would like to access files in your Documents folder.
Ok.
The "Getting Started" page for VS Code has additional resources.
https://code.visualstudio.com/docs/
Keyboard shortcuts
There are two things to look at here: a PDF shortcuts reference and a longer list of commands.
The keyboard shortcut reference sheet can be a big time saver.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
List of default key bindings.
https://code.visualstudio.com/docs/getstarted/keybindings
Beyond the typical commands like save, cut, copy, and paste, undo and redo, a few shortcuts save a lot of time. Most of the shortcuts that I frequently use are listed under "Basic Editing." You might want to commit these commands to memory, but that will also happen in time anyway.
Navigation
Go to End of File: ⌘↓ ( command + down arrow )
Go to Beginning of File: ⌘↑ ( command + up arrow )
Toggle Integrated Terminal: ⌃` ( control + ` which is above the tab key )
I also like to navigate to the beginning or end of a line or word.
End of line: ⌘→ ( command + right arrow )
Beginning of line: ⌘← ( command + left arrow )
End of word: ⌥→ ( option + right arrow )
Beginning of word: ⌥← ( option + left arrow )
You can select a line or words using the commands above with the shift key.
Editing
Indent: tab
Outdent: ⇧ tab ( shift + tab )
Add Selection To Next Find Match: ⌘D ( command + d )
For example, select a word that occurs multiple times on a page, then press ⌘D to determine the next match.
Insert Cursor Below: ⌥⌘↓ (option + command + down arrow )
Insert Cursor Above: ⌥⌘↑ (option + command + up arrow )
Use these commands as a starting selection for multi-line editing
You can also hold down the option key, then click and drag up or down multiple lines.
Move Line Down: ⌥↓ ( option + down arrow )
Move Line Up: ⌥↑ ( option + up arrow )
Copy Line Down: ⇧⌥↓ ( shift + option + down arrow )
Copy Line Up: ⇧⌥↑ ( shift + option + up arrow )
Toggle Line Comment: ⌘/ ( command + / )
Toggle Word Wrap: ⌥Z ( option + z )
Select current line: ⌘L ( command + l )
Jump to matching bracket: ⇧⌘\ ( shift + command + \ )
Indent Line: ⌘] ( command + ] )
Outdent Line: ⌘[ ( command + [ )
Formatting
Format Document: ⇧⌥F ( shift + option + f )
Format Selection: ⌘K ⌘F ( command + k + f )
Search
Find: ⌘F (command + f )
Show Search: ⇧⌘F ( shift + command + f )
Cycle Results: ⌘G
Disabling telemetry
Code > Preferences > Telemetry Settings (or)
Code > Preferences > Settings > Application > Telemetry
Use the drop down menu to select your preference (e.g. off).
https://code.visualstudio.com/docs/getstarted/telemetry
Resources
The Microsoft Learn website has courses about VS Code and web development. For example, you can find a step-by-step guide to getting started with VS Code below.
https://docs.microsoft.com/en-us/learn/modules/develop-web-apps-with-vs-code/
The lessons and summary often have additional resources, which can be helpful.
The Node/JavaScript section on the Visual Studio Code site provides much more detail, including JavaScript, Node, and React tutorials.
https://code.visualstudio.com/docs/nodejs/working-with-javascript
IntelliSense is a built-in code completion feature that can be further enhanced by an optional extension called IntelliCode.
https://code.visualstudio.com/docs/editor/intellisense
What's the difference?
https://docs.microsoft.com/en-us/visualstudio/intellicode/faq
Extensions
ESLint, Prettier, and Visual Studio IntelliCode are extensions that help with error checking, format standardization, and code completion.
"ESLint statically analyzes your code to quickly find problems."
"Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary."
https://prettier.io/docs/en/index.html
"The Visual Studio IntelliCode extension provides AI-assisted development features ... in Visual Studio Code, with insights based on understanding your code context combined with machine learning."
https://visualstudio.microsoft.com/services/intellicode
You can search for extensions in VS Code or by visiting the marketplace.
⇧⌘X ( shift + command + x )
https://marketplace.visualstudio.com/VSCode
Uninstalling VS Code
If you need to uninstall VS Code, there are a few resources below to help you. Additionally, you may want to seek out a specialized uninstaller utility.
https://code.visualstudio.com/docs/setup/setup-overview#_how-can-i-do-a-clean-uninstall-of-vs-code
https://github.com/Microsoft/vscode/issues/52151
The instructions are, “Delete $HOME/Library/Application Support/Code and ~/.vscode.”
If you visit your home folder in a Finder window, all you'll see is stuff like Desktop, Documents, Downloads, and so forth. However, you can use the command line to view and delete the folders. Typically user libraries are not visible to users, and folders that begin with a period are not visible in the operating system.
There are two different items to delete.
- Navigate to
cd ~/Library/Application Supportthenrm -rf code - Navigate to
cd ~thenrm -rf .vscode
https://stackoverflow.com/questions/42603103/how-to-completely-uninstall-vscode-on-mac
https://izziswift.com/how-to-completely-uninstall-vscode-on-mac/
Wrap up
Getting all your tools installed properly sometimes feels like half the battle. At this point, you hopefully have VS Code installed and are ready for the next step!