{"id":13455795,"url":"https://github.com/Wscats/compile-hero","last_synced_at":"2025-03-24T08:34:45.132Z","repository":{"id":40807975,"uuid":"63472844","full_name":"Wscats/compile-hero","owner":"Wscats","description":"🔰Visual Studio Code Extension For Compiling Language","archived":false,"fork":false,"pushed_at":"2024-01-23T14:40:27.000Z","size":37466,"stargazers_count":257,"open_issues_count":125,"forks_count":59,"subscribers_count":27,"default_branch":"master","last_synced_at":"2024-10-30T02:28:21.183Z","etag":null,"topics":["automatic","compile","es6","evaluation","gulp","jade","javascript","json","jsx","less","pug","sass","scss","typescript"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=Wscats.qf","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wscats.png","metadata":{"files":{"readme":"README.CN.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-07-16T08:15:12.000Z","updated_at":"2024-09-29T14:45:41.000Z","dependencies_parsed_at":"2024-02-15T21:52:25.107Z","dependency_job_id":null,"html_url":"https://github.com/Wscats/compile-hero","commit_stats":null,"previous_names":["wscats/hi"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fcompile-hero","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fcompile-hero/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fcompile-hero/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fcompile-hero/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wscats","download_url":"https://codeload.github.com/Wscats/compile-hero/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244966493,"owners_count":20539795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automatic","compile","es6","evaluation","gulp","jade","javascript","json","jsx","less","pug","sass","scss","typescript"],"created_at":"2024-07-31T08:01:11.279Z","updated_at":"2025-03-24T08:34:45.109Z","avatar_url":"https://github.com/Wscats.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003c!-- \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.eno\"\u003e\u003cimg src=\"https://img.shields.io/badge/Download-2k+-orange\" alt=\"Download\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.eno\"\u003e\u003cimg src=\"https://img.shields.io/badge/Macketplace-v2.00-brightgreen\" alt=\"Macketplace\" /\u003e\u003c/a\u003e --\u003e\n\n\u003ca href=\"https://github.com/Wscats/compile-hero\"\u003e\u003cimg src=\"https://img.shields.io/badge/Github Page-Wscats-yellow\" alt=\"Github Page\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Wscats\"\u003e\u003cimg src=\"https://img.shields.io/badge/Author-Eno Yao-blueviolet\" alt=\"Eno Yao\" /\u003e\u003c/a\u003e\n![badge version](https://vsmarketplacebadges.dev/version-short/wscats.eno.svg?color=blue\u0026style=flat-square)\n![badge install](https://vsmarketplacebadges.dev/installs-short/wscats.eno.svg?color=brightgreen\u0026style=flat-square)\n![badge rate](https://vsmarketplacebadges.dev/rating-short/wscats.eno.svg?color=red\u0026style=flat-square)\n\n[English](./README.md) | [中文](./README.CN.md)\n\n# 特性\n\n\u003c!-- Visual Studio Code 中自动编译以下文件：`less, sass, scss, stylus, typescript, jade, pug and jsx`。 --\u003e\n\n\u003e 1.打开 `less, sass, scss, styl, ts, tsx, jade, pug` 或 `js` 等文件。\n\n\u003e 2.启动编辑器右下角底部栏开关 `Compile Hero: On` ↓\n\n\u003c!-- ![Demo](./screenshots/9.png) --\u003e\n\n![Demo](./screenshots/10.png)\n\n\u003e 3.按快捷键 `(ctrl+s)`\n\n或者在文件列表右键菜单选择 `Compile Files` 命令启动编译，将会在该文件的同级目录 `dist` 下生成编译后的文件，希望能你远离 `webpack` 和 `gulp` 等编译工具繁琐的操作。\n\n![Demo](./screenshots/3.gif)\n![Demo](./screenshots/6.gif)\n\n你还可以选中部分代码使用 `Compile Selected` 菜单项或者快捷键 `(ctrl+shift+s)`，进行代码块的局部编译。\n\n![Demo](./screenshots/10.gif)\n\n\u003e 4.按快捷键 `(alt+shift+f)` 或者在文件列表右键菜单选择 `Format Document` 将会帮你自动格式化文件。\n\n![Demo](./screenshots/8.gif)\n\n- 按保存 `Ctrl+S` 会自动编译编译 `less, sass, scss, stylus, typescript, typescriptreact, jade, pug and js` 等文件。\n- 支持 `less, scss, scss` 等文件代码高亮。\n- 支持在默认浏览器打开 `html` 文件。\n- 支持压缩 `javascript` 和 `css` 文件。\n- 支持格式化 `javascript`, `json`, `css`, `sass`, 和 `html` 等文件。\n\n| 编译前      | 编译后   |\n| ----------- | -------- |\n| .pug        | .html    |\n| .jade       | .html    |\n| .scss(sass) | .css     |\n| .less       | .css     |\n| .styl       | .css     |\n| .ts/.tsx    | .js(JSX) |\n| .js(ES6)    | .js(ES5) |\n\n# 配置参数\n\n点击插件的配置选项 `Extension Settings`：\n\n\u003e 点击编辑器底部栏右下角 `Compile Hero: On/Off`，可以切换不同语言的自动编译开关。\n\n![Demo](./screenshots/7.gif)\n\n\u003e 你可以修改编译后目录和文件的输出位置\n\n![Demo](./screenshots/5.gif)\n\n具体参数如下：\n\n| 是否开启按 `(ctrl+s)` 时自动编译文件（所有语言的自动编译总开关） | 默认值 |\n| ---------------------------------------------------------------- | ------ |\n| disable-compile-files-on-did-save-code                           | false  |\n\n| 编译失败左下角弹窗提醒开关 | 默认值 |\n| -------------------------- | ------ |\n| notification-toggle        | true   |\n\n| 配置文件编译后的目录的输出路径 | 默认值 | 是否开启按 `(ctrl+s)` 时自动编译文件 | 默认值 |\n| ------------------------------ | ------ | ------------------------------------ | ------ |\n| javascript-output-directory    | ./dist | javascript-output-toggle             | true   |\n| sass-output-directory          | ./dist | sass-output-toggle                   | true   |\n| scss-output-directory          | ./dist | scss-output-toggle                   | true   |\n| less-output-directory          | ./dist | less-output-toggle                   | true   |\n| jade-output-directory          | ./dist | jade-output-toggle                   | true   |\n| typescript-output-directory    | ./dist | typescript-output-toggle             | true   |\n| typescriptx-output-directory   | ./dist | typescriptx-output-toggle            | true   |\n| pug-output-directory           | ./dist | pug-output-toggle                    | true   |\n| stylus-output-directory        | ./dist | stylus-output-toggle                 | true   |\n| generate-minified-html         | false  | generate-minified-html-only          | false  |\n| generate-minified-css          | false  | generate-minified-css-only           | false  |\n| generate-minified-javascript   | false  | generate-minified-javascript-only    | false  |\n\n## 使用 `settings.json`\n\n\u003e 在项目根目录下可以新建该目录和文件 `.vscode/settings.json` 配置高级选项。\n\n这里列举一个 `.vscode/settings.json` 文件的例子:\n\n```js\n{\n  \"compile-hero\": {\n    \"disable-compile-files-on-did-save-code\": false, // 全局开关，false 为开启自动编译， 默认 true 为开启不自动编译\n    \"notification-toggle\": false, // 关闭编译失败时候右下角的弹窗提醒\n    \"javascript-output-directory\": \"./out\", // javascript 输出的目录\n    \"javascript-output-toggle\": false, // 局部开关，true 为开启 javascript 自动编译，false 为不开启 javascript 自动编译\n    \"sass-output-directory\": \"./out\", // sass 输出的目录\n    \"sass-output-toggle\": true, // 局部开关，true 为开启 sass 自动编译，false 为不开启 sass 自动编译\n    \"ignore\": [\"src/test.js\", \"*/test.scss\", \"**/spec/*\", \"**/src/**/*\"], // 禁止文件和文件夹自动格式化和编译\n    \"watch\": [\"sass/test.sass\", \"**/less/**/*\"] // 监听对应文件或者文件夹，保存的时候触发编译，一般配合 Compile Hero: On 开关打开使用\n  }\n}\n// 更多配置项：详见下列表格\n```\n\n## 使用 `tsconfig.json`\n\n\u003e 在 `.ts` 文件的同级目录创建 `tsconfig.json` 文件，这个文件可以覆盖 `typescript` 的默认编译配置。\n\n这里列举一个 `.vscode/tsconfig.json` 文件的例子:\n\n```json\n{\n  \"compilerOptions\": {\n    \"alwaysStrict\": true,\n    \"importHelpers\": false\n  }\n}\n```\n\n# 在浏览器预览页面\n\n在目录菜单对着 `xxx.html` 文件点击右键，会出现 `Open In Browser` 选项，可以在启动浏览器中预览 `xxx.html` 该页面。\n\n![Demo](./screenshots/2.gif)\n\n# 关闭端口(仅 MAC)\n\n使用 `Close Port` 命令可以关闭对应的端口。\n\n![Demo](./screenshots/4.gif)\n\n# 感谢\n\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/17243165?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eEno Yao\u003c/sub\u003e](https://github.com/Wscats) | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/5805270?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eAaron Xie\u003c/sub\u003e](https://github.com/aaron-xie) | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/12515367?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eDK Lan\u003c/sub\u003e](https://github.com/dk-lan) | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/30917929?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eYong\u003c/sub\u003e](https://github.com/flowerField) | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/33544236?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eLi Ting\u003c/sub\u003e](https://github.com/Liting1) | \u003cimg src=\"https://avatars2.githubusercontent.com/u/50255537?s=400\u0026u=cfd51a5f46862d14e92e032a5b7ec073b67a904b\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eXin\u003c/sub\u003e | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/39754159?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eLemon\u003c/sub\u003e](https://github.com/lemonyyye) | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/31915459?s=400\u0026u=11ea9bc9baa62784208a29dddcd0a77789e9620f\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eJing\u003c/sub\u003e](https://github.com/vickySC) | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/24653988?s=400\u0026u=76227871dea8d4b57162093fde63b7d52910145d\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eLin\u003c/sub\u003e](https://github.com/shirley3790) | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/23230108?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eTian Fly\u003c/sub\u003e](https://github.com/tiantengfly) |\n| - | - | - | - | - | - | - | - | - | - |\n\n\n\u003c!-- 要玩转 H5 这个插件你值得拥有！ --\u003e\n\n如果你觉得有用，希望你可以给我们[留言和点赞](https://marketplace.visualstudio.com/items?itemName=Wscats.qf\u0026ssr=false#review-details)，你的支持是我们前进的最大动力 😀\n\n# 协议\n\n遵循 [MIT](http://opensource.org/licenses/MIT) 协议。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWscats%2Fcompile-hero","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWscats%2Fcompile-hero","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWscats%2Fcompile-hero/lists"}