umijs 4.0学习 - umijs 的项目搭建+自动化eslint保存+项目结构

小墨宝2025-09-24 13:19

umijs 的项目搭建+自动化eslint保存+项目结构

1.环境推荐

node18 + pnpm(官方推荐)

2.创建项目

Umi 官方提供了一个脚手架，可以轻松快速创建一个项目：

pnpm create umi my-umi-app

重要的一些参数

? 请选择模板 (Use arrow keys)

Simple // 基础模板（仅包含核心依赖）

Ant Design // 集成 Ant Design 组件库的模板

Vue // 支持 Vue 语法的模板（需 Umi 4+）

React // 纯 React 模板（默认）

... // 其他社区模板（视 Umi 版本而定）

npm源选择taobao

3.配置自动保存格式化代码

根目录下会自动生成.eslintrc.js 和 .prettierrc文件有时候会是个json文件

根目录下创建.vscode配置文件

.vscode/settings.json

复制代码

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 粘贴时自动格式化
  "editor.formatOnPaste": true,
  // 默认格式化工具选择 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存时自动修复 ESLint 错误
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 忽略 Umi 自动生成的文件（避免格式化冲突）
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "prettier.ignorePath": ".prettierignore"
}

4.eslint 并没有自动检测文件

umijs 创建会加入eslit，但是需要指令验证，

配置.vscode/settings.json文件

复制代码

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 粘贴时自动格式化
  "editor.formatOnPaste": true,
  // 默认格式化工具选择 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存时自动修复 ESLint 错误
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // 忽略 Umi 自动生成的文件（避免格式化冲突）
  "prettier.ignorePath": ".prettierignore",

  // 启用 ESLint 自动检查
  "eslint.enable": true,
  // 指定 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  // 确保 ESLint 能找到配置文件
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

安装下eslinnt pnpm add eslint -d （这里指定下eslint8.0的版本更兼容，9.x的还需要装一些相关依赖）

最终效果

5.项目结构