Vue3+Vite+TypeScript+ElementPlus项目最优配置

一、Vue3+Vite+TypeScript+ElementPlus项目最优配置Vite项目初始化1. 项目初始化1.1. 项目准备1.2. 包管理工具`pnpm`2. `Vite`创建项目辅助插件工具1. `ESLint`配置1.1. 初始化`ESLint`配置1.2. ESLint配置文件1.3. 添加脚本命令2. `Prettier`配置2.1. 安装`Prettier`插件2.2. 测试`Prettier`是否能格式化2.3. VS Code安装`prettier - code formatter`及配置2.4. `eslint.config.ts`配置3. EditorConfig for VS Code(EditorConfig)4. husky5. commitlintVite项目初始化1. 项目初始化1.1. 项目准备Vite 需要Node.js =18+ 或者 =20+版本，有些模板依赖更高的Node版本，所以需要确认Node版本我们使用node.js : 22.21.11.2. 包管理工具pnpmpnpm快速的,节省磁盘空间的包管理工具中文官网：https://pnpm.io/zh/motivation# 安装pnpmnpminstallpnpm-g# 更新所有依赖项，遵守 package.json 中指定的范围pnpmupdate# 更新所有依赖pnpmup--latest# 更新所有依赖到最后版本2.Vite创建项目中文官网文档：https://vitejs.cn/vite3-cn/guide/#trying-vite-online# pnpm create vite 项目名称 --template 预设模板pnpmcreate vite vue3Admin--templatevue-ts查看create-vite以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts辅助插件工具1.ESLint配置vscode需要安装插件Vue-officical中文文档：https://zh-hans.eslint.org/docs/latest/use/getting-startedESLint是一个根据方案识别并报告ECMAScript/JavaScript代码问题的工具，其目的是使代码风格更加一致并避免错误。在很多地方它都与JSLint和JSHint类似，除了：ESLint使用Espree对JavaScript进行解析。ESLint在代码中使用AST评估方案。ESLint完全是插件式的，每个规则都是一个插件，你可以在运行时中添加更多插件前提条件：内置 SSL 支持的 Node.js 版本（12.22.0、14.17.0 或 =16.0.0），如果你使用的是官方 Node.js 发行版，那么已经内置了 SSL 支持1.1. 初始化ESLint配置npminit @eslint/config配置步骤1.2. ESLint配置文件ESLint初始化后自动生产配置文件eslint.config.ts，如下：importjsfrom"@eslint/js";// 校验js文件importglobalsfrom"globals";importtseslintfrom"typescript-eslint";// 校验ts文件importpluginVuefrom"eslint-plugin-vue";// 校验vue文件import{defineConfig}from"eslint/config";exportdefaultdefineConfig([