Visual Studio Code Set-Up

Visual Studio Code is a free text-editor created by Microsoft. It is a lesser version than the full Visual Studio IDE (Integrated Development Environment).

Visual Studio Code combines many good aspects of multiple text-editors. It has an easy to use plugin manager and is easy to customize.

You can download Visual Studio Code HERE.

Recommended Plugins:

• Express (server for live-viewing your frontend applications)
• Beautify
• jshint
• jslint
• console wrapper
• live html previewer
• vscode-icons

Recommended User Settings:

VS Code has default settings that are contained in the Default Settings file. This document cannot be directly changed, but you can override specific settings by adding an edited setting in the settings.json file.

To do this click on code in the taskbar and then click on settings. Edit the JSON settings in settings.json

{
    "express.portNumber": 8181,
    "files.autoSave": "onFocusChange",
    "beautify.onSave": true,
    "editor.fontSize": 14
}

Recommended User Settings:

VS Code has default keyboard shortcuts that can be seen in Default Keyboard Shortcuts. Like User Settings, these can be overridden in the keybindings.json file.

Click on code in the taskbar and then click on settings. Edit the JSON settings in settings.json

[{
    // Opens a terminal in the VS Code window
    "key": "cmd+shift+t", 
    "command": "workbench.action.terminal.new"
}, {
    // Runs an express server and opens a window with the page
    "key": "cmd+l", 
    "command": "express.hostWorkspaceAndOpenInBrowser",
    "when": "editorTextFocus"
}, {
    // Kills the express server
    "key": "cmd+k",  
    "command": "express.stopServer",
    "when": "editorTextFocus"
}, {
    // finds the next match of highlighted code
    "key": "cmd+b", 
    "command": "editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus"
}, {
    // Duplicated a line on a new line below
    "key": "cmd+d", 
    "command": "editor.action.copyLinesDownAction",
    "when": "editorTextFocus && !editorReadonly"
}, {
    // Wraps a highlighted variable or string in a console.log function
    "key": "cmd+w", 
    "command": "extension.consoleWrapper",
    "when": "editorTextFocus"
}]