笔记-15-工具记录（husky/eslint/prettier）

public里的资源在打包时直接复制到dist文件夹里
ES Module里拼接路径fileURLToPath(new URL('./src', import.meta.url))
tsconfig.json 文件中
include 告诉ts有哪些文件需要编译
paths为了便于vs code进行代码提示

以前常用：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

现在常用：prettier（代码格式化工具）
1.安装

npm install prettier -D

2.配置.prettierrc文件：

• useTabs：使用tab缩进还是空格缩进，选择false；
• tabWidth：tab是空格的情况下，是几个空格，选择2个；
• printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
• singleQuote：使用单引号还是双引号，选择true，使用单引号；
• trailingComma：在多行输入的尾逗号是否添加，设置为 none，比如对象类型的最后一个属性后面是否加一个，；
• semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3.创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

4.VSCode需要安装prettier的插件

5.VSCod中的配置

• settings =>format on save => 勾选上
• settings => editor default format => 选择 prettier

6.测试prettier是否生效

• 测试一：在代码中保存代码；
• 测试二：配置一次性修改的命令；

在package.json中配置一个scripts：

    "prettier": "prettier --write ."

ESLint 检测不符合规范的代码

VSCode需要安装ESLint插件
解决eslint和prettier冲突的问题：
安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）

npm install eslint-plugin-prettier eslint-config-prettier -D

.eslintrc.cjs 添加prettier插件：

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],

VSCode中eslint的配置

  "eslint.lintTask.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

自动区分开发环境、生产环境
Vite的环境变量：import.meta.env

• import.meta.env.MODE [string] 应用的运行模式
• import.meta.env.PROD [boolean] 应用是否运行在生产环境
• import.meta.env.DEV [boolean] 应用是否运行在开发环境
• import.meta.env.SSR [boolean] 应用是否运行在server上

预览模式可以测试生产环境 preview

根目录下创建文件.env，变量必须以VITE_开头
.env 所有情况下都会加载
.env.local 所有情况下都会加载，但会被git忽略
.env.[mode] 只在指定模式下加载 （development/production）
.env.[mode].local 只在指定模式下加载，会被git忽略
使用时就可以拿到变量:import.meta.env.xxx

权限控制 RBAC设计方案【基于角色的访问控制】
根据登录用户的不同，呈现不同的内容
登录接口拿到token、id、name
拿id和token去获取用户信息的接口，拿到角色
拿着角色id去获取菜单树
服务器返回复杂的数据结构，ts类型声明时，要么json转ts，要么any
用户在页面刷新时要再将localStorage中的菜单、token等信息取出赋值给store
根据url确定当前激活的菜单项，确定面包屑
按钮权限
例如system:user:create 和动态路由差不多 都要将数组存起来

husky
是一个git hook工具，可以在git的各个阶段触发
比如我们希望在git commit时 格式化代码 使用npm run lint 命令让eslint格式化代码
对提交的messgae进行约束可安装Commitizen工具

npx husky-init && npm install

这里会做三件事：

1.安装 husky 相关的依赖：

2.在项目目录下创建 .husky 文件夹：

3.在 package.json 中添加一个脚本：

接下来，我们需要去完成一个操作：在进行 commit 时，执行 lint 脚本：

这个时候我们执行 git commit 的时候会自动对代码进行 lint 校验。

git commit 规范（后续）

代码提交风格

通常我们的 git commit 会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen

• Commitizen 是一个帮助我们编写规范 commit message 的工具；

  1.安装 Commitizen

npm install commitizen -D

2.安装 cz-conventional-changelog，并且初始化 cz-conventional-changelog：

npx commitizen init cz-conventional-changelog --save-dev --save-exact

这个命令会帮助我们安装 cz-conventional-changelog：

并且在 package.json 中进行配置：

这个时候我们提交代码需要使用 npx cz：

• 第一步是选择 type，本次更新的类型

• 第二步选择本次修改的范围（作用域）

• 第三步选择提交的信息

• 第四步提交详细的描述信息

• 第五步是否是一次重大的更改

• 第六步是否影响某个 open issue

我们也可以在 scripts 中构建一个命令来执行

代码提交验证

如果我们按照 cz 来规范了提交风格，但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢？

• 我们可以通过 commitlint 来限制提交；

  1.安装 @commitlint/config-conventional 和 @commitlint/cli

npm i @commitlint/config-conventional @commitlint/cli -D

2.在根目录创建 commitlint.config.js 文件，配置 commitlint

module.exports = {
  extends: ["@commitlint/config-conventional"],
};

3.使用 husky 生成 commit-msg 文件，验证提交信息：

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"