vite eslint%26prettier代码规范

package.json

"scripts": {
  "dev": "vite",
  "build": "npm run lint && vite build",
  "serve": "vite preview",
  "prettier": "prettier --write .",
  "lint": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",
    "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
    "lint:fix": "yarn lint:format && yarn lint:fix ",
},

• npm run prettier 会自动格式化
  • 执行npm run format，就可以按照.prettierrc.js中的规则对代码进行格式化
• lint-staged：对暂存的git文件运行linter
  • commit代码之前运行 Linting，可以确保没有错误格式的代码提交到仓库
  • lint 只校验将要提交的文件
• prettier：按照规则解析代码来强制执行一致的样式，用来优化代码格式，比如缩进、空格、分号等
• gitHooks： 在.git/hooks文件下，保存了一些 shell 脚本
  • Git Hooks就是那些在Git执行特定事件(如commit、push、receive等)后触发运行的脚本
• eslint —系列参数概念
  • https://blog.csdn.net/ivenqin/article/details/104616300

eslint

eslint是用来做代码规范，代码的书写习惯
为保证你开发的效率，不需要每次编译都做 eslint的校验，只需要在提交代码时进行校验

yarn add eslint-config-standard -D
yarn add eslint-plugin-import -D
yarn add eslint-plugin-promise -D
yarn add eslint-plugin-node -D
yarn add eslint-plugin-standard -D

eslint-config-standard https://github.com/standard/eslint-config-standard

prettier

prettier做代码格式化

yarn add eslint-plugin-prettier -D
yarn add eslint-config-prettier -D
yarn add prettier -D

git hooks

Git Hook 保存在 .git 文件夹中
Husky 配置 Git 钩子变得更简单的工具

yarn add husky -D
yarn add lint-staged @commitlint/cli @commitlint/config-conventional -D
# 根目录生成 .husky 文件
npx husky install

• husky：一个方便用来处理 pre-commit 、 pre-push 等 githooks 的工具
• lint-staged：对 git 暂存区的代码，运行 linters 的工具

Husky 共支持以下几种格式的配置文件

• .huskyrc
• .huskyrc.json
• .huskyrc.yaml
• .huskyrc.yml
• .huskyrc.js
• husky.config.js

Husky 不支持服务端 Git 的钩子：

• pre-receive
• update
• post-receive

跳过所有的钩子
HUSKY_SKIP_HOOKS=1 git rebase

跟目录生成 husky

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

提交代码前，先执行 npm run lint

git 日志提交规范限制

终端输入 git commmit -m ‘xxx’ 提交代码时，用来检查 代码规范是否满足预设的格式

• lint 会自动检查本次提交所修改的文件是否符合本项目的代码规范，不符合规范的会提交失败

• 通过 git commit提交记录一目了然，本次提交了做了哪些操作,便于后续维护和统一规范

  "lint-staged": {
    "src/**/*.{js,jsx,vue}": [
      "prettier --write",
      "eslint --cache --fix",
      "git add"
    ],
    "src/**/*.css": [
      "stylelint --fix",
      "git add"
    ]
  }

• cache 只检查已更改的文件

• fix 可以自动修复错误
• git add 是把lint后的代码重新提交到缓存区
• 使用命令 git commit -m”fix: 修复xxxx”
• husky参考 https://blog.csdn.net/jiandan1127/article/details/108388328

.editorconfig

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格

# http://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false