Optimizing VS Codium through its settings.json file

Author

Erik Skare

This is an example of how you can change the settings in VS Codium by modifying the settings.json file. The .json file can be opened by either:

  1. Press Ctrl + Shift + P and type open settings. Choose Open User Settings (JSON).

  2. Or go to File > Preferences > Settings > Workbench > Appearance > and click on Edit in settings.json.

Removing unnecessary features in VS Codium

Personally, I prefer a minimalist UI, so the following code removes breadcrumbs, line numbers, menu bar etc. This is a matter of taste. See for example Thomas Hegghammer’s settings to see how he prefers it.

The number behind window.zoomLevel: signifies the size of the text (so feel free to play around with the settings. Some with a geriatric inclination may prefer 3 instead of 1.25). If you apply a minimalist UI, remember you can still find File, Edit, Selection etc. by pressing the Alt key.

"editor.minimap.enabled": false,
"security.workspace.trust.enabled": false,
"editor.lineNumbers": "off",
"editor.renderLineHighlight": "none",
"workbench.editor.untitled.hint": "hidden",
"breadcrumbs.enabled": false,
"window.menuBarVisibility": "toggle",
"window.zoomLevel": 1.25,
"workbench.statusBar.visible": false,
"workbench.startupEditor": "none"

I am often annoyed by the quickSuggestion feature in VS Codium (suggesting words/phrases to you as you write), so I have removed that too:

"editor.quickSuggestions": 
{"other": false, 
    "comments": false, 
    "strings": false},
"editor.acceptSuggestionOnEnter": "off",
"editor.quickSuggestionsDelay": 10,
"editor.wordBasedSuggestions": false,

Applying the optimal line length for body text

I prefer a hard-wrap (a new line of text) after 100 characters (given my 1.25 window.zoomLevel), though some claim that the optimal line length for body text is 50-75 characters. Feel free to play around with the settings by adjusting the editor.wordWrapColumn:

"[markdown]": 
    {"editor.wordWrap": "wordWrapColumn",
    "editor.wrappingIndent": "same",
    "editor.wordWrapColumn": 100,
    "diffEditor.wordWrap": "on"}

Changing color theme and settings

You can also change the color theme and color settings for headers, bold, italics etc. in the settings.json file. P.S. You have to install the color theme extension if you want the color theme settings to apply. It does not suffice just writing "workbench.colorTheme": "Atom One Light", for example.

"workbench.colorTheme": "Atom One Light",
"editor.tokenColorCustomizations": {
    
    "textMateRules": [

      {"scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
          "settings": 
          {"foreground": "#003cac",
          "fontStyle": "bold",}},
      
          {"scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
          "settings": {"foreground": "#003cac",}},
          
          {"scope": "heading.3.markdown entity.name.section.markdown, heading.3.markdown punctuation.definition.heading.markdown",
          "settings": {"foreground": "#003cac",}},

          {"scope": "heading.4.markdown entity.name.section.markdown, heading.4.markdown punctuation.definition.heading.markdown",
          "settings": {"foreground": "#003cac",}},

          {"scope": [ 
            "markup.fenced_code.block.markdown", 
            "markup.list", 
            "markup.underline", 
            "markup.bold", 
            "markup.italic",
            "meta.separator.markdown",
        ],
        "settings": {
            "foreground": "#e16016"
        }},
        {
            "name": "md-code-fence",
            "scope": [
               "entity.name.tag.html",
               "markup.inline.raw",
               "markup.inline.raw.string.markdown",
               "string.other.link.title.markdown",
               "markup.underline.link.markdown"
            ],
            "settings": {
               "foreground": "#e16016"
            }},
    ]
},

If you applied every changes to the settings.json file, then it should look something like this:

{
    "editor.minimap.enabled": false,
    "security.workspace.trust.enabled": false,
    "editor.lineNumbers": "off",
    "editor.renderLineHighlight": "none",
    "workbench.editor.untitled.hint": "hidden",
    "breadcrumbs.enabled": false,
    "window.menuBarVisibility": "toggle",
    "window.zoomLevel": 1.25,
    "workbench.startupEditor": "none",
    
    "editor.quickSuggestions": 
    { "other": false, 
        "comments": false, 
        "strings": false },
    
    "editor.acceptSuggestionOnEnter": "off",
    "editor.quickSuggestionsDelay": 10,
    "editor.wordBasedSuggestions": false,
    "workbench.statusBar.visible": false,
    "window.autoDetectHighContrast": true,
    "workbench.colorTheme": "GitHub Light",
    "editor.bracketPairColorization.enabled": false,    

    "[markdown]": 
    {   "editor.wordWrap": "wordWrapColumn",
        "editor.wrappingIndent": "same",
        "editor.wordWrapColumn": 100,
        "diffEditor.wordWrap": "on"},

    "editor.tokenColorCustomizations": {
        
        "textMateRules": [

          {"scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
              "settings": 
              {"foreground": "#003cac",
              "fontStyle": "bold",}},
          
              {"scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
              "settings": {"foreground": "#003cac",}},
              
              {"scope": "heading.3.markdown entity.name.section.markdown, heading.3.markdown punctuation.definition.heading.markdown",
              "settings": {"foreground": "#003cac",}},

              {"scope": "heading.4.markdown entity.name.section.markdown, heading.4.markdown punctuation.definition.heading.markdown",
              "settings": {"foreground": "#003cac",}},

              {"scope": [ 
                "markup.fenced_code.block.markdown", 
                "markup.list", 
                "markup.underline", 
                "markup.bold", 
                "markup.italic",
                "meta.separator.markdown",
            ],
            "settings": {
                "foreground": "#e16016"
            }},
            {
                "name": "md-code-fence",
                "scope": [
                   "entity.name.tag.html",
                   "markup.inline.raw",
                   "markup.inline.raw.string.markdown",
                   "string.other.link.title.markdown",
                   "markup.underline.link.markdown"
                ],
                "settings": {
                   "foreground": "#e16016"
                }},
        ]
    }