Improve the visual semantics of vscode

I made a theme for vscode called “enzo”. It’s a pretty weird theme. It’s a normal theme and then I also use two additional extensions on top of that to do some extra fancy styling stuff using regex and CSS injection.

Eventually I want to strip out stuff from those other extension and hack it into my own customization so that people don’t have to use the weird installation process that I mention in the README.

I use some other extensions though and I wanted to share them because I think they’re great! I’ve also included my settings in case you wanted to give it a try too. These are not all the extensions I use. These are JUST the extensions that I use to improve the visual semantics of vscode.

Color Highlight

Color Highlight is a really straightforward extension. It does one thing. Any place in code there is an rgb, rgba, or hex color code it will highlight with the color of that code. It’s great for allowing you to preview colors from within vscode, and scan through code quickly and see where different sections are.

No special settings needed for this one. It works straight the way you need right out the box.

Highlight Matching Tag

I already implement tag matching in my theme using regex. In my theme I use an extension called “Highlighter” that allows you to configure custom visual styling for pieces of code which are defined by regex. Using this I a highlight php, html, and reactJS component tags.

With Highlight Matching Tag I can then alter or update these styles based upon the currently selected tab. This is really powerful!

This extension is also somewhat apparently magic. Have you ever tried looking up how to regex HTML? Let’s just say… it’s a hard problem and that link is worth clicking. But it’s also a little bit of an exaggeration as this theme manages to do a pretty damn good job of using regex to parse HTML for styling purposes.

  //- Highlight Matching Tags
  "highlight-matching-tag.highlightSelfClosing": true,
  "highlight-matching-tag.highlightFromContent": true,
  "highlight-matching-tag.styles": {
    "opening": {
      "full": {
        "custom": {
          "backgroundColor": "rgba(180, 20, 80, 0.3)",
          // "borderWidth": "2px 0 0 0",
          // "borderColor": "rgba(180, 20, 80, 0.6)",
          // "borderStyle": "solid",
          "borderRadius": "16px 0 0 0"
        }
      },
      "left": {
        "custom": {
          "backgroundColor": "rgba(180, 20, 80, 0.3)",
          "borderWidth": "2px 0 0 0",
          "borderColor": "rgba(180, 20, 80, 0.6)",
          "borderStyle": "solid",
          "borderRadius": "16px 0 0 0",
          "color": "blue"
        }
      },
      "name": {
        "custom": {
          "backgroundColor": "rgba(180, 20, 80, 0.3)",
          "color": "rgba(180, 20, 80, 0.6)",
          "borderWidth": "2px 0 0 0",
          "borderColor": "rgba(180, 20, 80, 0.6)",
          "borderStyle": "solid"
        }
      },
      "right": {
        "custom": {
          "backgroundColor": "rgba(180, 20, 80, 0.3)"
          // "borderColor": "white",
          // "borderStyle": "solid",
          // "borderRadius": "16px 0 0 0",
        }
      }
    },
    "closing": {
      "full": {
        "custom": {
          "backgroundColor": "rgba(180, 20, 80, 0.3)",
          // "borderWidth": "2px 0 0 0",
          // "borderColor": "rgba(180, 20, 80, 0.6)",
          // "borderStyle": "solid",
          //"borderRadius": "16px 0 0 0",
          "borderRadius": "0 0 16px 0"
        }
      },
      "left": {
        "custom": {
          //"backgroundColor": "rgba(180, 20, 80, 0.3)",
          // "borderWidth": "2px 0 0 0",
          // "borderColor": "rgba(180, 20, 80, 0.6)",
          // "borderStyle": "solid",
          // "borderRadius": "16px 0 0 0",
        }
      },
      "name": {
        "custom": {
          "backgroundColor": "rgba(180, 20, 80, 0.3)",
          "borderWidth": "0 0 2px 0",
          "borderColor": "rgba(180, 20, 80, 0.6)",
          "borderStyle": "solid"
        }
      },
      "right": {
        "custom": {
          "backgroundColor": "rgba(180, 20, 80, 0.3)",
          // "borderColor": "white",
          // "borderStyle": "solid",
          "borderRadius": "0 0 16px 0"
        }
      }
    }

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 colorizes your bracket pairs. Pretty straight forward right? A lot of these extensions are. Bracket Pair Colorizer is probably one of the most powerful extensions for improving vscode’s visual semantics out there. Most of these extensions are useful to me because they help keep the context I’m working in clear. They help show the scope of the code I’m currently working on and the general structure of the information surrounding it. Code is fundamentally just layers and layers of abstraction. It’s lots of really simple things put together in little configurations and then recursively built upon. Having something like BPC2 really helps with that especially when you’re looking through a really nested JSON file.

  //- Bracket Pair Colorizer
  "bracket-pair-colorizer-2.forceIterationColorCycle": false,
  "editor.matchBrackets": false, //this is the built in match brackets
  "bracket-pair-colorizer-2.colors": [
    "#F7A13D",
    "#FC6739",
    "rgba(255, 66, 82, 1)",
    "rgba(210, 52, 134, 1)",
    "rgba(171, 35, 148, 1)"
    // "rgba(210, 52, 134, 1)",
    // "rgba(255, 66, 82, 1)",
    // "#FC6739",
    // "#F7A13D",
    // "#9EE83C"
  ],
  "bracket-pair-colorizer-2.activeScopeCSS": [
    "borderWidth : 2px",
    "borderColor : {color};",
    "backgroundColor : gold;",
    "fontWeight: bold;",
    "borderRadius: 4px;"
  ],
  "bracket-pair-colorizer-2.scopeLineCSS": [
    "borderStyle : solid",
    "borderWidth : 3px",
    "borderColor : {color}; opacity: 1;",
    "backgroundColor : {color}; opacity: 0.5;",
    "borderSpacing : 15px"
  ],
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  "bracket-pair-colorizer-2.highlightActiveScope": true,
  "bracket-pair-colorizer-2.showBracketsInRuler": true,
  "bracket-pair-colorizer-2.rulerPosition": "Full",

Indenticator

Indenticator is a small expansion on the default indent guides functionality of vscode. Instead of just highlighting the current indent scope, it can highlight both the current scope of the indent block that your cursor is currently on, AND the highlight the scope of the block containing the current scope. I find the extra context helpful.

//- Indenticator
  /******************************************************/
  /********** Standard Indent Highlight Config **********/
  /******************************************************/
  /* Whether to highlight the indent of the block enclosing the current line */
  "indenticator.showHighlight": true,
  /* Color of the indent marker for dark themes */
  "indenticator.color.dark": "#000098",
  /* Color of the indent marker for light themes */
  "indenticator.color.light": "red",
  /* Width of the indent marker in pixels */
  "indenticator.width": 2,
  /* Line style of the indent marker (e.g. "inset", "dashed", "dotted", ...) */
  "indenticator.style": "solid",
  /* Whether to display the hover near the indent line */
  "indenticator.showHover": false,
  /* Lines before the current indent to be shown on hover */
  "indenticator.hover.peekBack": 1,
  /* Lines after the current indent to be shown on hover */
  "indenticator.hover.peekForward": 0,
  /* Remove lines from the hover at the beginning and end that have less characters than this */
  "indenticator.hover.trimLinesShorterThan": 2,
  /* Block placeholder to be written between peeked lines */
  "indenticator.hover.peekBlockPlaceholder": "...",

  /***************************************************/
  /********** Inner Indent Highlight Config **********/
  /***************************************************/
  /* Whether to highlight the indent of the block enclosed by the current line */
  "indenticator.inner.showHighlight": true,
  /* Color of the indent marker for dark themes */
  "indenticator.inner.color.dark": "#1b91ff",
  /* Color of the indent marker for light themes */
  "indenticator.inner.color.light": "blue",
  /* Width of the indent marker in pixels */
  "indenticator.inner.width": 3,
  /* Line style of the indent marker (e.g. "inset", "dashed", "dotted", ...) */
  "indenticator.inner.style": "solid",
  /* Whether to display the hover near the inner indent line */
  "indenticator.inner.showHover": false,
  /* Lines before the current inner indent to be shown on hover */
  "indenticator.inner.hover.peekBack": 1,
  /* Lines after the current inner indent to be shown on hover */
  "indenticator.inner.hover.peekForward": 0,
  /* Remove lines from the inner indent hover at the beginning and end that have less characters than this */
  "indenticator.inner.hover.trimLinesShorterThan": 2,
  /* Block placeholder to be written between peeked lines */
  "indenticator.inner.hover.peekBlockPlaceholder": "...",
  /* Whether to display the current indent depth on the statusbar */

  //further configs
  "indenticator.showCurrentDepthInStatusBar": true,
  /* A construct with language identifiers as properties containing a subset of indenticator options to be applied for that language */
  //"indenticator.languageSpecific": {},

Guides

Guides expands on this further. The main thing I like about it is that you can set it to colorize the indent backgrounds in a looping array of colors. In addition to that you can also set it to style all interior indent guides differently than exterior or active scope. I use both this and Identicator because I like the way that Indenticator handles the active scope better, and because I think having the second “containing active scope” guide is a useful addition. Between these last two I feel like I never am lost no matter how deeply nested a file is.

  //-Guides and Indents
  "guides.enabled": true,
  "guides.active.extraIndent": false,
  "guides.active.gutter": false,
  "guides.indent.showFirstIndentGuides": true,
  "guides.active.hideOnSelection": true,
  "guides.normal.hideOnSelection": true,
  "guides.stack.hideOnSelection": true,
  "guides.overrideDefault": true,
  "guides.stack.enabled": true,
  "guides.stack.style": "solid",
  "guides.active.style": "solid",
  "guides.normal.style": "dotted",
  "guides.active.width": 0,
  "guides.stack.width": 2,
  "guides.normal.width": 2,
  "guides.active.color.dark": "#73f0ae",
  "guides.normal.color.dark": "rgba(53, 82, 156, 0.75)",
  "guides.stack.color.dark": "#060d22",
  "guides.indent.backgrounds": [
    "rgba(81, 47, 50, .75)",
    "rgba(15,24,48, .75)",
    "rgba(38, 29, 46, .75)",
    "rgba(69, 39, 47, .75)"
  ],
  "guides.indent.hideBackgroundOnSelection": false,

Indented Block Highlighting

Indented Block Highlighting is the last indenting extension promise! It’s extremely simple and my setting for it are very subtle. It highlights the entire background of your current scope indent level. I have it set to a very low opacity color so that my current indent scope is slightly darker than the surrounding area, but that’s it. Very very subtle use of it here!

To see all the indent related extensions effects together, check this out:

 //- Block Hilighter
  "blockhighlight.accentCurrentLine": true,
  "blockhighlight.background": ["5", "25", "35", ".1"],
  "blockhighlight.isWholeLine": true,

Simple Icons

Simple Icons is in my opinion the absolute best icon extension for vscode. There are quite a few and most of them focus on having the largest collection and fullest coverage of icons possible. A lot of them are basically just mash ups of as many open source icon systems as possible. This is all well and good, and Simple Icons has great coverage too, but what sets it apart is just how good the icons are. They’re… well they’re simple. And icons for vscode need to be simple because you’re dealing with very tiny icons.

The folder icons that will auto change based on coming build structure naming conventions is a nice touch. And you can set your default folder color to anything you like using a setting which is great! (this is actually a feature because I requested it and the dev responded! So kudos to LaurentTreguier!)

  // Icon theme
  "workbench.iconTheme": "simple-icons",
  "simpleIcons.simple.folder.color": "#6a88c4",