Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>FocusWorksNew to Visual Studio Code? Get it now.
FocusWorks

FocusWorks

careteen

|
1,800 installs
| (1) | Free
Application Development Pack, provide visualization and intelligent technology to build Universal Application faster and better, support Web / H5 / MiniProgram(小程序) Application.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

FocusWorks

Version for VS Code Extension Installs Downloads Rating PRs Welcome The MIT License

此项目fork自apptools-lab/AppWorks,并做了定制化开发。在此非常感谢原团队。

前端研发套件,通过可视化编程和编码辅助手段,更快更好地构建多端应用,支持 Web 、HTML 5 和小程序应用。

核心特性

编码辅助

FocusWorks 编码辅助提供了代码自动补全、代码信息提示和代码重构等功能。

以代码自动补全为例,在开发者编写代码的过程中,自动预测开发者的编程意图,连续向开发者推荐「即将书写的下一段代码」,开发者可以通过「一键补全」的方式,直接确认接下来要输入的代码,从而大大提升代码的编写效率。例如输入样式字段和值时,FocusWorks 提供的代码自动补全效果如下:

使用示例

FocusWorks 的代码自动补全能力基于语言语义和源代码分析,完全本地执行,确保代码安全;毫秒级响应,流畅进行编码!

可视化开发

FocusWorks 提供海量的物料和可视化消费物料的方式提升多端应用的开发效率。

例如,你可以使用模板快速创建项目;可以使用物料面板,将一些精品物料添加到项目当中。

使用示例

如果已有的物料不能满足你的需求,FocusWorks 还提供了从生产到消费的自定义物料开发链路,完全打造业务专属的物料库。

快速开始

点击活动栏上的 FocusWorks 图标,打开侧边栏和创建应用流程:

使用示例

应用创建完成,在 FocusWorks 侧边栏上进行 npm 脚本执行、创建组件、生成页面等操作:

使用示例

插件列表

FocusWorks 套件内包含以下自研插件:

插件 简介 徽标
应用管理器 从 UI 组织视角预览应用的组织,提供 FocusWorks 快速操作入口 Version Installs
创建应用 通过界面引导,使用模板创建多端应用 Version Installs
组件开发辅助 更快更好地添加组件、编写组件属性 Version Installs

FocusWorks 套件内包含以下推荐的三方插件:

  • GitLens: 增强 VS Code 中内置的 Git 功能
  • Code Spell Checker: 英文拼写检查器
  • ESLint: ESLint 配套的检查器
  • stylelint: stylelint 配套的检查器
  • Prettier: 代码格式化工具
  • Auto Complete Tag: 自动闭合和重命名标签
  • JavaScript (ES6) code snippets: ES6 语法的 JavaScript 代码片段
  • Simple React Snippets: React 代码片段
  • Code Runner: 快速运行文件和代码片段,支持多种开发语言.
  • Bookmarks: 源码阅读神器

获取帮助

向 FocusWorks 的 Gitlab 仓库提交 issue ,我们会快速响应所提交的问题。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft