文件组织形式

├── .husky                  husky
├── .vscode                 vscode配置
├── config                  配置目录
├── patches                 补丁目录
├── bin                     自定义脚本目录
├── public                  html和静态资源目录
├── typings                 全局类型或第三方库类型文件
├── src                     源码目录
|   ├── components          公共组件目录
|   ├── assets              资源目录
|   ├── hooks               公共hooks库
|   ├── utils               公共方法库
|   ├── pages               页面文件目录
|   |   ├── index           index 页面目录
|   |   |   ├── components  页面 index 私有组件目录
|   |   |   ├── hooks       页面 index 私有自定义hooks
|   |   |   ├── index.tsx   index 页面逻辑
|   |   |   └── index.less  index 页面样式
|   |   |   └── api.ts      接口
|   |   |   └── store.ts    redux store文件
|   |   |   └── types.ts    类型定义
|   |   |   └── slice.ts    redux slice文件
|   |   |   └── const.ts    常量定义文件
|   |   |   └── util.ts     方法文件
|   ├── app.less            项目通用样式
|   └── app.tsx             项目入口文件
└── .editorconfig
└── .eslintrc.js
└── .gitignore
└── .prettierrc.js
└── .stylelintrc.js
└── tsconfig.json
└── README.md
└── package.json

命名/后缀

普通文件以小写字母命名，多个单词以下划线连接，例如 util.js、util_helper.js

普通文件以 .ts 作为文件后缀，React模块文件以.tsx作为后缀。

React模块组件文件命名遵循大驼峰命名法，例如 ReservationCard.jsx

引用命名: React模块名使用大驼峰命名，实例使用驼峰命名

// bad
import reservationCard from './ReservationCard';
// good
import ReservationCard from './ReservationCard';
// bad
const ReservationItem = <ReservationCard />;
// good
const reservationItem = <ReservationCard />;

模块命名:

模块使用当前文件名一样的名称. 比如 ReservationCard.jsx 应该包含名为 ReservationCard的模块. 但是，如果整个文件夹是一个模块，使用 index.js作为入口文件，然后直接使用 index.js 或者文件夹名作为模块的名称:

// bad
import Footer from './Footer/Footer';
// bad
import Footer from './Footer/index';
// good
import Footer from './Footer';

属性命名:

避免使用DOM相关的属性来用作其他的用途。

为什么？对于style 和 className这样的属性名，我们都会默认它们代表一些特殊的含义，如元素的样式，CSS class的名称。在你的应用中使用这些属性来表示其他的含义会使你的代码更难阅读，更难维护，并且可能会引起bug。

// bad
<MyComponent style="fancy" />
// good
<MyComponent variant="fancy" />

避免用一个字母命名，让你的命名有意义。

// bad
function q() {
  // ...
}
// good
function query() {
  // ...
}

用驼峰命名法来命名你的对象、函数、实例。

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

用大驼峰命名法来命名类。

// bad
function user(options) {
  this.name = options.name;
}
const bad = new user({
  name: 'nope',
});
// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}
const good = new User({
  name: 'yup',
});

不要用前置或后置下划线。

为什么？JavaScript 没有私有属性或私有方法的概念。尽管前置下划线通常的概念上意味着私有，事实上，这些属性是完全公有的，因此这部分也是你的 API 的内容。这一概念可能会导致开发者误以为更改这个不会导致崩溃或者不需要测试。如果你想要什么东西变成私有，那就不要让它在这里出现。

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';
// good
this.firstName = 'Panda';

导出名和文件名一致

export default 导出模块A，则这个文件名也叫 A.*， import 时候的参数也叫 A。 大小写完全一致。

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;
// file 2 contents
export default function fortyTwo() { return 42; }
// file 3 contents
export default function insideDirectory() {}
// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export
// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly
// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js

函数名用小驼峰，文件名需要和函数名一致。

function makeStyleGuide() {
  // ...
}
export default makeStyleGuide;

类/单例/函数库/对象 用大驼峰。

const AirbnbStyleGuide = {
  es6: {
  }
};
export default AirbnbStyleGuide;

全大写字母设置静态变量，

• 他需要满足三个条件。
  1. 导出变量；
  2. 是 const 定义的， 保证不能被改变；
  3. 这个变量是可信的，他的子属性都是不能被改变的。

     为什么？这是一个附加工具，帮助开发者去辨识一个变量是不是不可变的。UPPERCASE_VARIABLES 能让开发者知道他能确信这个变量（以及他的属性）是不会变的。

// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';
// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';
// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';
// ---
// 允许但不够语义化
export const apiKey = 'SOMEKEY';
// 在大多数情况下更好
export const API_KEY = 'SOMEKEY';
// ---
// bad - 不必要的大写键，没有增加任何语义
export const MAPPING = {
  KEY: 'value'
};
// good
export const MAPPING = {
  key: 'value'
};

[

](#%E7%9B%AE%E5%BD%95)