tools.md 2.2 KB

代码规范工具

::: details 目录 [[toc]] :::

eslint

安装

配置 package.json 增加 eslint 依赖。

{
    ......
    "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 文件,推荐的配置如下。

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

使用

配置 package.json 增加 lint 脚本命令。

{
    ......
    "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命令进行代码风格简查。没出任何报错信息,则通过代码审查。

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 依赖。

{
    ......
    "devDependencies": {
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-prettier": "^3.1.3",
        "prettier": "^2.0.5",
        "typescript": "^3.9.5"
    },
}

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

使用

没想好怎么写 ):?