# Visual Studio Code

## Extensions

Our favorite extensions to install

###  #region folding for VS Code

<https://marketplace.visualstudio.com/items?itemName=maptz.regionfolder>

Collapse large code sections neatly

In TypeScript;

```
...

// #region My region

... code

// #endregion

...
```

{% hint style="info" %}
Also looks great in the right side preview window&#x20;
{% endhint %}

### Live Sass Compiler

Compile Sass or Scss to CSS at realtime.

* Create your .scss file
* Select it and click **Watch Sass** at the bottom of the page
* All changes will be automatically recompiled as you edit them &#x20;

<https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass>

Generally we want our CSS files in `/dist/css`.  Here's how to achieve that.&#x20;

### settings.json

This is the general configuration file for Live Sass Compiler, and can be found here on Windows.&#x20;

`/C:/Users/OEM/AppData/Roaming/Code/User/settings.json`.

```jsonc
{
    "git.confirmSync": false,
    "liveSassCompile.settings.autoprefix": [
    ],
    "liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/dist/css"
    }]
}
```