All Projects → Wscats → Compile Hero

Wscats / Compile Hero

Licence: mit
🔰Visual Studio Code Extension For Compiling Language

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
es6
455 projects

Projects that are alternatives of or similar to Compile Hero

Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-20.71%)
Mutual labels:  gulp, scss, sass, less, pug
Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136 (-19.53%)
Mutual labels:  gulp, scss, sass, less, jade
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (+34.91%)
Mutual labels:  gulp, scss, sass, pug
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+713.02%)
Mutual labels:  scss, sass, pug, jade
Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 260 (+53.85%)
Mutual labels:  scss, sass, less, jsx
Pug Starter
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Stars: ✭ 328 (+94.08%)
Mutual labels:  json, scss, sass, pug
Pug Sass Boilerplate Starter Kit
A Front-end template for building web apps or sites using Pug(Jade) and Sass
Stars: ✭ 92 (-45.56%)
Mutual labels:  gulp, sass, pug, jade
Prettier
Prettier is an opinionated code formatter.
Stars: ✭ 41,411 (+24403.55%)
Mutual labels:  json, scss, less, jsx
Gulp Pure Start
Start your project with 'Gulp Pure Start' easily than ever!
Stars: ✭ 89 (-47.34%)
Mutual labels:  gulp, sass, pug
Css Flags
A collection of pure CSS flags, all single divs.
Stars: ✭ 90 (-46.75%)
Mutual labels:  gulp, scss, pug
Pug As Jsx Loader
Stars: ✭ 168 (-0.59%)
Mutual labels:  jsx, pug, jade
Gulp Pug Sass Seed
🍹 A Pug and Sass starter project using gulp for task automation.
Stars: ✭ 84 (-50.3%)
Mutual labels:  gulp, pug, jade
Vertical Rhythm
Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.
Stars: ✭ 83 (-50.89%)
Mutual labels:  scss, sass, less
Bootstrap 4 Sass Gulp 4 Boilerplate
A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks
Stars: ✭ 103 (-39.05%)
Mutual labels:  gulp, scss, sass
Bootstrap 4 Utilities
Bootstrap 4 utility classes in LESS CSS for Bootstrap 3 or any other projects.
Stars: ✭ 105 (-37.87%)
Mutual labels:  scss, sass, less
Portfolio one Page Template
Free responsive one page portfolio template
Stars: ✭ 106 (-37.28%)
Mutual labels:  gulp, sass, pug
Cessie
Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
Stars: ✭ 81 (-52.07%)
Mutual labels:  scss, sass, less
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+5432.54%)
Mutual labels:  scss, sass, less
Atoms
Atoms for Blaze UI
Stars: ✭ 1,505 (+790.53%)
Mutual labels:  scss, sass, jsx
Gulp Frontnote
スタイルガイドジェネレーターFrontNoteのGulpプラグイン
Stars: ✭ 7 (-95.86%)
Mutual labels:  gulp, scss, sass

Github Page Eno Yao badge version badge install

English | 中文

Features

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 ↓

11

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.

10

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

8

  • 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.

5

  • 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

7

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 compile-hero.watch 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.

2

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.

6

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.

4

Thanks

👪 Tencent Alloyteam Team And Qian Feng Team:


Eno Yao

Aaron Xie

DK Lan

Yong

Li Ting

Xin

Lemon

Jing

Lin

Tian Fly

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

License

Compile Hero is released under the MIT.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].