DEV Community

Cover image for VSCode - Essentials
Camilo Martinez
Camilo Martinez

Posted on • Originally published at Medium on

VSCode - Essentials

#vscode #productivity #webdev

⚠ Outdated: now VSCode support profiles

“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 to understand the difference between user and workspace settings.

Multiple Devices

Before starting, highly recommend install and setup 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

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

{
    "editor.fontFamily": "'Victor Mono', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Extensions

Editor 

{
    "bookmarks.saveBookmarksInProject": true,
    "bookmarks.navigateThroughAllFiles": true,
}
Enter fullscreen mode Exit fullscreen mode
settings.json
{
    "fileNestingUpdater.autoUpdate": true,
    "fileNestingUpdater.autoUpdateInterval": 720,
    "fileNestingUpdater.promptOnAutoUpdate": true,
    "fileNestingUpdater.upstreamRepo": "antfu/vscode-file-nesting-config",
    "fileNestingUpdater.upstreamBranch": "main"
}
Enter fullscreen mode Exit fullscreen mode
settings.json
{
    "filesize.showGzipInStatusBar": true
}
Enter fullscreen mode Exit fullscreen mode
settings.json
{
    "gremlins.showInProblemPane": true
}
Enter fullscreen mode Exit fullscreen mode
settings.json
{
    "gutterpreview.sourceFolder": "public"
}
Enter fullscreen mode Exit fullscreen mode
settings.json
equiman

VSCode Extension - TODO Tree

Camilo Martinez ・ Sep 2 '22

#vscode #productivity #webdev #markdown

Compare

Packages

Linters 

{
    "cSpell.language": "en,es"
}
Enter fullscreen mode Exit fullscreen mode
settings.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 }
    }
}
Enter fullscreen mode Exit fullscreen mode
settings.json

REST

Pair Programming

Theme 

{
    "workbench.iconTheme": "material-icon-theme"
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Version Control

No need

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

robole

VS Code: You don't need that extension

Rob OLeary ・ Aug 5 '20

#webdev #vscode #productivity #tips
robole

VS Code: You don't need that extension part 2

Rob OLeary ・ Nov 8 '21

#vscode #tooling #productivity

Settings

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

{
    "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
    },
}
Enter fullscreen mode Exit fullscreen mode
settings.json

Keyboard Shortcuts 

[
    // 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"
    },
]
Enter fullscreen mode Exit fullscreen mode
keybinding.json
equiman

VSCode - Create Files and Folders without using mouse

Camilo Martinez ・ Oct 2 '20

#vscode #productivity #terminal #programming
equiman

VSCode - Terminal without using mouse

Camilo Martinez ・ Sep 30 '22

#vscode #terminal #productivity #programming

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, Node.js, .Net y Arduino.

dock-macos

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 

{
    "powermode.combo.location": "off",
    "powermode.enabled": true,
    "powermode.explosions.duration": 300,
    "powermode.explosions.size": 5,
    "powermode.shake.enabled": false,
}
Enter fullscreen mode Exit fullscreen mode
settings.json

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

Bonus Track:

Highly recommend visiting https://vscodecandothat.com/ a great resource to learn useful tips on Code. And keep an eye on this 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

Top comments (6)

Collapse
 
traleeee profile image
Tra Le •

Official native profiles VSCode is out:
code.visualstudio.com/docs/editor/...

Collapse
 
rtxa profile image
rtxa •

After a year of discovering this tutorial, I should say this has become a vital part of my programming workflow (I made profiles for Rust, Java, C++, etc.).

I ended up making a script for Windows to improve their usability. This script adds the profiles in the context menu when you open folders/files. Check it out: github.com/rtxa/vscode-profiles-sc...

By the way, VSCode team is finally working on adding profiles support and is coming for next release :)

Collapse
 
equiman profile image
Camilo Martinez • • Edited

Wow, that scrip for context menu profiles is awesome. Terrific job 👏👏👏

Native multi-profiles support is a feature that I'll be waiting for for years. I've been testing this functionality with:

{
    "workbench.experimental.settingsProfiles.enabled": true,
}
Enter fullscreen mode Exit fullscreen mode

I found good things about it, for example, can be used with WSL 🥳, but one thing I did not like is that the recent project is not independent.

When the VSCode team officially releases the new option I'll try to update this series sharing the complete configuration of those profiles in a repository. And of course, using your py script but with --profile flag instead.

Collapse
 
rtxa profile image
rtxa •

Thanks, great that you liked! Yeah, for now until the Settings Profile isn't really finished and given the last polishes, I'll just keep using the profiles script which I think is a simple solution and works well.

Regards!, rtxa.

Collapse
 
rtxa profile image
rtxa •

Thanks for the series. I suggest adding the profile name in the title bar on settings.json to recognize more easily the profile: "window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName}${separator}Profile: Java"
Changing colors can be distracting in some cases, at least for me.

Collapse
 
equiman profile image
Camilo Martinez •

You are welcome.

I didn't know about it and can be customized in a lot of ways. I'll take a look.

// Controls the window title based on the active editor. Variables are substituted based on the context:
  // - `${activeEditorShort}`: the file name (e.g. myFile.txt).
  // - `${activeEditorMedium}`: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
  // - `${activeEditorLong}`: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
  // - `${activeFolderShort}`: the name of the folder the file is contained in (e.g. myFileFolder).
  // - `${activeFolderMedium}`: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
  // - `${activeFolderLong}`: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
  // - `${folderName}`: name of the workspace folder the file is contained in (e.g. myFolder).
  // - `${folderPath}`: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
  // - `${rootName}`: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
  // - `${rootPath}`: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
  // - `${appName}`: e.g. VS Code.
  // - `${remoteName}`: e.g. SSH
  // - `${dirty}`: a dirty indicator if the active editor is dirty.
  // - `${separator}`: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.
  "window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName}",

  // Adjust the appearance of the window title bar. On Linux and Windows, this setting also affects the application and context menu appearances. Changes require a full restart to apply.
  "window.titleBarStyle": "custom",

  // Separator used by `window.title`.
  "window.titleSeparator": " - ",
Enter fullscreen mode Exit fullscreen mode

code.visualstudio.com/docs/getstar...

Read next

marcuskohlberg profile image

Building simple event-driven applications with Pub/Sub

Marcus Kohlberg -

biswajitfsd profile image

Mastering REST API Best Practices in Python 🐍

Biswajit Patra -

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 71-80 (Part 8)

Probir Sarkar -

shieldstring profile image

Vite + React app MIME error when reloading the page

Agbo, Daniel Onuoha -