hansuxdev/compile-hero

🔰Visual Studio Code Extension For Compiling Language

English | 中文

Features

Easily work with less, sass, scss, typescript, jade, pug and jsx files in Visual Studio Code.

1.Please turn on the Compile Hero: On switch when using ↓

2.Compile on save (ctrl+s) or select Compile File(s) on right-click menu item for less, sass, scss, typescript, jade, pug and jsx files without using a build task.

3.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, typescript, jade, pug and jsx 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
.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

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
generate-minified-html	false
generate-minified-css	false
generate-minified-javascript	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.

Here Example settings.json file:

{
  "compile-hero": {
    "disable-compile-files-on-did-save-code": false,
    "javascript-output-directory": "./out",
    "javascript-output-toggle": false,
    "sass-output-directory": "./out",
    "sass-output-toggle": true
  }
}

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.

Thanks

Eno Yao	Aaron Xie	DK Lan	Yong	Li Ting	Xin	Lemon	Jing	Lin	Tian Fly

If you enjoy front end, you should have it! Xie, Yao, Yong, Ting, Jing, Lin, Tian, Xin, Xia, DK and Lemon, thanks to my team for their efforts ~ Waiting for you in our heart！

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

License

Compile Hero is released under the MIT.