当前位置：首页 > news >正文

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

news 2025/9/24 10:38:16

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的还需要装一些相关依赖）

最终效果
在这里插入图片描述