# 代码补全
代码补全 (Code Completion) 提供即时类名、方法名和关键字等预测,辅助开发人员编写代码,大幅提升开发效率。
对于 TypeScript (opens new window) 工程,VS Code 通过 typings、interfaces 及 JSDocs 等信息提供了非常棒的代码补全体验。相对于 .ts
和 .tsx
文件,其他类型文件的代码补体全验较差。
AppWorks 增强了前端开发者经常使用的 JS 及样式相关文件的代码补全体验。
# JS 文件
若您的项目基于 React 开发。当您的项目中包含 typings 文件或使用由 TypeScript 开发的组件,可享受同 .ts
和 .tsx
一样的代码补全体验。
比如依赖 @types/react
可获得 HTML JSX 的代码补全。使用由 TypeScript 开发的诸如 Fusion Design (opens new window) 和 Ant Design (opens new window) 组件时,可获得对应组件的代码补全。详见《在 VS Code 中使用 React》 (opens new window)。
在此基础上 AppWorks 提供了:
- Rax (opens new window) 业务组件和基础组件 Props 的代码补全
- React 业务组件 Props 的代码补全
- React 业务组件 propTypes 的代码补全
- MTOP API 的代码补全
MTOP(Mobile Taobao Open Platform)是阿里内部为客户端和服务端提供的一致的 API 平台
# Rax 工程
使用 JS 开发的业务组件及 Rax Components (opens new window) 的代码补全:
# React 工程
使用 JS 开发的业务组件的代码补全:
使用 JS 开发的业务组件的 propTypes 代码补全:
# 样式文件
VS Code 对于样式文件的代码补全优化较少,AppWorks 提供了:
- TSX / JSX 内联样式自动补全
- TSX / JSX 样式自动补全、内容预览及源码定位
- TSX / JSX 样式文件中自动补全 TSX / JSX 文件中使用的样式名
- TSX / JSX 样式变量自动补全、变量预览及源码定位
示例如下:
在 JSX / TSX 文件中编辑组件的 className 及 style 属性时给予自动补全提醒,值预览及定义跳转。
行内样式自动补全,同时支持 SASS 变量的跳转及预览。
# 辅助引入
我们通过代码补全的方式,提高模块引入的体验。
在大多数情况下,开发者可能会需要在文件编辑的过程中引入同级目录文件、在 JSX / TSX 文件引入 components
文件夹下的相关组件等等。
AppWorks 通过前端开发者编辑需求,对模块引入进行猜测,提供前端开发者更美好的开发体验。
示例如下: