# 基于 UniApp +Vite + Vue3 + TypeScript + Pinia 项目搭建 ## UniApp 工程搭建 ```shell npx degit dcloudio/uni-preset-vue#vite-ts 项目名称 ``` # 参考链接 [uni-app vue-cli 工程创建](https://uniapp.dcloud.net.cn/quickstart-cli.html#install-vue-cli) ## 配置 Prettier ## 配置ESLint ### 1. 引入ESLint ```shell npx eslint --init ``` #### 第一个问题是： - 你希望用 ESLint 来干嘛？ - 我们选择最全面的那个：检查语法，发现问题，并强制统一代码样式 ```shell $ npm init @eslint/config ? How would you like to use ESLint? … To check syntax only To check syntax and find problems ❯ To check syntax, find problems, and enforce code style ``` #### 第二个问题是： - 你的项目用的是什么模块系统？ - 因为是运行在浏览器端，选择 ESModule ```shell ? What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJS (require/exports) None of these ``` #### 第三个问题是： - 你用的什么框架？ - 选择 Vue ```shell ? Which framework does your project use? … React ❯ Vue.js None of these ``` #### 第四个问题是： - 你是否使用 TypeScript？ - 选择 Yes ```shell ? Does your project use TypeScript? › No / Yes ``` #### 第五个问题是： - 你的代码运行在什么环境？（这个可以多选） - 选择 Browser 浏览器环境 ```shell ? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection) Browser Node ``` #### 第六个问题是： - 你想定义怎样的代码风格？ - 选择使用一个流行的代码风格 ``` ? How would you like to define a style for your project? … ❯ Use a popular style guide Answer questions about your style ``` #### 第七个问题是： - 你想使用哪个样式风格？ - standard-with-typescript ```shell Which style guide do you want to follow? · > standard-with-typescript ``` #### 第八个问题是： - 配置文件用什么格式？ - 就选 JavaScript 吧（生成 eslintrc.js 文件） ```shell ? What format do you want your config file to be in? … ❯ JavaScript YAML JSON ``` #### 第九个问题是： - 你是否想立刻安装 - 选择是 ```shell Would you like to install them now? Yes ``` #### 第十个问题是： - 选择哪个包管理工具 - 我选择的是pnpm ```shell Which package manager do you want to use? · pnpm ``` ### 2. 解决ESLint和Prettier规则冲突问题 `ESLint` 和 `Prettier` 组合, 以 `Prettier` 为主, 不符合 `Prettier` 的标准时, 会报一个 ESLint 错误, 同时也可以使用`eslint --fix` 来进行格式化. #### 1. 安装 eslint-config-prettier、eslint-plugin-prettier 和 prettier ```shell pnpm add -D eslint-config-prettier eslint-plugin-prettier prettier ``` #### 2. 修改 eslintrc 文件 ```js { "extends": [ "plugin:prettier/recommended" ] } // 相当于 { "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": "off" } } ``` ### 3. 安装eslint-plugin-import插件 这个插件意在提供对ES6+ import/export语法的支持，有助于防止你写错文件路径或者引用的变量名 #### 1. 安装 ```shell pnpm add -D eslint-plugin-import ``` #### 2. 修改 eslintrc 文件 ```js { "extends": [ "plugin:import/recommended" ] } // 相当于 { "plugins": ["import"], "rules": { "import/no-unresolved": [2, { "commonjs": true, "amd": true }], "import/named": 2, "import/namespace": 2, "import/default": 2, "import/export": 2, } } ``` ### 4. 安装eslint-plugin-promise插件 这个插件意在通过代码风格检测让开发者养成较好地使用promise的方式（最佳实践，best practices）。比如在对promise使用了then之后会要求你加一个catch捕获下异常，当然如果你的方法是直接return返回了这个promise的话则不会要求你马上加catch（因为毕竟当然你可以稍后在其他地方拿到这个promise后再catch） #### 1. 安装 ```shell pnpm add -D eslint-plugin-promise ``` #### 2. 修改 eslintrc 文件 ```js { "extends": [ "plugin:promise/recommended" ] } // 相当于 { "plugins": ["promise"], "rules": { "promise/always-return": "error", "promise/no-return-wrap": "error", "promise/param-names": "error", "promise/catch-or-return": "error", "promise/no-native": "off", "promise/no-nesting": "warn", "promise/no-promise-in-callback": "warn", "promise/no-callback-in-promise": "warn", "promise/avoid-new": "warn", "promise/no-return-in-finally": "warn" } } ``` ## 配置Pinia [pinia-plugin-persistedstate ](https://prazdevs.github.io/pinia-plugin-persistedstate/zh/)