Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Wscats/compile-hero

🔰Visual Studio Code Extension For Compiling Language
https://github.com/Wscats/compile-hero

automatic compile es6 evaluation gulp jade javascript json jsx less pug sass scss typescript

Last synced: 28 days ago
JSON representation

🔰Visual Studio Code Extension For Compiling Language

Host: GitHub
URL: https://github.com/Wscats/compile-hero
Owner: Wscats
License: mit
Created: 2016-07-16T08:15:12.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2024-01-23T14:40:27.000Z (5 months ago)
Last Synced: 2024-04-25T04:42:29.893Z (2 months ago)
Topics: automatic, compile, es6, evaluation, gulp, jade, javascript, json, jsx, less, pug, sass, scss, typescript
Language: TypeScript
Homepage: https://marketplace.visualstudio.com/items?itemName=Wscats.qf
Size: 35.7 MB
Stars: 252
Watchers: 26
Forks: 59
Open Issues: 123
Metadata Files:
- Readme: README.CN.md
- Changelog: CHANGELOG.md
- License: LICENSE

Lists

awesome-github-star - compile-hero
awesome - Wscats/compile-hero - 🔰Visual Studio Code Extension For Compiling Language (TypeScript)

README

        





![badge version](https://vsmarketplacebadges.dev/version-short/wscats.eno.svg?color=blue&style=flat-square)

![badge install](https://vsmarketplacebadges.dev/installs-short/wscats.eno.svg?color=brightgreen&style=flat-square)

![badge rate](https://vsmarketplacebadges.dev/rating-short/wscats.eno.svg?color=red&style=flat-square)

[English](./README.md) | [中文](./README.CN.md)

# 特性

> 1.打开 `less, sass, scss, styl, ts, tsx, jade, pug` 或 `js` 等文件。

> 2.启动编辑器右下角底部栏开关 `Compile Hero: On` ↓

![Demo](./screenshots/10.png)

> 3.按快捷键 `(ctrl+s)`

或者在文件列表右键菜单选择 `Compile Files` 命令启动编译，将会在该文件的同级目录 `dist` 下生成编译后的文件，希望能你远离 `webpack` 和 `gulp` 等编译工具繁琐的操作。

![Demo](./screenshots/3.gif)

![Demo](./screenshots/6.gif)

你还可以选中部分代码使用 `Compile Selected` 菜单项或者快捷键 `(ctrl+shift+s)`，进行代码块的局部编译。

![Demo](./screenshots/10.gif)

> 4.按快捷键 `(alt+shift+f)` 或者在文件列表右键菜单选择 `Format Document` 将会帮你自动格式化文件。

![Demo](./screenshots/8.gif)

- 按保存 `Ctrl+S` 会自动编译编译 `less, sass, scss, stylus, typescript, typescriptreact, jade, pug and js` 等文件。

- 支持 `less, scss, scss` 等文件代码高亮。

- 支持在默认浏览器打开 `html` 文件。

- 支持压缩 `javascript` 和 `css` 文件。

- 支持格式化 `javascript`, `json`, `css`, `sass`, 和 `html` 等文件。

| 编译前      | 编译后   |

| ----------- | -------- |

| .pug        | .html    |

| .jade       | .html    |

| .scss(sass) | .css     |

| .less       | .css     |

| .styl       | .css     |

| .ts/.tsx    | .js(JSX) |

| .js(ES6)    | .js(ES5) |

# 配置参数

点击插件的配置选项 `Extension Settings`：

> 点击编辑器底部栏右下角 `Compile Hero: On/Off`，可以切换不同语言的自动编译开关。

![Demo](./screenshots/7.gif)

> 你可以修改编译后目录和文件的输出位置

![Demo](./screenshots/5.gif)

具体参数如下：

| 是否开启按 `(ctrl+s)` 时自动编译文件（所有语言的自动编译总开关） | 默认值 |

| ---------------------------------------------------------------- | ------ |

| disable-compile-files-on-did-save-code                           | false  |

| 编译失败左下角弹窗提醒开关 | 默认值 |

| -------------------------- | ------ |

| notification-toggle        | true   |

| 配置文件编译后的目录的输出路径 | 默认值 | 是否开启按 `(ctrl+s)` 时自动编译文件 | 默认值 |

| ------------------------------ | ------ | ------------------------------------ | ------ |

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

## 使用 `settings.json`

> 在项目根目录下可以新建该目录和文件 `.vscode/settings.json` 配置高级选项。

这里列举一个 `.vscode/settings.json` 文件的例子:

```js

{

  "compile-hero": {

    "disable-compile-files-on-did-save-code": false, // 全局开关，false 为开启自动编译， 默认 true 为开启不自动编译

    "notification-toggle": false, // 关闭编译失败时候右下角的弹窗提醒

    "javascript-output-directory": "./out", // javascript 输出的目录

    "javascript-output-toggle": false, // 局部开关，true 为开启 javascript 自动编译，false 为不开启 javascript 自动编译

    "sass-output-directory": "./out", // sass 输出的目录

    "sass-output-toggle": true, // 局部开关，true 为开启 sass 自动编译，false 为不开启 sass 自动编译

    "ignore": ["src/test.js", "*/test.scss", "**/spec/*", "**/src/**/*"], // 禁止文件和文件夹自动格式化和编译

    "watch": ["sass/test.sass", "**/less/**/*"] // 监听对应文件或者文件夹，保存的时候触发编译，一般配合 Compile Hero: On 开关打开使用

  }

}

// 更多配置项：详见下列表格

```

## 使用 `tsconfig.json`

> 在 `.ts` 文件的同级目录创建 `tsconfig.json` 文件，这个文件可以覆盖 `typescript` 的默认编译配置。

这里列举一个 `.vscode/tsconfig.json` 文件的例子:

```json

{

  "compilerOptions": {

    "alwaysStrict": true,

    "importHelpers": false

  }

}

```

# 在浏览器预览页面

在目录菜单对着 `xxx.html` 文件点击右键，会出现 `Open In Browser` 选项，可以在启动浏览器中预览 `xxx.html` 该页面。

![Demo](./screenshots/2.gif)

# 关闭端口(仅 MAC)

使用 `Close Port` 命令可以关闭对应的端口。

![Demo](./screenshots/4.gif)

# 感谢

| [
_{Eno Yao}](https://github.com/Wscats) | [
_{Aaron Xie}](https://github.com/aaron-xie) | [
_{DK Lan}](https://github.com/dk-lan) | [
_Yong](https://github.com/flowerField) | [
_{Li Ting}](https://github.com/Liting1) | 
_Xin | [
_Lemon](https://github.com/lemonyyye) | [
_Jing](https://github.com/vickySC) | [
_Lin](https://github.com/shirley3790) | [
_{Tian Fly}](https://github.com/tiantengfly) |

| - | - | - | - | - | - | - | - | - | - |

如果你觉得有用，希望你可以给我们[留言和点赞](https://marketplace.visualstudio.com/items?itemName=Wscats.qf&ssr=false#review-details)，你的支持是我们前进的最大动力 😀

# 协议

遵循 [MIT](http://opensource.org/licenses/MIT) 协议。