pnpm install
复制代码

pnpm run dev
复制代码

pnpm run build
复制代码

pnpm run lint
// 检查代码并自动格式化
pnpm run lint:fix
复制代码

// 导入顺序为：node_modules 文件 -> @/ 开头文件 -> 相对路径文件
// 导入 React
import React from 'react';
// 导入子组件
import Child from './Child';
// ...
// 导入对应同名的 .less，起名为 styles
import styles from './HelloWorld.module.less';

/**
 * 类型定义（命名：组件名 + Props）
 */
export interface HelloWorldProps {
  // 参数定义（本注释独立一行，禁止放变量末尾）
  username: string;
}

/**
 * 组件注释（简明概要）
 */
const HelloWorld: React.FC<HelloWorldProps> = ({ username }) => {
  // 1. hooks 位置

  // 2. effects 位置

  // 3. 内部 function 位置

  // ...

  return (
    <div className={styles.wrapper}>
      {username}
      <Child />
    </div>
  );
};

// 导出组件
export default HelloWorld;
复制代码

import React from 'react';
import classNames from 'classnames';
import { Tooltip } from 'antd';
import styles from './index.module.less';

interface LinkIconProps {
  // 链接地址
  linkHref?: string;
  // 图标
  iconSvg: React.ReactSVG | React.ReactNode;
  // 提示字段
  title?: string;
  // a标签其余参数
  target?: HTMLAnchorElement['target'];
  // 样式
  className?: string;
}

const LinkIcon: React.FC<LinkIconProps> = ({
  linkHref,
  target = '_blank',
  iconSvg,
  title,
  className,
}) => {
  return (
    <Tooltip title={title}>
      <a href={linkHref} target={target} className={classNames(styles.linkA, className)}>
        {iconSvg}
      </a>
    </Tooltip>
  );
};

export default LinkIcon;

复制代码