Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

VSCode is a free and powerful text editor for writing code. I use it daily and continue to find useful and interesting tips and tricks regularly. I want to share those tips and tricks with you.

Developers can optimize their VSCode settings per language. In this lesson, I show an example where I add settings specifically for MDX files. This pattern can be used to adjust settings for any language supported by VSCode.

The settings used in this lesson are:

```javascript
"[mdx]": {
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80
}
```

Adding Language Specific Settings in VSCode

VSCode Themes are a quick way to update the color scheme and syntax highlighting of your code, but you might find your favorite theme isn't quite perfect. VSCode supports customizations that allow you to fix that problem.

In this lesson, I add settings to update the syntax highlighting for the Synthwave '84 theme in Markdown and MDX files. We do this by inspecting TM scopes and making custom rules in our `settings.json`.

The settings I used are:

```javascript
"editor.tokenColorCustomizations": {
  "[SynthWave '84]": {
    "textMateRules": [
      {
        "scope": "markup.inline.raw",
        "settings": {
          "foreground": "#72f1b8",
        }
      },
      {
        "scope": "markup.italic.markdown",
        "settings": {
          "foreground": "#36f9f6",
          "fontStyle": "italic"
        }
      },
    ]
  }
}
```

     

Adding Custom Syntax Highlighting to a Theme in VSCode

You might find yourself with two almost identical files and want to quickly see the difference. VSCode has a built-in mechanism for file diffing.

Kyle's VSCode Tips and Tricks

Kyle Shevlin

Course Content