2024-05-24-【工程化】小程序代码规范

1. eslint、prettier 安装&配置

  1. 插件安装 Prettier - Code formatter 安装
.prettierrc.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# 一行最多 100 字符
printWidth: 120
# 使用 2 个空格缩进
tabWidth: 2
# 不使用缩进符，而使用空格
useTabs: false
# 行尾需要分号
semi: true
# 使用单引号
singleQuote: true
# 对象的 key 仅在必要时用引号
quoteProps: as-needed
# jsx 不使用单引号，而使用双引号
jsxSingleQuote: false
# 末尾需要逗号
trailingComma: all
# 大括号内的首尾需要空格
bracketSpacing: true
# jsx 标签的反尖括号需要换行
jsxBracketSameLine: false
# 箭头函数，只有一个参数的时候，不需要括号
arrowParens: always
# 每个文件格式化的范围是文件的全部内容
rangeStart: 0
# 不需要写文件开头的 @prettier
requirePragma: false
# 不需要自动在文件开头插入 @prettier
insertPragma: false
# 使用默认的折行标准
proseWrap: preserve
# 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: css
# 换行符使用 lf
endOfLine: lf
# 后缀文件名特有规则
overrides:
  - files: "*.{wxss,less}"
    options:
      parser: less
  - files: "*.json,.*rc"
    options:
      parser: json
  - files: "*.{wxml,html}"
    options:
      parser: html
      htmlWhitespaceSensitivity: strict
  - files: "*.wxs"
    options:
      parser: babel
1
2
3
4
5
6
miniprogram_npm
package.json
project.config.json
project.private.config.json
pnpm-lock.yaml
package-lock.json

eslint.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
    // ECMAScript modules 模式
    sourceType: "module",
  },
  extends: ["plugin:prettier/recommended", "prettier"],
  globals: {
    wx: true,
    App: true,
    Page: true,
    Component: true,
    getApp: true,
    getCurrentPages: true,
    Behavior: true,
    global: true,
    __wxConfig: true,
  },
  ignorePatterns: ["*.wxs"],
  rules: {
    "prettier/prettier": "warn",
    "no-undef": "off",
    camelcase: ["error", { ignoreDestructuring: true }],
    "class-name-casing": "off",
    "no-console": ["warn", { allow: ["warn", "error"] }],
    "no-debugger": "error",
    "no-unused-expressions": [
      "error",
      { allowShortCircuit: true, allowTernary: true },
    ],
    "no-empty-interface": "off",
    "no-use-before-define": ["error", { functions: false }],
    "no-useless-constructor": "error",
    "prefer-const": "error",
    "prefer-destructuring": [
      "error",
      {
        AssignmentExpression: {
          array: false,
          object: false,
        },
        VariableDeclarator: {
          array: false,
          object: true,
        },
      },
      {
        enforceForRenamedProperties: false,
      },
    ],
    "no-const-assign": "error",
    "no-new-object": "error",
    "no-prototype-builtins": "error",
    "no-array-constructor": "error",
    "array-callback-return": "warn",
    "prefer-template": "error",
    "no-useless-escape": "error",
    "wrap-iife": ["error", "outside"],
    "space-before-function-paren": [
      "warn",
      {
        anonymous: "always",
        named: "never",
        asyncArrow: "always",
      },
    ],
    "no-param-reassign": [
      "warn",
      {
        props: true,
        ignorePropertyModificationsFor: [
          "acc", // for reduce accumulators
          "accumulator", // for reduce accumulators
          "e", // for e.returnvalue
          "ctx", // for Koa routing
          "req", // for Express requests
          "request", // for Express requests
          "res", // for Express responses
          "response", // for Express responses
          "$scope", // for Angular 1 scopes
          "staticContext", // for ReactRouter context
          "state", // for Vuex
        ],
      },
    ],
    "no-confusing-arrow": "warn",
    "no-dupe-class-members": "error",
    "no-iterator": "warn",
    "dot-notation": "warn",
    "one-var": ["warn", "never"],
    "no-multi-assign": "error",
    "no-unused-vars": [
      "error",
      {
        args: "after-used",
        ignoreRestSiblings: true,
        argsIgnorePattern: "^_.+",
        varsIgnorePattern: "^_.+",
      },
    ],
    eqeqeq: ["warn", "always"],
    "no-case-declarations": "error",
    "no-nested-ternary": "warn",
    "no-unneeded-ternary": "warn",
    "no-mixed-operators": [
      "error",
      {
        groups: [
          ["%", "**"],
          ["%", "+"],
          ["%", "-"],
          ["%", "*"],
          ["%", "/"],
          ["&", "|", "<<", ">>", ">>>"],
          ["==", "!=", "===", "!=="],
          ["&&", "||"],
        ],
        allowSamePrecedence: false,
      },
    ],
    "no-else-return": [
      "warn",
      {
        allowElseIf: false,
      },
    ],
    "no-new-wrappers": "warn",
    indent: [
      "warn",
      2,
      {
        SwitchCase: 1,
        VariableDeclarator: 1,
        outerIIFEBody: 1,
        FunctionDeclaration: {
          parameters: 1,
          body: 1,
        },
        FunctionExpression: {
          parameters: 1,
          body: 1,
        },
        CallExpression: {
          arguments: 1,
        },
        ArrayExpression: 1,
        ObjectExpression: 1,
        ImportDeclaration: 1,
        flatTernaryExpressions: false,
        ignoreComments: false,
      },
    ],
    "linebreak-style": ["warn", "unix"],
  },
};

