vscode自定义组件属性自动提示

2021-08-30

在封装业务组件的时候,组件如果可以提供良好的属性提示,对开发的同事是一种很好的体验。

下面有两种方案可以实现属性文档提示功能

利用 prop-types 属性注释

在定义属性的时候写好完整的注释

Button.propTypes = {
  /**
   *  配置按钮的大小
   * 
   *  可选值:'small' | 'medium' | 'large'
   */
  size: PropTypes.string,
}

Button.defaultProps = {
  size: null,
}

利用 ts 特性来实现属性提示效果

在组件的目录下新增 index.d.ts 文件,例如 Button 组件

import React from 'react';

type sizeOptions = 'small' | 'medium' | 'large';

export interface ButtonProps {
  /**
   *  配置按钮的大小
   * 
   *  可选值:'small' | 'medium' | 'large'
   */
  size?: sizeOptions
}

declare class Button extends React.Component<ButtonProps, {}>{};

export default Button;

这样重启vscode,就可以实现属性提示啦!

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: javascript

评论

Loading...

最新评论

相关推荐

ts之类型谓词
在了解类型谓词之前,我们先来了解联合类型。 联合类型 日常开发中,我们会定义为一个支持多种类型的变量,比如一个变量可...
h5のvideo踩坑
video是h5新增的标签,可以通过 video&nbsp;标签播放 ogg、mp4 、webm 等格式的视频。 🌽...
webpack regeneratorruntime is not defined
electron项目升级了webpack5,项目跑起来发现报错,regeneratorruntime is not de...
scroll-top-icon