项目代码标准化

eslint偏向于把控项目js、ts、vue等代码的质量；prettier偏向于js、ts、vue的代码风格；stylelint偏向于把控css代码风格的统一。

ctr+s时，对文件格式化检查并自动修复（由三部分共同起作用）

• eslint、prettier、stylelint相关规则的配置
• eslint、prettier、stylelint的vscode插件安装
• vscode中的settings.json或者项目中的settings.json读取.eslintrc、.prettierrc、.stylelintrc文件

"editor.codeActionsOnSave": {
	"source.fixAll": true,
	"source.fixAll.eslint": true,
	"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "less", "scss", "vue"],
"[vue]": {
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
}
1
2
3
4
5
6
7
8
9
10

使用命令批量校验修改文件

在package.json中添加脚本
“lint”: "eslint \"src/**/*.{js,vue,ts}\" --fix"，
"prettier-format": "prettier --config .prettierrc.cjs \"src/**/*.{vue,js,ts}\" --write",
"lint:css": "stylelint **/*.{html,vue,css,sass,scss,less} --fix"
1
2
3
4

---

---

安装配置eslint

-相关依赖

eslint 
eslint-config-airbnb-base 
eslint-plugin-vue
eslint-plugin-import
1
2
3
4

• 初始化配置文件

eslint --init	->生成.eslintrc.js
module.exports = {
	"env": {
		"browser": true,
		"es2021": true,
		"node": true
	},
	// eslint-config-xx,xx前的可以省略掉
	"extends":[
		"eslint:recommended",
		"plugin:vue/vue3-essential",
		"plugin:@typescript-eslint/recommended"
	]，
	//解析器，将代码转化成抽象语法树，然后由eslint等对树进行检查
	parser:"@typescript-eslint/parser",
	parserOptions:{
		...
	}，
	// 全局定义的宏,定义一些全局变量，使用时就会不报错
	global: {
		defineProps: "readonly"
	},
	// eslint-plugin可以省略
	plugins: ["vue", "@typescript-eslint"],
	settings{
		"import/resolver": {
			// 设置项目内别名
			alias:{
				map:[["@","./src"]]
			}
		},
		// 允许的扩展名
		"import/extensions":[".js",".jsx",".ts"]
	},
	rules:{
		// 自定义规则，覆盖extends中的第三方库的规则
	}
}
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

• .eslintrcignore

.vscode
dist
/public
.husky
/bin
.eslintrc.js
/src/mock/*
1
2
3
4
5
6
7

安装配置prettier

• 相关依赖

prettier
eslint-config-prettier 
eslint-plugin-prettier
1
2
3

• 配置文件

在根目录新建prettierrc.cjs文件
module.exports= {
	// 一行最多多少个字符
	printWidth:80,
	// 使用2个空格缩进
	tabWidth:2,
	// 结尾是否需要分号
	semi: true,
	//	使用单引号
	singleQuote: true
}
1
2
3
4
5
6
7
8
9
10
11

• .prettierignore

/dist/*
.local
.output.js
/node_modules/**
src/.DS_Store
**/*.svg
**/*.sh
/public
components.d.ts
1
2
3
4
5
6
7
8
9

安装配置stylelint

• 相关依赖

stylelint
stylelint-config-standard
1
2

• 配置文件

// 根目录新建.stylelintrc.cjs
module.exports = {
	extends: [
		"stylelint-config-standard"
	]
}
1
2
3
4
5
6

• .stylelintignore

/dist/*
/public/*
1
2

---

---

git commit时，对暂存区文件校验

husky是一个为git增加hook的工具
lint-staged将暂存区的文件传递给任务

1、安装husky、lint-staged
npm i husky lint-staged -D
2、加命令"prepare":"husky install"  ->运行命令多一个husky的隐藏文件夹
3、npx husky add .husky/pre-commit		->多一个pre-commit的bash文件，在文件最后加npx lint-staged
4、package.json中加lint-staged项
"lint-staged": {
	"*.{js,jsx,vue,ts,tsx}": ["npm run lint", "npm run prettier-format"],
	"*.{vue,less,css,sass}":["npm run lint:css"]
}
1
2
3
4
5
6
7
8
9

git commit时，对commit msg进行校验

1、npm i @commitlint/cli @commitlint/config-conventional -D
2、npx husky add .husky/commit-msg  ->多一个commit-msg的bash文件，在文件的最后加npx --no -- commitlint --edit ${1}
3、新增commitlint.config.cjs文件
module.exports = {
	extends: ['@commitlint/config-conventional'],
	rules: {
		'type-enum':[
			2,
			'always',
			['fix','feat','docs',test','perf']
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13