微信小程序代码规范

如果你是个人开发者，你可以有自己独特的编码风格。

但如果处在一个团队中，通常是需要协同办公的，那么就需要一个统一的编码风格

从而减少因为风格不统一带来例如代码提交格式冲突，或者看起来不是那么顺眼而影响开发时的心情。。。

每个人都有自己的编码风格，有人会在结尾加分号，有人就不喜欢。很难强制一个人编码时，按照团队规约改变自己的风格。

可以通过lint-staged在git commit时自动将代码格式转换为团队规约里面的风格。

一、代码格式化工具（Prettier）

1、下载安装 prettier：

npm install prettier -D

2、安装 Vscode 插件（Prettier）：

3、配置 Prettier：

可以是.prettierrc.yaml/.prettierrc.js/.prettierrc.json

下面以.prettierrc.yaml为例

# 结尾不用分号
semi: false
# 使用单引号
singleQuote: true
# 箭头函数只有一个参数时，省略小括号
arrowParens: 'avoid'
# 超过最大值100个字符换行
printWidth: 100
# 使用Tab缩进
useTabs: true
# 缩进字节数2
tabWidth: 2
# 尾逗号
trailingCommas: 'all'
# 在html中空格被认为是敏感的
# <text decode="true"></text>标签请使用decode="true"
htmlWhitespaceSensitivity: 'strict'
# 使用其他分析器来分析微信小程序
overrides:
  [
    { files: '*.wxml', options: { parser: 'html' } },
    { files: '*.wxss', options: { parser: 'css' } },
    { files: '*.wxs', options: { parser: 'babel' } },
  ]

4、配置.vscode/settings：

通过配置.vscode/settings实现保存时自动校验并更改代码为约定的格式

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"prettier.documentSelectors": ["**/*.wxml", "**/*.wxss"]
}

5、配置.prettierignore

# prettier检查忽略的文件
# 如果项目中使用<text></text>用大量空格表示格式，则这里不能格式化wxml，或者prettier配置中htmlWhitespaceSensitivity: ignore
**/*.wxml
miniprogram_npm

6、配置package.json scripts脚本

{
    "scripts": {
        "formate": "prettier --write .",
    }
}

二、代码规范工具（ESLint）

1、安装 ESLint 相关插件

npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

2、安装 Vscode 插件（ESLint）：

3、配置 ESLint：

// @see: http://eslint.cn

module.exports = {
    root: true,
	env: {
		browser: true,
		es2021: true,
	},
	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
	overrides: [],
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
	},
	plugins: ['@typescript-eslint'],
	rules: {
		'no-undef': 'off',
		'no-var': 'error',
		'no-multiple-empty-lines': ['error', { max: 1 }],
		'default-case': 'error',
		'max-depth': [2, 5],
	},
}

4、配置.vscode/settings：

通过配置.vscode/settings实现保存时自动校验并更改代码为约定的格式

{
	"editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
	},
	"eslint.alwaysShowStatus": true,
	"eslint.validate": ["javascript", "typescript"],
	"eslint.format.enable": true,
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"prettier.documentSelectors": ["**/*.wxml", "**/*.wxss"]
}

5、配置.eslintignore

miniprogram_npm

6、配置package.json scripts脚本

{
    "scripts": {
        "formate": "prettier --write .",
	"lint:fix": "eslint --fix ."
    }
}

三、Git 提交校验格式和规范并自动修复

1、下载安装husky

操作 git 钩子的工具（在 git xx 之前执行某些命令）

npm install husky -D

为了添加.husky 文件夹

npm set-script prepare "husky install"
npm run prepare

2、下载安装lint-staged

本地暂存代码检查工具

npm install lint-staged -D

添加 ESlint Hook（在.husky 文件夹下添加 pre-commit 文件）：

作用：通过钩子函数，校验代码是否符合eslint和prettier规范，并使用 eslint和prettier修复

npx husky add .husky/pre-commit "npm run lint:lint-staged"

新增 .lintstagedrc.json 文件：

{
    "*.{js,ts,wxss,less,scss}": ["prettier --write"],
    "*.{js, ts}": ["eslint --fix"]
}

3、配置package.json scripts脚本

{
    "scripts": {
        "formate": "prettier --write .",
	"lint:fix": "eslint --fix .",
        "lint:lint-staged": "lint-staged",
    }
}

到此项目成员再也不用担心因为编码风格不同，导致提交代码批量的格式冲突。团队也逐步从八路军转变为正规军了