uniapp项目实践拓展：代码统一风格
统一代码风格
- 安装 eslint + prettier
pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig
- 新建 .eslintrc.cjs 文件，添加以下 eslint 配置
/* eslint-env node */ require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { root: true, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier', ], // 小程序全局变量 globals: { uni: true, wx: true, WechatMiniprogram: true, getCurrentPages: true, UniApp: true, UniHelper: true, }, parserOptions: { ecmaVersion: 'latest', }, rules: { 'prettier/prettier': [ 'warn', { singleQuote: true, semi: false, printWidth: 100, trailingComma: 'all', endOfLine: 'auto', }, ], 'vue/multi-word-component-names': ['off'], 'vue/no-setup-props-destructure': ['off'], 'vue/no-deprecated-html-element-is': ['off'], '@typescript-eslint/no-unused-vars': ['off'], }, }
- 配置 package.json
{ "script": { // ... 省略 ... "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore" } }
- 运行
pnpm lint
到此，你已完成 eslint + prettier 的配置。
Git 工作流规范
- 安装并初始化 husky
pnpm dlx husky-init
- 安装 lint-staged
pnpm i lint-staged -D
- 配置 package.json
{ "script": { // ... 省略 ... }, "lint-staged": { "*.{vue,ts,js}": ["eslint --fix"] } }
- 修改 .husky/pre-commit 文件
npm test // [!code --] pnpm lint-staged // [!code ++]
到此，你已完成 husky + lint-staged 的配置。
