1、前言

笔者参考【前端工程化】配置React+ts企业级代码规范及样式格式和git提交规范 这篇博客进行了前端工程化实践（笔者没有使用里面提到的editorconfig、commitizen和stylelint，其它都已进行了实践。），并在原作者的基础上作出了一些修改和补充，最终得到了一个前端工程化配置较为完善的项目模板 vite-react-ts-template 。需要的朋友可直接拉到本地进行项目的开发而无需进行工程化的配置，也可根据自己的需要进行修改或者完善。

2、修改

笔者在参考原作者文章时，发现了几个可能由于版本或其它原因导致的配置问题，此处作出修改（下面的命令行都基于作者的windows的cmd窗口，mac/linux/powershell可能有些许不同）：

• 原作者为项目添加了.vscode/settings.json，将所有前端涉及的语言都陈列出来用prettier进行格式化，其实直接统一即可，特殊的再单独陈列。同时search.exclude配置是用于忽略哪些文件不被搜索的，没必要设置。同时笔者认为，并不是所有的团队伙伴都会用VSCode写代码，因此不应添加项目的.vscode/settings.json文件，需要的配置直接在VSCode本地的settings.json更改即可：

          "editor.defaultFormatter": "esbenp.prettier-vscode",
          "[json]": {
                  "editor.defaultFormatter": "vscode.json-language-features"
          }
  

• 原作者关于借助prettier格式化代码，没有下载prettier依赖而是直接使用插件进行代码格式化。建议直接在项目里面下载该依赖，并可以package.json的scripts字段中新增了prettier脚本后，可以在终端中通过npm run prettier命令来执行ESLint检查或者直接修改：

pnpm install prettier -D

	"scripts": {
		"prettier": "prettier --write src/**/*.{ts,tsx,less}"
	},

• 同时应该新建的是.prettierrc.json文件，而不是.prettierrc.js，且可以在 VSCode 的设置中找到“Editor: Format On Save”选项（或者.vscode\settings.json里面作出该配置），勾选它，这样每次保存代码时都会自动格式化。笔者使用的.prettierrc.json配置如下：

{
	"printWidth": 100,
	"tabWidth": 2,
	"useTabs": true,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "none",
	"bracketSpacing": true,
	"arrowParens": "avoid"
}

• 原作者关于代码提交时检测commit备注规范，配置文件既可以是.commitlintrc.json文件，也可以是commitlint.config.js文件：（可看 commitlint官方文档。）

{
  "extends": [
    "@commitlint/config-conventional"
  ],
  "rules": {
    "type-enum": [
      2,
      "always",
      [
        "init",
        "feat",
        "fix",
        "docs",
        "style",
        "refactor",
        "perf",
        "test",
        "chore",
        "revert",
        "build"
      ]
    ],
    "subject-case": [
      0
    ]
  }
}

• 配置husky的相关命令在husky v9中做出了一些更改：（注意：husky v4及之前的版本才支持package.json中通过husky: {hooks: {"pre-commit": xxx}}的方式更新脚本，后面的版本都仅支持修改.husky/xxx目录下的配置脚本，具体可看 husky官方文档。

  • husky自动初始化：

  // package.json
  {
      "scripts":{
        	"prepare": "husky"
      }
  }
  

  • husky集成eslint和prettier：（>>表示追加，cmd不用引号包裹追加的命令）

  echo npm run prettier >> .husky\pre-commit
  echo npm run eslint >> .husky\pre-commit
  

  （但一般来说，husky钩子无需集成prettier命令，因为经过我们前面的prettier配置之后，每次保存文件都能自动格式化，无需提交代码前再次执行。）

  • husky集成commitlint：

  echo npx --no-install commitlint --edit $1 > .husky/commit-msg
  

3、补充

3-1 ESLint 配置补充

