VSCode - Essentials
Tags: vscode, productivity, webdev
Published: 2018-09-27 23:16:23

---
title: VSCode - Essentials
published: true
tags: vscode, productivity, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ac2h62j7h2kami40whkb.png
series: vscode-flavors
---

“You must have…” that’s the main title in a lot of post and videos starts when talks about Visual Studio Code extensions to get more attention, but this **editor** is like a chameleon that can morph his environment all that it wants, that’s why you need to create **your own recipe**.

These things are very opinionated. I’m going to share “my configuration" for **general-purpose** and I hope someone can pick something useful on the whole of this. 

Recommend read first about [settings on visual studio code](https://code.visualstudio.com/docs/getstarted/settings) to understand the difference between user and workspace settings.

# Multiple Devices

Before starting, highly recommend install and setup [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) extension. It adds the ability to back up your settings and extensions in the cloud using a private gist to store those files.

It syncs all extensions and complete User Folder that Contains:

1. Settings File
2. Keybinding File
3. Launch File
4. Snippets Folder
5. VSCode Extensions & Extensions Configurations
6. Workspaces Folder

So you can sync your devices and don't waste your time when making a factory reset or buy a new device.

# Font

- Download and install [Victor Mono](https://rubjo.github.io/victor-mono/) fonts

> Victor Mono is an open-source monospaced font with optional semi-connected cursive italics and programming symbol ligatures.

```json
{
    "editor.fontFamily": "'Victor Mono', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true
}
```
<figcaption>settings.json</figcaption>

# Extensions

## Editor

- [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

```json
{
    "bookmarks.saveBookmarksInProject": true,
    "bookmarks.navigateThroughAllFiles": true,
}
```
<figcaption>settings.json</figcaption>

- [Docs View](https://marketplace.visualstudio.com/items?itemName=bierner.docs-view)

- [File Nesting Updater](https://marketplace.visualstudio.com/items?itemName=antfu.file-nesting)

```json
{
    "fileNestingUpdater.autoUpdate": true,
    "fileNestingUpdater.autoUpdateInterval": 720,
    "fileNestingUpdater.promptOnAutoUpdate": true,
    "fileNestingUpdater.upstreamRepo": "antfu/vscode-file-nesting-config",
    "fileNestingUpdater.upstreamBranch": "main"
}
```
<figcaption>settings.json</figcaption>

- [filesize](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize)

```json
{
    "filesize.showGzipInStatusBar": true
}
```
<figcaption>settings.json</figcaption>

- [Gremlins tracker for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins)

```json
{
    "gremlins.showInProblemPane": true
}
```
<figcaption>settings.json</figcaption>

- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

- [Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

```json
{
    "gutterpreview.sourceFolder": "public"
}
```
<figcaption>settings.json</figcaption>

- [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg)

- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

{% post https://dev.to/equiman/vscode-extension-todo-tree-1n02 %}

## Compare

- [Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)

- [L13 Diff (Directories)](https://marketplace.visualstudio.com/items?itemName=L13RARY.l13-diff)

## Packages

- [Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)

## Linters

- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + [Spanish](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-spanish)

```json
{
    "cSpell.language": "en,es"
}
```
<figcaption>settings.json</figcaption>

- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

```json
{
    "[markdown]": {
        "editor.formatOnSave": false,
        "editor.quickSuggestions": {
            "comments": "on",
            "strings": "on",
            "other": "on"
        },
        "editor.tabSize": 2,
        "files.trimTrailingWhitespace": false,
    },
    "markdownlint.config": {
        "MD024": { "siblings_only": true }
    }
}
```
<figcaption>settings.json</figcaption>

- [Mintlify](https://marketplace.visualstudio.com/items?itemName=mintlify.document)

## REST

- [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

- [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)

- [vscode-random](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random)

## Pair Programming

- [Live Share
](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

## Theme

- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

```json
{
    "workbench.iconTheme": "material-icon-theme"
}
```
<figcaption>settings.json</figcaption>

## Version Control

- [Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame)

- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

- [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)

- [GitHub Pull Request](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)

- [Remote Repositories](https://marketplace.visualstudio.com/items?itemName=github.remotehub)

---

# No need

There are a lot of extensions that are useless and can be replaced with some VSCode configuration to do the same.

{% link https://dev.to/robole/vs-code-you-don-t-need-that-extension-18d7 %}

{% link https://dev.to/robole/vs-code-you-dont-need-that-extension-part-2-34o3 %}

---

# Settings

Combine general-purpose (user settings) with specific purposes (workspace settings) on each project.

```jsonc
{
    "breadcrumbs.enabled": true,
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.autoIndent": "full",
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports": false
    },
    "editor.cursorBlinking": "expand",
    "editor.formatOnPaste": false,
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.letterSpacing": 1,
    "editor.minimap.enabled": false,
    "editor.linkedEditing": true,
    "editor.renderWhitespace": "boundary",
    "editor.rulers": [80, 120],
    "editor.snippetSuggestions": "top",
    "editor.stickyScroll.enabled": true,
    "editor.suggest.preview": true,
    "editor.tabCompletion": "on",
    "editor.unicodeHighlight.ambiguousCharacters": true,
    "editor.unicodeHighlight.invisibleCharacters": true,
    "editor.wordWrap": "off",
    "explorer.autoReveal": true,
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true
    },
    "files.trimTrailingWhitespace": true,
    "git.autofetch": true,
    "git.alwaysShowStagedChangesResourceGroup": true,
    "git.mergeEditor": true,
    "git.suggestSmartCommit": false,
    "merge-conflict.diffViewPosition": "Below",
    "search.exclude": {
        "**/build": true,
        "**/coverage": true,
        "**/dist": true
    },
    "search.showLineNumbers":true,
    "screencastMode.onlyKeyboardShortcuts":true,
    "terminal.integrated.fontFamily": "MesloLGS NF",
    "terminal.integrated.fontSize": 12,
    "terminal.integrated.shellIntegration.enabled": true,
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "terminal.integrated.defaultProfile.osx": "iTerm.app",
    "window.openWithoutArgumentsInNewWindow": "on",
    "window.menuBarVisibility": "compact",
    "window.commandCenter": true,
    "workbench.editor.highlightModifiedTabs": true,
    "workbench.editor.decorations.colors": true,
    "workbench.editor.decorations.badges": true,
    "workbench.settings.editor": "json",
    "workbench.startupEditor": "none",
    "workbench.tree.renderIndentGuides": "none",
    "[json][jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features",
        "editor.formatOnSave": true,
        "editor.tabSize": 4,
    },
    "[yaml]": {
        "editor.formatOnSave": false,
        "editor.tabSize": 2,
        "files.trimTrailingWhitespace": false
    },
}
```
<figcaption>settings.json</figcaption>

---

# Keyboard Shortcuts

```json
[
    // Wrap Emmet
    {
        "key": "ctrl+shift+w", //cmd+w on mac
        "command": "editor.emmet.action.wrapWithAbbreviation",
        "when": "editorHasSelection",
    },
    // Comments
    {
        "key": "ctrl+numpad_divide",
        "command": "editor.action.commentLine",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+/",
        "command": "editor.action.commentLine",
        "when": "editorTextFocus && !editorReadonly"
    },
]
```
<figcaption>keybinding.json</figcaption>

{% post https://dev.to/equiman/vscode-create-files-and-folders-on-the-go-2hd6 %}

{% post https://dev.to/equiman/vscode-terminal-without-using-mouse-5bd0 %}

---

# Dear Santa

I’m only missing one thing on this marvelous Editor, the ability to change from one environment to another and don’t have loaded all the tools even when they don't need them.

Actually, you can disable it manually on each project, but it will be good in the future to have the ability to switch between environments and shut down the extensions that are not needed.

While VSCode Team solves that, we can use a workaround creating flavored versions: [React](https://dev.to/equiman/vscode-react-flavored-134h), [Node.js](https://dev.to/equiman/vscode-node-js-flavored-37di), [.Net](https://dev.to/equiman/vscode-net-flavored-6e9) y [Arduino](https://dev.to/equiman/vscode-arduino-flavored-mgj).

![dock-macos](https://dev-to-uploads.s3.amazonaws.com/i/ps4q9dzf8x5hpnqa8c6r.png)

# One Ring To rule them all!

You can make that your team works with the same settings just save it as `settings.json` file and extensions as `extensions.json` file, both inside `.vscode` folder.

Then when someone clone/pull the repository will overwrite your Code user settings with workspace settings and show extensions as recommended.

# Special Mention

- [Power Mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)

```json
{
    "powermode.combo.location": "off",
    "powermode.enabled": true,
    "powermode.explosions.duration": 300,
    "powermode.explosions.size": 5,
    "powermode.shake.enabled": false,
}
```
<figcaption>settings.json</figcaption>

- [VSCode HackerTyper](https://marketplace.visualstudio.com/items?itemName=jevakallio.vscode-hacker-typer)

Live Demos without the panic? Yeah... easy peasy Japanesey!

{% youtube ulnC-SDBDKE %}

# Bonus Track:

Highly recommend visiting [https://vscodecandothat.com/](https://vscodecandothat.com/) a great resource to learn useful tips on Code. And keep an eye on this [Live Share](https://visualstudio.microsoft.com/services/live-share/) extension.

Go to the menu `Help > Interactive Playground` and you can try essential editor features in a short walkthrough.

---

**That’s All Folks!
Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)