uniapp项目实践拓展章：代码统一风格

布满荆棘的人生 2024-03-23 23:59 16阅读 0赞

## 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` 配置  
    ![在这里插入图片描述][56f45eb51b6240a0ae404d3f8c72be4f.png]

/* 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`  
    ![在这里插入图片描述][03d96f7575ee4a3d87a8dddf255a428a.png]

{
        
      "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` 的配置。

[56f45eb51b6240a0ae404d3f8c72be4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d2b2b09d978a4124bb6f6ea7bae723e0.png
[03d96f7575ee4a3d87a8dddf255a428a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a2aa9136c463484fbc8c21ca8e2f481b.png