VScode Tips & Tricks

Set custom folder icons

Note: Requires Material Icon Theme

1. Go to settings.json
2. Add a new section material-icon-theme.folders.associations:

"material-icon-theme.folders.associations": {
    "FOLDER_NAME": "ICON_NAME",
    ...
}

Note: below is a list of all available folder icons in the material icon theme

Set custom HTML element to Markdownlint

Note: Requires Markdownlint When adding custom HTML elements to markdown documents, the markdownlint extension prompts you with the following problem:

MD033/no-inline-html: Inline HTML [Element: img]markdownlintMD033

You can add custom HTML elements to the markodwnlint config.

1. Go to settings.json
2. Add a new section markdownlint.config:

"markdownlint.config": {
    "no-inline-html": {
        "allowed_elements": [ "ELEMENT_1", "ELEMENT_2", "ELEMENT_3" ]
    }
},

Create shortcut to add markdown code-block around selection

When editing markdown files, always typing the code-block syntax can get anoying.

1. press Ctrl+shift+P for Windows or Cmd+shift+P for MacOS
2. search for keyboard
3. click on Preferences: Open Keyboard Shortcuts JSON
4. add a new key:

[
  {
    "key": "KEYSTROKES",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "```CODE_BLOCK_LANGUAGE\n$TM_SELECTED_TEXT\n```\n$0"
    }
  }
]