idea2app 代码规范

变量命名

1. Count 表示数量

✅ appleCount

❌ appleNum

1. Props 表示组件参数类型

✅ ComProps

❌ ComProp

1. 沿用 HTML 已有语义

✅ onSelect

❌ onShowDetails

排序

✅'className' | 'children' | 'onClick'

❌ 'children' | 'onClick' | 'className'

✅

<Button
    ref={btnRef}
    onClick={onClick}
    className={`bg-transparent border-0 ${styles.btn} ${className}`}
    backdrop="static"
    show={this.show}
    onHide={() => (this.show = false)}
    rel="stylesheet"
    href="https://fonts.font.im/css?family=IBM+Plex+Sans"
/>

❌

<button
    className={`appearance-none ${styles.btn} ${className}`}
    onClick={onClick}
    ref={btnRef}
    show={this.show}
    onHide={() => (this.show = false)}
    backdrop="static"
    rel="stylesheet"
    href="https://fonts.font.im/css?family=IBM+Plex+Sans"
 />

当 Button 用原始 HTML 标签，可引入公共类 appearance-none 修正样式。

 .appearance-none {
   appearance: none;
   border: none;
   outline: none;
   background: transparent;
   &::-webkit-search-cancel-button {
     display: none;
   }
 }

可以用扩展运算符（...）节省代码

✅

export const Popup = 
  ({
    onContinue,
    onExit,
    ...popupProps
  }: PopupProps) => (
    <Popup {...popupProps}>
   ......

❌

export const Popup = 
  ({
    show,
    backdrop,
    onHide,
    onContinue,
    onExit
  }: PopupProps) => (
    <Popup show={show} onHide={onHide} backdrop={backdrop}>
   ......

省略 return

✅

const a = () => 123

❌

const a = () => { return 123 }

类型定义 undefined 可省略

✅ let a?: string

❌ let a: string|undefined

let a?: string = undifined

数组类型定义用 T[] 尽量不用 Array<T>

纯字符串用双引号包裹

✅ className="d-flex background-contain bg-size"

❌ className={`d-flex background-contain bg-size`}

推荐 transform 替换 zoom

如果变量是 Boolean 可直接判断

✅ backdrop ? 0.5 : 0

❌ backdrop === false ? 0 : 0.5

行内元素中不要用块级元素

✅ <button><span>123</span></button>

❌ <button><div>123</div></button>

PostCSS 会补全厂商前缀

✅

.a{
    background-clip: text;
}

❌

.a{
    -webkit-background-clip: text;
    background-clip: text;
}

.less 引入工具类时，加添加 reference

reference

passHref 的作用是把 <Link /> 的 href 传给其子元素，所以不能是 <div />，而是 <a />

一般情况下，用 React Bootstrap 的 <Image />

@import (reference) './utils';