Walrus

# 前端项目规范

# 目录规范

一般业务项目目录请遵循以下目录(以及建议包含的文件)

├── config                      # 项目编译相关(Umi项目约定)
├── src                         # 主要代码目录
│   ├── assets                  # 静态资源目录(图片、视频、音频) 比较建议将其上传到CDN
│   ├── components              # 组件目录
│   ├── config                  # 项目配置相关(一些项目级别的配置)
│   ├── hooks                   # react hooks目录(react项目专有)
│   ├── layouts                 # 布局相关
│   ├── locales                 # 多语言相关
│   ├── models                  # 全局状态目录
│   ├── pages                   # 页面代码
│   ├── services                # 接口相关
│   ├── styles                  # 全局样式
│   └── utils                   # 全局工具方法目录
├── .editorconfig               # IDE设置文件 推荐有
├── .gitignore                  # Git忽略文件
├── LICENSE                     # 许可协议
├── package.json                # package.json
├── README.md                   # 项目描述文件
├── tsconfig.json               # typescript配置文件（typescript项目专有）
└── yarn.lock                   # yarn锁定文件 推荐使用`yarn`

注:

pages下的目录可以当为一个模块，可以存在 components、config、hooks、models、utils、services 目录

# .editorconfig 推荐配置

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

# .gitignore 推荐配置

# Log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Test
coverage

# Dependency directories
node_modules

# build output
lib
dist
# 有的框架会使用此目录，请根据需要增删
# public

# IDE
.idea
.vscode

.DS_Store

# tsconfig.json推荐配置

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext",
    "module": "esnext",
    "lib": [
      "esnext"
    ],

    /* Strict Type-Checking Options */
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "alwaysStrict": true,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

# 目录/文件命名

  • 必须遵循语义化
  • 以-分割

例子:

// 目录
device-detail

// 文件名
user-info.tsx

← CSS规范 →