# TypeScript 编码风格
::: details 目录
[[toc]]
:::

::: tip 基本准则
关于代码风格，没有谁对谁错，不同的人有不同的偏好。为了保持致的团队编码风格，降低代码阅读工作量，编码风格的确认采用最如下基本原则。

* 编码偏好少数服从多数，个人服从团队；
* 有争论时，由 teamleader 最终决定编码风格；
* 使用 ```eslint ``` + ```prettier``` 规范代码风格。代码必须通 ```eslint``` 检查；
* 为保持一致。当有更好的编码风格被团队受时，老代码也要修改为新的编码风格；
:::

## eslint
### 安装
```json{4-6}
{
    ......
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^2.33.0",
        "@typescript-eslint/parser": "^2.33.0",
        "eslint": "^7.0.0",
        "typescript": "^3.9.5"
    },
}
```

在项目文件夹下执行```npm install```命令安装 ```eslint``` 相关的包。

### 配置
在项目文件夹配置``` .eslintrc.js ```文件，推荐的配置如下。

<PCodeGit repos="web/persagy-web" src="/persagy-web-base/.eslintrc.js" />

## prettier
```prettier``` 是一个流行的代码格式化工具。它能够解析代码，使用设定的规则来重新输出出格式规范的代码。它具有如下优点：
* 可配置化
* 支持多种语言
* 集成多数的编辑器
* 简洁的配置项
* 与 ```eslint``` 搭配使用

### 安装
```prettier``` 可以使用全局安装或配置 ```package.json``` 的方式。

**全局安装:**
* 优点：在一台机器上安装一次，所有项目都可以使用。
* 缺点：在其他未安装过的机器上下载项目，需要在新机器上手动安装。

```shell
C:\> npm install --global prettier
```

**使用 package.json:**
* 优点：下载完项目后，执行 ```npm install``` 会自动完成所有的安装过程。不需要额外的操作。
* 缺点：每个项目都需要安装；

```json{4-6}
{
    ......
    "devDependencies": {
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-prettier": "^3.1.3",
        "prettier": "^2.0.5",
        "typescript": "^3.9.5"
    },
}
```
在项目文件夹下执行```npm install```命令安装 ```eslint``` 相关的包。

空函数会降低可读性，因为读者需要猜测它是否是有意的。因此，为空函数写一个明确的评论是一个好习惯。


----------------------------
```typescript
function foo() {
    // do nothing.
}
```

尤其是，箭头函数的空白块可能会让开发人员感到困惑。这与空对象文字非常相似。
```typescript
list.map(() => {});   // This is a block, would return undefined.
list.map(() => ({})); // This is an empty object.
```