# 代码补全

代码补全 (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) 的代码补全:

img

# React 工程

使用 JS 开发的业务组件的代码补全:

img

使用 JS 开发的业务组件的 propTypes 代码补全:

img

# 样式文件

VS Code 对于样式文件的代码补全优化较少,AppWorks 提供了:

  • TSX / JSX 内联样式自动补全
  • TSX / JSX 样式自动补全、内容预览及源码定位
  • TSX / JSX 样式文件中自动补全 TSX / JSX 文件中使用的样式名
  • TSX / JSX 样式变量自动补全、变量预览及源码定位

示例如下:

在 JSX / TSX 文件中编辑组件的 className 及 style 属性时给予自动补全提醒,值预览及定义跳转。

img

行内样式自动补全,同时支持 SASS 变量的跳转及预览。

img

# 辅助引入

我们通过代码补全的方式,提高模块引入的体验。

在大多数情况下,开发者可能会需要在文件编辑的过程中引入同级目录文件、在 JSX / TSX 文件引入 components 文件夹下的相关组件等等。 AppWorks 通过前端开发者编辑需求,对模块引入进行猜测,提供前端开发者更美好的开发体验。

示例如下:

img