--- theme: channing-cyan --- 构建超实用的 `uniapp+vue3+ts` 模板，从此编码体验和用户体验爽得飞起。系列文章 * [【unibest】uniapp + vue3 超实用模板](https://juejin.cn/post/7315246744158191666)（本文） * [【unibest】uniapp + vue3 超实用模板（续）](https://juejin.cn/post/7315461542697500682) * [【unibest】uniapp + vue3 超实用模板（终）](https://juejin.cn/post/7321930742400188453) * [【unibest】uniapp + vue3 超实用模板（番外篇）](https://juejin.cn/post/7325287148009357338) ## 0、前置说明本模板基于`cli`生成，全程时候用`VSCode`编码，增加类型提示，开发体验很好。 * 使用了图片压缩，再也不用先去外面压缩图片再重新上传了。 * 使用了 `unocss + unoIcons`，再也不用从外面找图片/图标再引入了。 * 使用了 `svg-loader`svg 随便使用。 * 开发环境： node >=18，pnpm >=8.10.2 。 > 生成项目：`npx degit dcloudio/uni-preset-vue#vite-ts vue3-uniapp-template` ## 1、引入 `prerttier` + `eslint` + `stylelint` ### 1-1 .editorconfig file ```yaml # .editorconfig 文件 root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格（tab | space） indent_size = 2 # 缩进大小 end_of_line = lf # 控制换行类型(lf | cr | crlf) trim_trailing_whitespace = true # 去除行首的任意空白字符 insert_final_newline = true # 始终在文件末尾插入一个新行 [*.md] # 表示仅 md 文件适用以下规则 max_line_length = off # 关闭最大行长度限制 trim_trailing_whitespace = false # 关闭末尾空格修剪 ``` ### 1-2 .prettierrc.cjs file ```js // .prettierrc.cjs 文件 // @see https://prettier.io/docs/en/options module.exports = { singleQuote: true, printWidth: 100, tabWidth: 2, useTabs: false, semi: false, trailingComma: 'all', endOfLine: 'auto', } ``` ### 1-3 .eslintrc.cjs file ```js // .eslintrc.cjs 文件 module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-essential', // eslint-plugin-import 插件， @see https://www.npmjs.com/package/eslint-plugin-import 'plugin:import/recommended', // eslint-config-airbnb-base 插件， tips: 本插件也可以替换成 eslint-config-standard 'airbnb-base', // 1. 接入 prettier 的规则 'prettier', 'plugin:prettier/recommended', 'vue-global-api', ], overrides: [ { env: { node: true, }, files: ['.eslintrc.{js,cjs}'], parserOptions: { sourceType: 'script', }, }, ], parserOptions: { ecmaVersion: 'latest', parser: '@typescript-eslint/parser', sourceType: 'module', }, plugins: [ '@typescript-eslint', 'vue', // 2. 加入 prettier 的 eslint 插件 'prettier', // eslint-import-resolver-typescript 插件，@see https://www.npmjs.com/package/eslint-import-resolver-typescript 'import', ], rules: { // 3. 注意要加上这一句，开启 prettier 自动修复的功能 'prettier/prettier': 'error', // turn on errors for missing imports 'import/no-unresolved': 'off', // 对后缀的检测，否则 import 一个ts文件也会报错，需要手动添加'.ts', 增加了下面的配置后就不用了 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }, ], // 只允许1个默认导出，关闭，否则不能随意export xxx 'import/prefer-default-export': ['off'], 'no-console': ['off'], // 'no-unused-vars': ['off'], // '@typescript-eslint/no-unused-vars': ['off'], // 解决vite.config.ts报错问题 'import/no-extraneous-dependencies': 'off', 'no-plusplus': 'off', 'no-shadow': 'off', 'vue/multi-word-component-names': 'off', '@typescript-eslint/no-explicit-any': 'off', }, // eslint-import-resolver-typescript 插件，@see https://www.npmjs.com/package/eslint-import-resolver-typescript settings: { 'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'], }, 'import/resolver': { typescript: {}, }, }, globals: { uni: true, UniApp: true, wx: true, WechatMiniprogram: true, getCurrentPages: true, UniHelper: true, Page: true, App: true, }, } ``` 并安装相关的依赖包： ```sh pnpm add -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser vue-global-api ``` ### 1-4 .stylelintrc.cjs file ```js // .stylelintrc.cjs 文件 module.exports = { root: true, extends: [ 'stylelint-config-standard', 'stylelint-config-standard-scss', // tips: 本插件也可以替换成 stylelint-config-recommended-scss 'stylelint-config-recommended-vue/scss', 'stylelint-config-html/vue', 'stylelint-config-recess-order', ], overrides: [ // 扫描 .vue/html 文件中的