.eslintignore

1
miniprogram_npm/**

2. 微信开发工具 自动格式化设置

1、打开开发者工具——设置——编辑器设置
2、更多及工作区的编辑器设置
3、点击右上角文件图标，进入 setting.json 文件配置
4、添加如下代码 到文件中

1
2
3
4
5
6
7
"files.associations": {
   "*.wxml": "wxml",
   "*.wxss": "css",
   "*.wxs": "js"
 },
 "editor.formatOnSave": true, // 保存文件自动格式化
 "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置编辑默认的格式化工具为prettier

3. git 提交规范 commitlint 设置

4. husky 安装设置 eslint 校验

  • 安装依赖 npm install husky --save-dev
1
"husky": "^8.0.3",

  • 初始化
    a. 在 package.json 中生成 prepare 指令npm set-script prepare "husky install"
    b. 执行 npm run install

  • 添加 commitlint 的 hook 到 husky 中，commit-msg 时进行校验
    npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
    此时，不符合规范的 commit 将不会被允许提交。正确提交示例: git commit -m "feat: 规则提交"

  • pre-commit 检验当前代码是否有 ESLint 错误
    在代码被提交之前，可以执行 npx eslint –ext .js,.ts,.vue src 指令来检测代码是否规范

  • lint-staged 是一个在 git 暂存文件上运行 linters 的工具
    优势：影响范围缩小到修改过的文件，不会对项目整体进行 eslint 操作执行。
    依赖安装 npm install lint-staged --save-dev 

    1
    2
    3
    4
    5
    6
      "lint-staged": {
      "*.{js, ts}": "eslint --cache --fix",
      "*.{js,ts,wxml,wxss,html,json,css,less}": [
        "prettier --write"
      ]
    },

  • npx husky add .husky/pre-commit 'npx lint-staged'

1
"prepare": "husky install & chmod +x .husky/commit-msg .husky/pre-commit",

commitlint 规范

注：commitlint 提交格式 <type>(<scope>): <subject>

  • 正确的例子
1
2
git commit -m 'feat: 增加 xxx 功能'
git commit -m 'bug: 修复 xxx 功能'
  • commitlint 参数说明
1
2
3
4
5
scope: 指 commit 的范围（哪些模块进行了修改）- 非必须
subject: 指 commit 的简短描述
body: 指 commit 主体内容（长描述）- 非必须
footer: 指 commit footer 信息 - 非必须
type: 指 当前 commit 类型
  • type 一般有下面几种可选类型：
1
2
3
4
5
6
7
8
9
10
11
12
build: 主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
ci: 主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
docs: 文档更新
feat: 新增功能
merge: 分支合并 Merge branch ? of ?
fix: bug 修复
perf:  性能, 体验优化
refactor:  重构代码(既没有新增功能，也没有修复 bug)
style: 不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
test:  新增测试用例或是更新现有测试
revert:  回滚某个更早之前的提交
chore: 不属于以上类型的其他类型

prepare-commit-msg

工程化
#小程序开发规范
2024-05-24-【工程化】小程序代码规范
https://zhangyingxuan.github.io/2024-05-24-【工程化】小程序代码规范/
作者
blowsysun
许可协议