ant design pro项目规范

1、 创建一个ant design pro项目

第一步

yarn create umi ant_design_pro_test1

第二步 选择创建ant-design-pro项目

第三步 选择typescript

第四步 选择simple

然后就创建成功了一个ant design pro项目，最新的创建ant design pro项目没有选择版本的选项了，默认创建的就是最新的V5，antd 4.0+的版本。
项目结构如下：

2、 目录（命名）规范

主要是src目录下的规范
● assets：主要放置一些资源文件。

第一个文件夹放图片images，可以根据图片会在哪些地方用到，在images下建下一级目录，文件夹命名所有字母都使用小写。使用’'作为每个词的分界，归属在这一层文件夹下的图片文件，图片的名字也应该是用小写加‘’的方式。禁止用拷贝过来的中文名字。

● components：主要放置一些会在多个地方使用到的公共组件。

一个组件对应一个文件夹，文件夹命名规范使用大写字母开头的PascalBase（大驼峰法）风格的命名，每个文件夹下面放置一个index.tsx和一个index.less文件。如果没有样式可不写index.less。

如果是公共的组件里面还需要抽出组件


● e2e：写一些自动化测试的。暂时没有用起来。

● layouts：布局文件，目前我们项目基本是结构都是一致的，也不用去多余写。

● locales：国际化语言配置文件。

● models：全局 dva model命名规范，models里面的文件一般都采用小写的命名方式，注意命名空间要惟一。

● pages：所有的页面入口。

如果是一系列页面的集合，最外层采用小写的单一字母作或者小写的’'链接的名字为最外层的文件夹名字，如果这些页面有公共的组件，统一写在这个文件夹里面的components里面，然后在写单独的页面文件夹。

如果是独立的页面，没有下级菜单的那种页面，ant design pro给出的建议是用PascalBase（大驼峰法）来命名，但我们目前都是小写加下划线的‘'的格式，所以我们就没个项目统一就行。
每个页面文件夹里面包含index.tsx、index.less、service.ts文件，如果用了dva的，包含model.ts文件，用了mock就还有mock.ts文件。有组件的统一写在components里面。

● services：写接口地址的文件，一般都是公共的会在这里写。非公共的都写在页面文件夹对应的service文件里面的。命名一般都是小写的单一字母。

● utils：工具类的集合。命名采用小驼峰命名第一个单字以 小写字母开始；第二个单字的首字母大写，例如：firstName、lastName。

顺道说一下ant design pro中的规范

3、其他规范
● components文件夹下的子文件，用大写字母开头的PascalBase（大驼峰法）风格的命名
错误示范：
这种的也不符合typescript-eslint命名规范

● tsx文件，名字都采用大写字母开头的PascalBase（大驼峰法）风格的命名

● 项目中的常量或者枚举（Enum或者Const）类型的应该采用大驼峰命名
正确示范：

错误示范：

● 代码中的变量，都应该采用小驼峰的命名规范
正确示范：

● 接口类型，采用大驼峰命名规范：
错误示范：
如果没有采用大驼峰命名，是不符合typescript-eslint规范的。

正确示范：

● 函数名，采用小驮峰命名。同时名字也应该简单明了，让别人知道你这个方法是干嘛的，除一些常用方法都应该写上注释。


4、编码规范
● 一个文件只申明一个组件。
● 组件名称和定义该组件的文件名称要保持一致。

● 如果封装的组件，参数很多，要把关闭标签另起一行。

● 封装的jsx里面的props属性名字要用小驮峰。
// 错误

<Foo UserName="hello" phone_number={12345678} />

// 正确

<Foo userName="hello" phoneNumber={12345678} />

● 如果定义的组件不需要使用state，建议用函数组件，
react-eslint规则规定如果没有state要用函数组件
错误示范：

● 方法之间应该空一行
eslint规定在类的成员之间要有个空行区分
错误示范：

正确示范：

● 包含的有视图的方法应该写在功能逻辑的方法的后面，最好是紧跟着页面的render（）方法前。把页面和逻辑做一个区分。
错误示范：

正确示范：

● 使用state或者props尽量把它解构出来在使用，不要直接this.state／this.props
错误示范：

正确示范：