十分钟搭建一个 Vite+React+TS+ESLint+Prettier+Husky+Commitlint 项目

走过路过发现 bug 请指出，拯救一个辣鸡（但很帅）的少年就靠您啦！！！

闲着没事想写个项目，顺便把搭建前端开发规范工作流的过程记录下，其实现在这些工具已经越来越方便了，以前配各种错误，现在新项目十分钟真的轻松搞定（网速不拉跨的情况下）。

我使用的包管理器是 Yarn ，使用 npm 或 pnpm 的可以自己调整下相关命令。

创建项目

进入你想创建项目的目录，运行 yarn create vite 然后根据提示输入项目名，然后依次选择 react、react-ts 即可创建一个 React+TS 项目。

创建后按照提示进入项目文件夹并安装依赖，然后运行 yarn dev 即可启动项目。不同于 Vite2，可以看到 Vite3 的默认端口号是 5173。

打开 http://localhost:5173/ 可以看到默认页面。

代码规范

ESLint

我们通过下面的命令可以非常简单地进行 ESLint 的初始化。

npm init @eslint/config

按需选择完配置后，选择立即安装，就可一键安装相关依赖。安装成功后 ESLint 帮我们创建了 .eslintrc.cjs 配置文件（cjs 是指 CommonJS 格式）。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

可以看到生成的配置文件继承了 "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended" ，我们如果需要配置自己的 lint 规则可以在 rules 中添加。

Prettier

一般 ESLint 用于检测代码风格代码规范，Prettier 用于对代码进行格式化。

先安装依赖

yarn add prettier -D

然后再根目录创建 .prettierrc.js 配置文件

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  semi: false,
  trailingComma: "none",
  bracketSpacing: true
}

ESLint + Prettier

接下来在 ESLint 中引入 Prettier，安装相关依赖。

yarn add eslint-config-prettier eslint-plugin-prettier -D

现在更改 Eslint 的配置文件 .eslintrc.cjs 在里面加入 Prettier 相关配置。具体含义可见 github.com/prettier/es…

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
+       "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
+       "prettier"
    ],
    "rules": {
+       "prettier/prettier": "error",
+       "arrow-body-style": "off",
+       "prefer-arrow-callback": "off"
    }
}

接下来在 package.json 的 script 中添加命令。

{
    "script": {
        "lint": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./"
    }
}

尝试运行一下 yarn lint 但是发现报错了。

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/Code/2022/leetcode-vj-fe/.prettierrc.js from /Users/Code/2022/leetcode-vj-fe/node_modules/prettier/third-party.js not supported.

这个是 .prettierrc.js 中使用 CommonJS 语法报错，把 .prettierrc.js 也改名为 .prettierrc.cjs 就好了。

或者配置允许 CommonJS 语法，删除 package.json 中的 "type": "module"，同时修改 .eslintrc.cjs 的 env。

module.exports = {
  env: {
    browser: true,
    es2021: true,
+   node: true
  },
  // ...
}

再试下发现还是有错误

错误看起来也比较明显，就是我们没有引入 React，在 React17 中，我们已经不需要为 JSX 显示引入 React 了，按照提示更改下 .eslintrc.cjs。

module.exports = {
  extends: [
    // ...
    'plugin:react/jsx-runtime'
  ],
  //...
  settings: {
    react: {
      version: 'detect'
    }
  }
}

再运行已经没有报错了，我们看到 ESLint 已经生效，对 App.tsx 进行了修复。

Vite 中引入 ESLint

在 Vite 中引入 ESLint 插件，以便在开发阶段发现问题。

yarn add vite-plugin-eslint -D

然后在 vite.config.ts 引入插件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteEslint from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    viteEslint({
      failOnError: false
    })
  ]
})

我加了选项 failOnError: false 因为不想再开发阶段因为 ESLint 的错误打断开发，大家也可以使用默认配置，不传参数。现在我们可以在运行时的控制台看到 ESLint 的报错了。

Husky + lint-staged

Husky

通过 Husky 在 Git commit 时进行代码校验。

首先安装依赖

yarn add husky -D

然后在 package.json 中添加脚本 prepare 并运行

npm pkg set scripts.prepare="husky install"

npm run prepare

运行命令后会在项目根目录创建 .husky 文件夹。

现在给 Husky 添加一个 Hook

npx husky add .husky/pre-commit "npm run lint"

添加 hook 之后，每次 git commit 之前都会先运行 npm run lint，通过之后才会提交代码。

lint-staged

每次提交都检测所有代码并不是一个好的决定，比如你只修改了文件 A 结果文件 B 报错了，但是文件 B 并不是你负责的模块，emmm改还是不改？

我们可以通过 lint-staged 只对暂存区的代码进行检验。

首先安装依赖

yarn add lint-staged -D

然后在 package.json 添加相关配置。

{
  "lint-staged": {
    "*.{js,jsx,tsx,ts}": [
      "npm run lint"
    ]
  }
}

并在 .husky/pre-commit 中替换 npm run lint 为 npx lint-staged。现在我们每次提交代码前都会对改动的文件进行 Lint 检查。

commitlint

使用 commitlint 对提交信息进行校验。先安装依赖：

yarn add @commitlint/cli @commitlint/config-conventional -D

然后在根目录创建配置文件 .commitlintrc.cjs

module.exports = {
  extends: ["@commitlint/config-conventional"]
}

然后把 commitlint 命令也添加 Husky Hook。运行命令：

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

现在提交信息不合法就会被拦截导致提交失败，规范可见 commitlint ，你也可以根据需要修改提交信息规范。

现在我们已经配置好了一个 Vite+React+TS+ESLint+Prettier+Husky+Commitlint 项目，可以开始愉快地开发了。