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
Top comments (0)