HTML and SCSS Development in Visual Studio Code
After Microsoft release Visual Studio Code in 2015, it instantly becoming a new popular IDE for some developers to work with. A free open source code editor that build on top of Electron’s cross platform based on Node.js runtime and Chromium. It’s default supportive for source code control, syntax highlighting, code completion, snippets, multi programming languages and other great productivity plugins.
There are many tools out there for web development using SCSS such as Gulp, Grunt and Webpack is just some of them.
In many ways, all these tools available to boost your development productivities and every tools has it own workflow. I’ve tried practically many frontend development workflow with Gulp, Grunt, Webpack and Jekyll. But what if the development workflow were only just HTML, JS and CSS files? Well, instead you can do it only with your Visual Studio Code IDE. Yes this time VS Code save me a ton of time and amount of project files sizes with no node_modules packages in every project root.
I am going to demonstrate the basic workflow that i’ve used with just using an IDE in Visual Studio Code for a static website project. The project contains single HTML page with a single css generated from SCSS files, images and JS asset.
Extension tools I’ve used in Visual Studio Code extensions was from Ritwick Dey :
1. Live Server
Static Assets :
1. index.html
2. Javascript / jQuery, Bootstrap 4 SCSS and Font Awesome 5 SCSS.
Project directories, I used my real project (Decorplus.id) for this demos:
— root/
— — — .vscode/
— — — — settings.json
— — — src/
— — — — assets/
— — — — assets/css/
— — — — assets/js/
— — — — assets/img/
— — — — assets/vendors/
— — — — assets/webfonts/
— — — index.html
— — — scss/
— — — — _base.scss
— — — — _variables.scss
— — — — main.scss
— — — scss/vendors/
— — — scss/vendors/bootstrap/
Visual Studio Code provide a config file for your each project or your workspace setting on .vscode/settings.json. Look at your document root for .vscode/settings.json config, or you can add the following json .vscode/settings.json on the project root :
{
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.fullReload": true,
"liveServer.settings.root": "/src",
"liveSassCompile.settings.includeItems": [
"scss/vendors/_base.scss",
"scss/vendors/_variables.scss",
"scss/main.scss"
],
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 3 version",
"Chrome >= 35",
"Firefox >= 38",
"Edge >= 10",
"Explorer >= 10",
"ie >= 10",
"iOS >= 8",
"Safari >= 8",
"Android 2.3",
"Android >= 4",
"Opera >= 12"
],
"liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "/src/assets/css"
}],
"liveServer.settings.port": 5503
}After all setup for Go Live server and Watch SCSS with css autoprefixer plugins setting, all you have to do now is starting the development engine by clicking the [Go Live] server and [Watch Sass] buttons at the bottom of the VS Code status bar.
VS Code will fired up Chrome browser to open the live server with ip address and port. You can start building your HTML along with the all the assets, SCSS and Javascript. Any file changes on the ./src/ root will automatically reload the opened browser.
Using this workflow from VS Code really help me to cut production time for any projects, saving a lot of space on a disk and small amount sized project files. In any other way you can still integrated other tools in your VS Code projects such as Typescript and others. Happy frontend coding! Cheers!
