# 代码规范工具
::: details 目录
[[toc]]
:::

## eslint

### 安装
配置 ```package.json``` 增加 ```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" lang="javascript" />

有时 IDE 开发环境的编辑器与 ```eslint``` 的编码风格不一致。因此需要修改相关的配置文件。在项目文件夹配置 ```.editorconfig``` 文件。推荐的配置如下。

<PCodeGit repos="web/persagy-web" src="/persagy-web-base/.editorconfig" lang="javascript" />

### 使用
配置 ```package.json``` 增加 ```lint``` 脚本命令。

```json{6}
{
    ......
    "scripts": {
        "build": "tsc",
        "publish": "npm publish",
        "lint": "eslint src/**/*.{js,ts,tsx}",
        "test": "jest",
        "typedoc": "typedoc --hideGenerator src",
        "publish-doc": "node publish.js"
    },
    ......
}
```

在项目文件夹下执行```npm run lint```命令进行代码风格简查。没出任何报错信息，则通过代码审查。

```shell
D:\Sybotan\graph>npm run lint

> sybotan-graph@2.2.72 lint D:\Sybotan\graph
> eslint src/**/*.{js,ts,tsx}


D:\Sybotan\graph>
```

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

### 安装
配置 ```package.json``` 增加 ```prettier``` 依赖。

```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```命令安装 ```prettier``` 相关的包。

### 使用
没想好怎么写 ):?
