Compile Hero

🔰Visual Studio Code Extension For Compiling Language
Alternatives To Compile Hero
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
15 hours ago1,163mitJavaScript
Prettier is an opinionated code formatter.
Css.gg7,8388a year ago8April 23, 202044mitCSS
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
Pug Starter338
13 days ago2May 18, 2019gpl-3.0JavaScript
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Compile Hero187
a year ago2November 05, 201993mitTypeScript
🔰Visual Studio Code Extension For Compiling Language
Sass Vars Loader11531422 years ago37April 05, 202110mitJavaScript
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Json Sass911326 years ago4June 04, 201912JavaScript
Transforms a JSON stream into scss syntax Sass.
Cti Documentation8314 days ago3August 10, 202010bsd-3-clauseSCSS
OASIS TC Open Repository: GitHub Pages site for STIX and TAXII
Sass Export519189 months ago34June 24, 202215mitTypeScript
Exports your scss files to Json. Easily convert your SCSS files into Json.
Scss To Json476236a year ago4October 31, 201718mitJavaScript
A package to require SCSS variables in JSON format
Json Feed Viewer40
6 months ago7mitSCSS
The world's first JSON feed viewer 🥇
Alternatives To Compile Hero
Select To Compare

Alternative Project Comparisons

Github Page Eno Yao badge version badge install

English | 中文


1.Open the less, sass, scss, styl, ts, tsx, jade, pug or js file.

2.Compile Hero: On/Off will appear in the status bar at the bottom right corner, please turn on the Compile Hero: On switch when using ↓


3.Compile on save (ctrl+s)

Or select Compile Files on right-click menu item, it will automatically compile the files to the dist directory.

1 3

You can also select part of the code and use the Compile Selected menu item or shortcut key (ctrl+shift+s) to perform partial compilation of the code block.


4.Beautify on save (alt+shift+f) or select Format Document on right-click menu item for javascript, json, css, sass and html.


  • Compile less, sass, scss, stylus, typescript, typescriptreact, jade, pug and javascript on save.
  • Support autoprefixer for less, scss, scss.
  • Support to open html files to preview in browser.
  • minify javascript and css files.
  • Beautify javascript, json, css, sass, and html.
Before Compile After Compile
.pug .html
.jade .html
.scss(sass) .css
.less .css
.styl .css
.ts/.tsx .js(JSX)
.js(ES6) .js(ES5)

Easy to use. When you writing a file, press save ctrl+s to generate the compiled file in the same directory. I hope you can get rid of the constraint of gulp or webpack😁

Extension Settings

Click to open the extension management interface Configure Extension Settings.


  • You can change the output path of the project compilation directory.
  • Toggle the compile switch of different language.
  • Or disable automatic compilation on save (ctrl+s).
Whether the configuration is automatically compiled after saving(ctrl+s) Default Value
disable-compile-files-on-did-save-code false


Switch to control the notification Default Value
notification-toggle true
Switch to control compilation and formatting of specific files Default Value
ignore null
Output Path Configuration Default Value Compile Switch Status Default Value
javascript-output-directory ./dist javascript-output-toggle true
sass-output-directory ./dist sass-output-toggle true
scss-output-directory ./dist scss-output-toggle true
less-output-directory ./dist less-output-toggle true
jade-output-directory ./dist jade-output-toggle true
typescript-output-directory ./dist typescript-output-toggle true
typescriptx-output-directory ./dist typescriptx-output-toggle true
pug-output-directory ./dist pug-output-toggle true
stylus-output-directory ./dist stylus-output-toggle true
generate-minified-html false generate-minified-html-only false
generate-minified-css false generate-minified-css-only false
generate-minified-javascript false generate-minified-javascript-only false

Using settings.json

Advanced Extension Settings:

  • Project-wide settings are configured using the standard settings.json file (i.e. Workspace Settings).
  • settings.json must exist in the .vscode directory at the root level of your project.
  • Alternatively, settings can go in User Settings for global defaults.
  • Use the compile-hero key.
  • Prohibit partial compilation and formatting of specific files compile-hero.ignore.
  • Use to monitor partial files - You can turn this on -> Compile Hero: On when using.

Here Example settings.json file:

  "compile-hero": {
    "disable-compile-files-on-did-save-code": false,
    "notification-toggle": false,
    "javascript-output-directory": "./out",
    "javascript-output-toggle": false,
    "sass-output-directory": "./out",
    "sass-output-toggle": true,
    "ignore": ["src/test.js", "*/test.scss", "**/spec/*", "**/src/**/*"],
    "watch": ["sass/test.sass", "**/less/**/*"]

Using tsconfig.json

If you want to add or overwrite certain settings in the tsconfig.json file, you can create a new tsconfig.json in the same directory of your .ts file.

Here Example tsconfig.json file:

  "compilerOptions": {
    "alwaysStrict": true,
    "importHelpers": false

Open In Browser

Right click the html file in the directory menu, and the open in browser option will appear. You can preview the page in the browser.


Compile File Menu Item

Sometimes you may not need to automatically compile the file every time you save the file, at this time you can disable the automatic compilation. And use the Compile File(s) menu item to replace.


Close Port Command(MAC)

At some point, you may be using ports for some services. You can use the Close Port command to close, but now only supported on mac.



👪 Tencent Alloyteam Team And Qian Feng Team:

Eno Yao

Aaron Xie

DK Lan


Li Ting





Tian Fly

If you think it's useful, hope you can leave us a message and like it💝, your support is our driving force😀


Compile Hero is released under the MIT.

Popular Json Projects
Popular Scss Projects
Popular Data Formats Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.