一、代码规范
1.1 集成.editorconfig
新建.editorconfig文件
# https://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true # 始终在文件末尾插入一个新行
trim_trailing_whitespace = true # 去除行首的任意空白字符
[*.md] # 表示仅 md 文件适用以下规则
insert_final_newline = false
trim_trailing_whitespace = false
max_line_length = off
vsCode编辑器里要安装插件:EditorConfig for VS Code
1.2 使用prettier工具
- 需要安装prettier:npm install prettier -D
新建.prettierrc文件
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
可新建.prettierignore文件设置忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
vsCode编辑器里要安装插件:Prettier - Code formatter
我们还可以在package.json文件里写一个可执行脚本
"scripts": {
"prettier": "prettier --write ."
},
这样可以在命令行直接npm run prettier将所有文件格式化
1.3 使用ESLint检测
- 需要安装eslint(普遍新建项目时选择了eslint的话,会自动安装好的):npm install -D eslint
vsCode编辑器需要安装ESLint插件:ESLint
为了防止prettier和eslint起冲突,还需要安装这两个插件(在用vue-cli创建项目时,如果选择了prettier的话,这两个插件会自动安装好的了):
npm install -D eslint-config-prettier eslint-plugin-prettier
添加prettier插件:(在.eslintrc.js文件里修改,数组里后面的会覆盖前面的相关的配置项)
extends: [
'plugin:prettier/recommended' // 末尾添加添加这一行
],
1.4 git Husky和eslint
虽然使用了eslint,但不能保证每个人在git commit之前把eslint的问题解决了:
- 就是我们希望代码仓库里的代码都是符合eslint规范的
- 那我们就在git commit时对其进行校验,不符合规范的就自动修复
那就通过Husky工具实现:
- Husky是一个git hook工具,可以帮我们触发pre-commit阶段
这里我们使用自动配置命令:
npm install husky
npx husky-init
这个命令主要做了三件事:
- 安装husky依赖
- 在项目目录创建了
.husky文件夹 - 在package.json新增了一个脚本:"prepare": "husky install"
那我们就在它创建的.husky文件夹里的pre-commit文件作修改(vue-cli创建的项目有自己的一个lint脚本,思想上都是规范文件而已)
npm test ===>>> npm run lint
然后我们每次git commit代码时就会自动规范代码了