前端代码规范

1 husky

husky用于绑定git hooks，在指定时机执行想要的命令

{
	"husky": {
		"hooks": {
			"pre-commit": "lint-staged"	
		}
	}
}

需要手动修改.husky文件内容：

. "$(dirname -- "$0")/_/husky.sh"

npm run lint-staged

2 lint-Staged

用于提交代码时检查代码规范

{
	"lint-staged": {
		"*.{js,jsx,ts,tsx,css,less}": [
			"prettier --write",	//使用prettier规则校验代码
			"git add", //将处理后的代码重新add到git中
		]
	}
}

3 ESlint

module.exports = {
	extends: //可以继承的规则
	plugins://插件
	rules: //覆盖extends中定义的规则
}

{	
	//指定eslint检查文件扩展名,检查指定的目录
	"lint-stage:js": "eslint --ext .js,.jsx,.ts,.tsx src/ --fix"
}

4 prettier配置

module.exports = {
	singleQuote: true,	//使用单引号
	trailingComma: 'es5',	//行尾逗号，包括es5中的数组、对象
	printWidth: 100, //一行最多容纳字节数
	semi: true,	//句尾添加分号
	arrowParens: "avoid", //箭头函数只有一个参数省略括号
	tabWidth: 2, //缩进字节
	bracketSpacing: true, //对象，数组括号和文字之间加空格
}