Visual Studio Code

VS Code is an excellent, free IDE with tons of extensibility.

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

...

Also looks great in the right side preview window

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

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

Generally we want our CSS files in /dist/css. Here's how to achieve that.

settings.json

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

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

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