• 借助eslint-plugin-import实现按照约定的规则对引入的模块进行排序

  1. 执行以下命令来安装eslint-plugin-import插件：

  cd client
  pnpm install eslint-plugin-import --save-dev
  

  2. 在您的ESLint配置文件中，添加import到plugins部分：

   {
     "plugins": [
       "import"
     ],
       "rules": {
       // 这里可以配置具体的规则
     }
   }
  

  3. 在rules部分添加类似以下的规则配置：

      "rules": {
        "import/order": [
          "error",
          {
            "groups": [
              "builtin",
              "external",
              ["internal", "parent", "sibling", "index", "object", "type"],
              "unknown"
            ],
            "pathGroups": [
              {
                "pattern": "@app/**",
                "group": "external",
                "position": "after"
              }
            ],
            "pathGroupsExcludedImportTypes": ["builtin"],
            "newlines-between": "always",
            "alphabetize": {
              "order": "asc",
              "caseInsensitive": true
            }
          }
        ]
      },
  

  参考博客：
  eslint-plugin-import之import/order
  eslint-plugin-import 真香
  

• 下面三个规则分别是禁止代码出现console打印、只能使用全等号和常量只能使用const定义：

          rules: {
                  'no-console': 'error',
                  eqeqeq: 'error',
                  'prefer-const': [
                          'error',
                          {
                                  destructuring: 'any',
                                  ignoreReadBeforeAssign: false
                          }
                  ]
          },
  

• 在package.json的scripts字段中新增了eslint脚本后，可以在终端中通过npm run eslint命令来执行ESLint检查。（可传给eslint命令行的参数可见命令行界面）

  "scripts": {
    "eslint": "eslint  --fix --max-warnings=0 src/**/*.{ts,tsx}"
  },
  - 
  

• 若想将husky、eslint、lint-staged这三者结合起来，使用husky工具将pre-commit钩子与eslint命令关联，这样可以在每次提交代码前自动执行暂存区的代码检查。例如，在package.json中添加以下配置：

  {
         "scripts": {
                 "eslint": "eslint --fix --max-warnings=0",
                  "prepare": "husky"
         },
         "lint-staged": {
                 "src/**/*.{ts,tsx}": [
                         "npm run eslint"
                 ]
         }
  }
  

  此时再在.husky\pre-commit添加对应的钩子：（先删掉前面添加的npm run eslint钩子）

  echo npx lint-staged >> .husky\pre-commit
  

  即可实现上面所说的效果。

3-2 其它配置补充

• 在package.json的scripts字段中更改项目启动命令：

  "scripts": {
    "start": "pnpm run dev",
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "eslint": "eslint src/**/*.{ts,tsx}"
  },

此时便可以通过pnpm start命令启动项目，通过pnpm build命令打包项目。

• vite启动项目后，自动打开链接
  

在vite.config.ts里面配置open:true字段即可：

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

    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
      server: {
        open: true
      }
    })

• 配置vite和ts的alias别名@/：

1. 在tsconfig.json文件，添加以下代码：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
// 这会将 @/ 路径别名映射到 src/ 目录。

2. 在vite 的配置文件vite.config.js中添加以下代码：

import path from 'path';

export default {
  // ...其他配置项
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
}

注意，如果报错：显示找不到模块“path”或其相应的类型声明：

通过命令pnpm install --save-dev @types/node安装@types/node这个类型声明模块即可。

3. 这样便能使用别名：（只有同一层级下才用相对路径引用，否则用@绝对路径）

import App from '@/App'

3-3 一些细节

下面是本人实践过程中一些小建议，每个人每个团队可能要求不同：

• 类型定义优先用interface，以I开头，大驼峰。同时各种类型后缀作出规定：（组件命名大驼峰，方法和变量小驼峰）

// 给接口传递的参数类型
export interface IXxxParams{}

// 给组件传递的参数类型
export interface IXxxProps{}

// 类型为数组项
export interface IXxxItem{}

// 给表单传递的参数类型
export interface IXxxForm{}

// 给表格传递的参数类型
export interface IXxxTable{}

// 不得不使用 type时
export type XxxType = 'aaa' | 'bbb' | 'ccc' | 'ddd';

// 枚举类型
export enum XxxYyy {
	AAA_BBB = xxx,
	CCC_DDD = xxx,
	EEE_FFF_GGG = xxx
} 

• 类型统一定义到组件里，如果页面中直接用到则从组件引入而不能组件从页面中引入。（每个组件建议包含四个部分：组件逻辑tsx、样式文件、接口、类型，不要耦合在一起）
• 全局样式变量存放在项目的src\assets\styles\variables.less目录下。

自此，项目的工程化工作便已完成，具体可见 vite-react-ts-template：