Visual Studio Code Setup

vscode-setup.md

Visual Studio Code Setup

My notes on my Visual Studio Code setup.

Font

Hasklig - a fork of Source Code Pro that supports ligatures.

Setting	Value
Font family	'Hasklig', 'Fira Code', 'Source Code Pro', 'Consolas', monospace
Font size	15px
Font weight	normal
Ligatures	true

Themes

Darcula - Color Theme

VS Code Marketplace	Repository
Darcula - VS Marketplace	Darcula - GitHub

Other Color Themes

VS Code Marketplace	Repository
Boxy - VS Marketplace	Boxy - GitHub
One Dark Pro - VS Marketplace	One Dark Pro - GitHub
Tomorrow Night
Ocean-Dark Soda

Settings.json

Extra customization

VS Code's color customization - settings.json

// Place your settings in this file to overwrite the default settings
{
    "editor.fontSize": 15,
    "editor.fontFamily": "'Hasklig', 'Fira Code', 'Source Code Pro', 'Courier New', monospace, 'Droid Sans Fallback'",
    "editor.tabSize": 2,
    "workbench.colorTheme": "Darcula", //"Dark (Monokai)",
    "workbench.activityBar.visible": true,
    "files.autoSave": "off",
    "editor.multiCursorModifier": "alt",
    "editor.wordWrap": "on",
    "pasteAndIndent.selectAfter": true,
    "css.fileExtensions": [
        "css",
        "scss",
        "sass"
    ],
    "workbench.colorCustomizations": {
        "sideBar.background": "#1d1d1d",
        "sideBar.border": "#222",
        "editor.background": "#222",
        "activityBar.background": "#272727",
        "editor.selectionBackground": "#223d6e"
    },
    "workbench.iconTheme": "material-icon-theme",
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "window.zoomLevel": 0,
    "markdown.preview.breaks": true,
    "explorer.confirmDragAndDrop": false,
    "terminal.integrated.rendererType": "dom",
    "window.menuBarVisibility": "default",
    "files.associations": {
        "*.html": "html"
    },
    "files.exclude": {
        "**/.directory": true
    },
    "editor.fontLigatures": true
}

Remove "files.exclude" and "terminal.integrated.renderType if not on Linux.

Material - Icon Theme

VS Code Marketplace	Repository
Material Icon - VS Marketplace	Material Icon - GitHub

Extensions

Name	VS Code Marketplace	Repository
Beautify	Beautify - VS Marketplace	Beautify - GitHub
Bracket Pair Colorizer 2	VS Marketplace	GitHub
HTML CSS Support	VS Marketplace	GitHub
Colorize	VS Marketplace	GitHub
Color Picker	VS Marketplace	GitHub
Better TOML	VS Marketplace	GitHub
ESLint	VS Marketplace	GitHub
Babel JavaScript or ES6/ES7	VS Marketplace	GitHub
Paste & Indent	Link	Link