Visual Studio Code - My 2020 Setup

Contents​

• Overview
• Theme, File icons, and Font-family
• Settings
• Extensions
• Keyboard Shortcuts

Overview​

At its heart, Visual Studio Code is a lightweight IDE (Integrated Development Environment) that focuses on web development. It's lightning fast, perfect for day-to-day use, supports hundreds of languages, and helps you with syntax highlighting, bracket-matching, auto-indentation, and more. Best part, it has extensions!

Ultimately the choice of IDE comes down to whatever tools you feel comfortable using; however you would be wrong to use anything else.

Theme, File icons, and Font-family​

One of the first things I do is change the default typeface to a monospaced one - specifically to JetBrains Mono. It's a crisp, easy to read and predictable making it easy to quickly read code. Once downloaded and installed, open the settings.json file by hitting [Ctrl] + [Shift] + [P] and then typing open settings and selecting Preferences: Open Settings (JSON).

"editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 12

After we've sorted out that, now to update the themes. My two go twos are Atom One Dark Theme for the colour theme and Material Icon Theme for the icon theme. Both complement each other really well, and are easy on the eyes.

"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Atom One Dark"

Settings​

Next, we got some other tweaks that I have found to make using VS Code that little bit more productive to use.

Editor​

Here's some additional settings in the editor I would recommend tweaking.

"editor.tokenColorCustomizations": {
    "comments": "#dddddd69"
},
"editor.autoIndent": "full",
"editor.colorDecorators": true,
"editor.trimAutoWhitespace": true,
"editor.scrollBeyondLastLine": false,
"editor.formatOnSave": true,
"files.trimFinalNewlines": true

Cursor Styling​

The first line makes the cursor flicker a little bit smoother with a fade-in-out animation. The second line animates the movement of the cursor so it feels a little more natural.

"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": true

Git​

Here's some additional settings you might want to add to help when working with Git.

"files.autoSave": "afterDelay",
"git.enableSmartCommit": true,
"git.confirmSync": false,
"git.autofetch": true,
"git.postCommitCommand": "push"

Copy and Pasting​

We all copy code. This setting will help format that code on paste.

"editor.formatOnPaste": true

Extensions​

There are a lot of extensions out there and a lot of them are language specific, however, here are some of my favourite all-purpose extensions I use everyday.

• GitLens: GitLens shows Git annotations and author highlighting within files. It's super helpful when working on multi-author projects and you need to blame someone quickly.
• Code Spell Checker: I personally write all my technical documents directly in VS Code, and I definitely have spelling mistakes. This extension helps highlight those mistakes and provides suggestions, even when offline.
• Gremlins: Self explanatory, just get it. It'll save you hours of debugging one day. I still have nightmares of zero-width spaces!
• Rewrap: Helps with nicely wrapping long comments in the code.
• Markdown Preview Mermaid Support: Adds support to view mermaid tables in Markdown documents.
• Auto Markdown TOC: Generate a table of contents for Markdown files.
• AsciiDoc: An extension that provides live preview, syntax highlighting and snippets for the AsciiDoc format.
• HTML Preview: Adds support to preview HTML files while editing them in VS Code.
• Todo Tree: Searches for comment tags such as TODO and FIXME, and displays them in a tree view in the explorer pane.

Keyboard Shortcuts​

Let's now focus a little bit how to make editing easier.

To add or change shortcuts, press [Ctrl] + [K] and then [Ctrl] + [S] to open the GUI. Alternatively you can open the keybindings.json file by hitting [Ctrl] + [Shift] + [P] and then typing keyboard shortcuts and selecting Preferences: Open Keyboard Shortcuts (JSON).

Shortcut Cheat Sheets​

Here are some cheat sheets you can download and print for quick reference. Try not to attempt to learn them at once. This requires some time. So be patient, and you'll master them all eventually.

• Windows
• Linux
• MacOS

Transform Case​

Here's a useful one to add that I find using a fair bit to transform the case of variables or comments.

[
    {
        "key": "ctrl+shift+u",
        "command": "editor.action.transformToUppercase"
    },
    {
        "key": "ctrl+shift+l",
        "command": "editor.action.transformToLowercase"
    },
    {
        "key": "ctrl+shift+t",
        "command": "editor.action.transformToTitlecase"
    }
]

Go To Line​

You have an error on line 1325, which is in itself a problem, and you want to find that line quickly. Press [Ctrl] + [G] and input the line number.

Moving A Line Up Or Down.​

Sometimes we might need to move that one line out of our if statement or just move a line because it's called to early. We can achieve this by pressing [Alt] + [Down] and [Alt] + [Up] to move the selected line/s up and down in our code.

Copy The Current Line​

Ever needed to add keys to an object or fill an array but are too lazy to write each line. Press [Alt] + [Shift] + [Up] and just changing what you need. This copies the currently selected line and pastes it in one line below.

Show A Suggestion​

In Visual Studio Code there are build-in suggestions. Most of the time it'll pop-up automatically, but on the off chance it doesn't, press [Ctrl] + [Spacebar].

Comment Out The Current Selection​

Need to add a comment and not sure of the syntax, no worries! Simply press [Ctrl] + [/]. It also does multiple lines.

Cut Entire Line​

Need to cut the entire line, press [Ctrl] + [X] when no code is selected.