Business Front-end System Development Coding Standards Guide and Instructions

<!-- good -->
<!DOCTYPE html>
<html>
</html>

<html lang="zh-CN"></html>

<!-- 不推荐：自闭合组件标签 -->
<CustomComponent />

<!-- 推荐：完整闭合标签 -->
<CustomComponent></CustomComponent>

<!-- HTML自闭合标签 -->
<br />
<img src="path" alt="description" />
<input type="text" />

 <head>
    <!-- 下面是打印控件资源 -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.watermark.js"></script>
    <script type="text/javascript" src="/js/socket.io.js"></script>
    <script type="text/javascript" src="/js/finereport.js"></script>
</head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.watermark.js"></script>
    <script type="text/javascript" src="/js/socket.io.js"></script>
    <!-- 下面是打印控件资源 -->
    <script type="text/javascript" src="/js/finereport.js"></script>
  </body>

//【建议】业务开发中提倡的做法, 箭头函数配合const函数一起使用
const getTableListData = () => { // TODO }

//【反例】尽量不要出现混用，如下：
function getDomeData () {}
const getDome1Data = () => {}

// 【反例】this乱指向，乱用，如下：
const obj = {
    name: 'Alice',
    greet: function() {
        // 普通函数，this指向obj
        setTimeout(() => {
            // 箭头函数内 this 已经指向 obj
            // 这里却画蛇添足地再次保存 this
            const that = this;
            console.log(that.name); // 输出 Alice，但直接 this.name 即可
        }, 100);
    }
};

// 混用会导致可读性变差，而开发首要元素的可读性。

// 推荐写法

/**
 * @description 获取列表数据
 * @return void
 */
const getTableListData = async () => {
  // 自己的业务处理TODO
  try {
    const res = await getTableListDataApi();
    const res1 = await getTableListDataApi1();
    // TODO
  } catch (error) {
    // 异常处理相关
  } finally {
    // 最终处理
  }
};

//【提倡】推荐接口定义带着Api结尾，比如我的方法是getTableListData，
//【提倡】内部逻辑调用的后端接口，那我的接口便可以定位为getTableListDataApi。

/**
 * @description 获取列表数据
 * @return void
 */
const getTableListData = () => {
  getTableListDataApi({....}).then(() => {
      // TODO
  }).catch(() => {
      // TODO
  }).finally(() => {
      // TODO
  })
}

// 注意使用这种方式避免嵌套层级太深，如下反例：
const getTableListData1 = () => {
  getTableListDataApi({....}).then(() => {
     getTableListDataApi1({....}).then(() => {
          getTableListDataApi2({....}).then(() => {
             // TODO 这种就是典型的回调地狱，禁止出现这种
          })
       })
  })
}

// 场景描述：表头和表格数据都需要请求接口获取，可以使用并发请求。
/**
* 查询列表数据
*/
const getTableList = async () => {
  // TODO
  try {
    // 并行获取表格列数据和列表数据
    const [resColumns, resData] = await Promise.all([
      getTableColumnsApi({....}),
      getTableListApi({...}),
    ]);
    // TODO
  } catch (error) {
   // TODO
  } finally {
    // TODO
  }
};

//  Promise.all的一些执行细节不在赘述，但是注意区分和Promise.allSettled用法
//
//  Promise.all()方法会在任何一个输入的 Promise 被拒绝时立即拒绝。
// 相比之下，Promise.allSettled() 方法返回的 Promise 会等待所有
// 输入的 Promise 完成，不管其中是否有 Promise 被拒绝。如果你需
// 要获取输入可迭代对象中每个 Promise 的最终结果，则应使用allSettled()方法。

// 场景描述：某些业务需要请求多个接口，但是只要一个接口先返回便处理逻辑

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("数据请求1");
  }, 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("数据请求2");
  }, 500);
});

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // 输出 "数据请求2"
});

/**
 * 获取表格数据
 */
function  getTableListData () {
    getTableListData({
        pageNum： 1,
        pageSize: 10, // pageSize: 100000
    }).then((res) => {
        tableList.value = res.rows;
        tableTotal.value = res.total;
        //【提倡】
        tableList.value = res?.code === 200 ? res.rows : [];
    })
}

// 上面写法，界面可能没报错，功能也实现了，但是....

<script setup  name='CustomName'> </script>

// 或者

export default defineComponent({
    name: 'CustomName',
    .......
})

<script setup>
import { ref, watchEffect } from "vue"

const a = ref(true)
const b = ref(false)

watchEffect(() => {
  if (a.value || b.value) {
    console.log('执行了更新操作');
  }
})

const test = () => b.value = !b.value;
</script>

<template>
  <button @click="test">改变b的值</button>
  <h2>当前b的值:{{ b }}</h2>
</template>

<script setup>
import { ref, watchEffect } from "vue"

const getInfo = async () => {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(111)
    }, 2000)
  })
}

watchEffect(async () => {
  // 请求信息
  await getInfo()
  if (b.value) console.log('执行了更新操作');
})

const test = () =>  b.value = !b.value;
</script>

<template>
  <button @click="test">改变b的值</button>
  <h2>当前b的值:{{ b }}</h2>
</template>

<script setup>
import { ref, watchEffect } from "vue"

const a = ref(true)
const b = ref(true)

setTimeout(() => {
  watchEffect(() => {
    if (a.value) {
      console.log('执行了更新操作');
    }
  })
}, 2000)

const test = () => b.value = !b.value;
</script>

<template>
  <button @click="test">改变b的值</button>
  <h2>当前b的值:{{ b }}</h2>
</template>

<script setup>
   ....
    const currentScope = effectScope();

    currentScope.run(() => {
      watch(
        () => props.currentRow,
        (newVal, oldVal) => {
          // TODO
        },
        { deep: true }
      );
      watchEffect(() => {
        if (queryObj.visitId) {
          // TODO
        }
      });
    });

    onBeforeUnmount(() => {
      currentScope.stop();
    });
</script>

const editModel = reactive({
  isShow: false,
  form: {
    name: "ANDROID",
    // ......
  },
  showFunc: () => {
    // 显示逻辑
  },
  cancelFunc: () => {
    // 取消逻辑
  },
  submitFunc: () => {
    // 提交逻辑
  },
});

const useEditModel = () => {
  const isShow = ref(false);

  /**
   * 显示弹框
   */
  const showModal = () => {};

  /**
   * 关闭弹框
   */
  const cancelModal = () => {};

  /**
   * 提交操作
   */
  const submitModal = () => {};

  onBeforeMount(() => {
    // TODO
  });

  return {
    isShow,
    showModal,
    cancelModal,
    submitModal,
  };
};

// 其他地方使用
const { isShow, showModal, cancelModal, submitModal } = useEditModel();

expose(
  new Proxy(
    {},
    {
      get(target, key) {
        // CustomDomRef是定义的模板中的ref dom节点
        return CustomDomRef.value?.[key];
      },
      has(target, key) {
        return key in CustomDomRef.value;
      },
    },
  ),
);

const obj = {
  name: "张三",
  age: 20,
  sex: "男",
  name1: "张三1",
};

// 当不需要name1传递时，怎么做呢？

// 方式1
delete obj.name1;

// 方式2
const newObj = {
  name: obj.name,
  age: obj.age,
  sex: obj.sex,
};

// 方式3
const newObj = {
  ...obj,
  name1: undefined,
};

// 其实可以使用一种更优雅的方式
const { name1, ...newObj } = obj;

// 或者使用lodash的omit或者pick方法

<script setup>
  // import语句
  // Props(defineProps)
  // Emits(defineEmits)
  // 响应性变量定义
  // Computed
  // Watchers
  // 函数
  // 生命周期
  // Expose(defineExpose)
</script>

// 场景一
if (type === 1) {
  // TODO
} else if (type === 2) {
  // TODO
} else if (type === 3) {
  // TODO
} else if (type === 4) {
  // TODO
} else if (type === 5) {
  // TODO
} else {
  // TODO
}

// 场景二
if (type === 1) {
  if (type1 === 1) {
    if (type2 === 1) {
      if (type3 === 1) {
        // TODO
      }
    }
  }
}

// 优化方式一：字典映射方式
const typeHandlers = {
  1: handleType1,
  2: handleType2,
  3: handleType3,
  4: handleType4,
  5: handleType5,
  default: handleDefault,
};
const handler = typeHandlers[type] || typeHandlers.default;
handler();

// 优化方式二：高阶函数方式
const handleType1 = () => {
  /* TODO for type 1 */
};
const handleType2 = () => {
  /* TODO for type 2 */
};
// 其他处理函数...
const handlers = [handleType1, handleType2 /*...*/];
const processType = (type) => {
  if (handlers[type - 1]) handlers[type - 1]();
};
processType(type);

// 优化方式一
const isValidType = () => {
  return type === 1 && type1 === 1 && type2 === 1 && type3 === 1;
};
if (isValidType()) {
}

// 优化方式二：使用"早返回原则"或者叫"错误前置原则"进行优化
if (type !== 1) return;
if (type1 !== 1) return;
if (type2 !== 1) return;
if (type3 !== 1) return;
// TODO

<template>
  <AdminPage />
</template>

<script setup>
import { defineAsyncComponent } from "vue";

const AdminPage = defineAsyncComponent(() =>
  import("./components/AdminPageComponent.vue")
);
</script>

<template>
  <keep-alive>
    <component :is="getCurrentComponents()"></component>
  </keep-alive>
</template>

<script setup>
import { defineAsyncComponent } from "vue";

export const PreferenceItemComponents: any = {
  Residence: defineAsyncComponent(() => import("./Residence.vue")),
  PastHistory: defineAsyncComponent(() => import("./PastHistory.vue")),
  AllergyHistory: defineAsyncComponent(() => import("./AllergyHistory.vue")),
  Diagnose: defineAsyncComponent(() => import("./Diagnose.vue")),
};

/**
 * 获取当前需要渲染的组件
 */
const getCurrentComponents = () => {
  const projectType = activeName.value;
  if (projectType && PreferenceItemComponents[projectType]) {
    return PreferenceItemComponents[projectType];
  }
  return null;
};
</script>

// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({
  // ...
  routes: [
    { path: '/users/:id', component: UserDetails }
    // 或在路由定义里直接使用它
    { path: '/users/:id', component: () => import('./views/UserDetails.vue') },
  ],
})

// ?? ( 空值合并运算符)：这个运算符主要是左侧为null和undefined，直接返回右侧值
// 请在开发过程中合理使用||和??
let result = value ?? '默认值';
console.log('result', result);



// ?.(可选链运算符): 用于对可能为 null 或 undefined 的对象进行安全访问。
// 建议这个属性要用起来，防止数据不规范时控制台直接报错
const obj = null;
let prop = obj?.property;
console.log('prop', prop);



// ??= (空值合并赋值操作符): 用于在变量已有非空值，避免重复赋值。
let x = null;
x ??= 5; // 如果 x 为 null 或 undefined，则赋值为 5



// ?= (安全复制运算符)：旨在简化错误处理。改运算符与 Promise、async 函数以及任何实现了 Symbol.result 方法的对象兼容，简化了常见的错误处理流程。
// 注意：任何实现了 Symbol.result 方法的对象都可以与 ?= 运算符一起使用，Symbol.result 方法返回一个数组，第一个元素为错误，第二个元素为结果。
const [error, response] ?= await fetch("https://blog.conardli.top");

<!--
 * @FileDescription: 该文件的描述信息
 * @Author: 作者信息
 * @Date: 文件创建时间
 * @LastEditors: 最后更新作者
 * @LastEditTime: 最后更新时间
 -->

/**
 * @description: 方法描述 （可以不带@description）
 * @param {参数类型} 参数名称
 * @param {参数类型} 参数名称
 * @return 没有返回信息写 void / 有返回信息 {返回类型} 描述信息
 */

/**
 * @description 获取解析统计相关数据
 * @param {Object} userInfo
 * @param {Array} lists
 * @return void
 */

或者;

/**
 * 获取解析统计相关数据
 * @param {Object} userInfo 用户信息
 * @param {Array} lists 用户列表
 * @return void
 */

// 提倡(vscode可以给出提示的写法)
/* 描述信息 */
activeName: "first";

activeName: "first"; // 默认激活的Tab页
或者;

// 默认激活的Tab页
activeName: "first";

// 根据指定的属性对数据进行分类

或者;

// 根据指定的属性对数据进行分类，
// 分类之后按住时间进行降序排序
// ......

或者;
/**
 * 根据指定的属性对数据进行分类，
 * 分类之后按住时间进行降序排序
 * ......
 */

// #region 升序、降序处理逻辑

/**
 * 升序、降序处理逻辑说明：
 *
 * 根据指定的属性对数据进行分类，
 * 分类之后按住时间进行降序排序
 * ......
 */

const asceOrderLists = []; // 升序数组
const descOrderLists = []; // 降序数组

/**
 * @description 升序操作
 * @param {Array} lists
 * @return {Array} arrs
 */
const handleAsceOrder = (lists) => {
    // .........
    return arrs
}



/**
 * @description 降序操作
 * @param {Array} lists
 * @return {Array} arrs
 */
const handleDescOrder = (lists) => {
    // .........
    return arrs
}

......
// #endregion

- 新功能点开发
// FEAT-001: 进行了XXXXX功能开发(LMX-2024-09-24)
- 问题修复
// BUGFIX-001: 进行了XXXXX功能修复(LMX-2024-09-24)

....

格式说明：
[${a1}-${a2}]: 相关描述信息(${a3}-${a4})

- a1：类型描述，建议遵循git提交规范，但是使用全驼峰大写。（feat、fix、bugfix、docs、style、refactor、perf、chore）
- a2: 编号，可以使用bug单号、功能特性单号或者自增序号，建议使用bug单号、功能特性单号。
- a3: git账户或者能标识自己的账号即可。
- a4: 新增或者修改时间，建议精确到天。

custom_module                   # Business module
│   ├── api                     # Private interfaces of the business module
│   ├── components/modules      # Business components (involving business processing)
│   ├── composable              # Business components (not involving specific business)
│   ├── functional              # Business functional components
│   ├── methods/hooks           # Business hooks
│   ├── config                  # Business configuration items
│   ├── styles                  # Business styles
│   └── utils                   # Private utilities for the business module
|── index.vue                   # Business entry file
|── .pubrc.js                   # Business late-stage module federation entry
└── README.md                   # Business documentation

// stores/user.ts
import { defineStore } from "pinia";
import type { UserInfo } from "@/types";

/**
 * @description 用户信息store
 */
export const useUserStore = defineStore("user", () => {
  // 【强制】使用 ref 定义响应式状态
  const userInfo = (ref < UserInfo) | (null > null);
  const isLoading = ref(false);

  // 【推荐】使用 computed 定义派生状态
  const isAdmin = computed(() => userInfo.value?.role === "admin");

  // 【强制】使用函数定义 action，并使用 async/await 处理异步操作
  /**
   * @description 获取用户信息
   */
  const fetchUserInfo = async () => {
    isLoading.value = true;
    try {
      const res = await getUserInfoApi();
      userInfo.value = res;
    } catch (error) {
      console.error("获取用户信息失败", error);
    } finally {
      isLoading.value = false;
    }
  };

  // 【推荐】重置状态方法
  const resetUserInfo = () => {
    userInfo.value = null;
  };

  return {
    userInfo,
    isLoading,
    isAdmin,
    fetchUserInfo,
    resetUserInfo,
  };
});

// ✓ 提倡做法：使用常量存储正则，并添加注释说明用途
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 邮箱地址
const PHONE_REGEX = /^1[3-9]\d{9}$/; // 中国手机号码
const ID_CARD_REGEX =
  /^[1-9]\d{5}(18|19|20|21)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/; // 身份证号

// 【推荐】复杂的正则表达式应该使用 new RegExp 并添加详细注释
const complexRegex = new RegExp(
  // 匹配 URL
  "^(https?:\\/\\/)?" + // protocol
    "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain
    "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR IP
    "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
    "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
    "(\\#[-a-z\\d_]*)?$",
  "i", // flags
);

// 【反例】避免动态生成正则表达式
const userInput = getUserInput();
const dynamicRegex = new RegExp(userInput); // 不安全，易被利用

// api/index.ts
import axios, { type AxiosInstance, type AxiosRequestConfig } from "axios";

/**
 * @description API 响应通用格式
 */
interface ApiResponse<T = any> {
  code: number;
  message: string;
  data: T;
  timestamp?: number;
}

/**
 * @description 创建 axios 实例
 */
const instance: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
});

// 【推荐】请求拦截器：统一处理请求前置逻辑
instance.interceptors.request.use(
  (config) => {
    // 添加认证 token
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error),
);

// 【推荐】响应拦截器：统一处理响应和错误
instance.interceptors.response.use(
  (response) => {
    const { code, message, data } = response.data as ApiResponse;
    if (code !== 200) {
      throw new Error(message);
    }
    return data;
  },
  (error) => {
    // 统一错误处理
    if (error.response?.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  },
);

export default instance;

// api/user.ts
/**
 * @description 获取用户完整信息
 * @param {string} userId 用户ID
 * @returns {Promise<UserInfo>}
 */
export const getUserInfoApi = (userId: string) => {
  return request.get(`/user/${userId}`);
};

/**
 * @description 创建新用户
 * @param {CreateUserPayload} payload 创建用户请求体
 * @returns {Promise<UserInfo>}
 */
export const createUserApi = (payload: CreateUserPayload) => {
  return request.post("/user", payload);
};

/**
 * @description 批量获取用户列表
 * @param {QueryParams} params 查询参数
 * @returns {Promise<PaginatedResponse<UserInfo[]>>}
 */
export const getUserListApi = (params: QueryParams) => {
  return request.get("/users", { params });
};

// src/utils/__tests__/formatter.test.ts
import { describe, it, expect, beforeEach } from "vitest";
import { formatDate, formatPrice } from "../formatter";

describe("Formatter Utils", () => {
  /**
   * 【强制】每个测试用例应该有清晰的描述
   */
  describe("formatDate", () => {
    it("should format date correctly", () => {
      const result = formatDate(new Date("2024-01-01"));
      expect(result).toBe("2024-01-01");
    });

    it("should handle invalid date", () => {
      expect(() => formatDate(null as any)).toThrow();
    });
  });

  describe("formatPrice", () => {
    /**
     * 【推荐】使用专业的测试用例描述，不要使用"test 1"、"test 2"
     */
    it("should format price with 2 decimal places", () => {
      expect(formatPrice(99.9)).toBe("99.90");
    });

    it("should add thousand separator", () => {
      expect(formatPrice(10000)).toBe("10,000.00");
    });

    it("should handle negative price", () => {
      expect(formatPrice(-50.5)).toBe("-50.50");
    });
  });
});

/**
 * @description 【强制】类型定义测试
 */
describe("Type Safety", () => {
  it("should have correct return type", () => {
    const result: string = formatDate(new Date());
    expect(typeof result).toBe("string");
  });
});

// locales/en.ts
export default {
  'common.save': 'Save',
  'common.delete': 'Delete',
  'common.cancel': 'Cancel',
  'user.login': 'User Login',
  'user.logout': 'User Logout',
  'user.profile': 'User Profile',
  'error.networkFailed': 'Network request failed',
  'error.unauthorized': 'Unauthorized access',
};

// locales/zh-CN.ts
export default {
  'common.save': '保存',
  'common.delete': '删除',
  'common.cancel': '取消',
  'user.login': '用户登录',
  'user.logout': '用户登出',
  'user.profile': '用户资料',
  'error.networkFailed': '网络请求失败',
  'error.unauthorized': '未授权访问',
};

// 在组件中使用
<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();
</script>

<template>
  <button>{{ t('common.save') }}</button>
  <div>{{ t('error.networkFailed') }}</div>
</template>

<!-- ✓ 提倡做法 -->
<form>
  <label for="username">Username</label>
  <input id="username" type="text" required />
</form>

<!-- ✓ 提倡做法：使用 aria-label 和 aria-describedby -->
<button aria-label="Close dialog" @click="handleClose">×</button>
<input aria-describedby="password-hint" type="password" />
<p id="password-hint">Password must be at least 8 characters</p>

<!-- ✓ 提倡做法：使用 role 属性明确 DOM 角色 -->
<div role="status" aria-live="polite">{{ message }}</div>

<!-- ✗ 反例：跳过标题级别 -->
<h1>Main Title</h1>
<h3>Subtitle</h3>
<!-- 应该是 h2 -->

<!-- ✗ 反例：没有标签的表单输入 -->
<input type="text" placeholder="Username" />

{
   // 最大的行长度
  "printWidth": 150,
   // 每个缩进级别的空格数
  "tabWidth": 2,
   // 使用制表符还是空格缩进行
  "useTabs": false,
   // 是否使用分号
  "semi": true,
   // 是否使用单引号
  "singleQuote": true,
   // 遵循对象属性中引号的输入使用
  "quoteProps": "as-needed",
   // 在jsx中是否使用单引号替代双引号
  "jsxSingleQuote": false,
   // > 是否单独一行，false默认单独一行
  "bracketSameLine": false,
   // "all" "es5" "none" --》更换为all
  "trailingComma": "all",
   // 在对象，数组括号与属性之间加空格 "{ foo: bar }"
  "bracketSpacing": true,
   // 是否进行嵌入代码的格式化
  "embeddedLanguageFormatting": "auto",
   // 箭头函数只有一个参数时是否要"()"
  "arrowParens": "always",
   // 是否需要Pragma
  "requirePragma": false,
  // 是否需要插入Pragma
  "insertPragma": false,
  // 什么都不做保持散文原格式
  "proseWrap": "preserve",
   // 标签周围的空格处理方式
  "htmlWhitespaceSensitivity": "css",
   // Vue 文件中的 <script> 和 <style> 标签内缩进代码。
  "vueIndentScriptAndStyle": false,
   // 结尾是 \n \r \n\r auto lf...
  "endOfLine": "auto"
}

/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.png
**/*.jpg
**/*.jpeg
**/*.sh
/public/*

module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parser: "vue-eslint-parser",
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "./.eslintrc-auto-import.json",
    "prettier",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: "2020",
    sourceType: "module",
    project: "./tsconfig.*?.json",
    parser: "@typescript-eslint/parser",
  },
  plugins: [
    "vue",
    "@typescript-eslint",
    "import",
    "promise",
    "node",
    "prettier",
  ],
  rules: {
    // 关闭空方法校验
    "@typescript-eslint/no-empty-function": "off",
    // 关闭类型限制不允许使用any
    "@typescript-eslint/no-explicit-any": "off",
    // 关闭没有使用变量校验
    "@typescript-eslint/no-unused-vars": "off",
    // 关闭不允许复制this给变量校验
    "@typescript-eslint/no-this-alias": "off",
    // 关闭不允许使用ts的关闭注释等
    "@typescript-eslint/ban-ts-comment": "off",
    // 关闭要求组件名称始终为多个单词
    "vue/multi-word-component-names": "off",
    // 关闭强制执行有效的defineProps编译器宏
    "vue/valid-define-props": "off",
    // 关闭禁止在自定义组件中使用带有参数的v-model
    "vue/no-v-model-argument": "off",
    // 关闭禁止使用 v-html
    "vue/no-v-html": "off",
    // 关闭标记arguments变量提示通知
    "prefer-rest-params": "off",
    // 把Prettier的规则设为错误级别
    "prettier/prettier": "error",
    // 开启圈复杂度检查, 最大圈复杂度为10
    complexity: ["warn", { max: 10 }],
  },
  globals: {
    DialogOption: "readonly",
    OptionType: "readonly",
    defineEmits: "readonly",
    defineProps: "readonly",
  },
};

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.cjs
prettier.config.js
src/assets
tailwind.config.js

export default {
  extends: ["stylelint-config-standard"],
  ignoreFiles: [
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.tsx",
    "src/**/*.ts",
    "src/**/*.json",
    "src/**/*.md",
    "src/**/*.{jpg,png,gif,jpge,svg,webp}",
  ],
  overrides: [
    {
      customSyntax: "postcss-html",
      files: ["*.(html|vue)", "**/*.(html|vue)"],
      rules: {
        "selector-pseudo-class-no-unknown": [
          true,
          {
            ignorePseudoClasses: ["deep"],
          },
        ],
        "selector-pseudo-element-no-unknown": [
          true,
          {
            ignorePseudoElements: ["v-deep", "v-slotted", ":deep", ":slotted"],
          },
        ],
      },
    },
    {
      customSyntax: "postcss-scss",
      extends: [
        "stylelint-config-recommended-scss",
        "stylelint-config-recommended-vue/scss",
      ],
      files: ["*.scss", "**/*.scss"],
    },
  ],
  plugins: ["stylelint-prettier"],
  rules: {
    "prettier/prettier": true,
    // 自定义未知规则
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "extends",
          "ignores",
          "include",
          "mixin",
          "if",
          "else",
          "media",
          "for",
          "at-root",
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
          "function",
          "each",
          "use",
          "forward",
          "return",
        ],
      },
    ],
    // 不校验兜底字体
    "font-family-no-missing-generic-family-keyword": null,
    // 不校验自定义函数
    "function-no-unknown": null,
    // 不校验import引入方式
    "import-notation": null,
    // 不校验媒体查询范围
    "media-feature-range-notation": null,
    // 不校验网格布局
    "named-grid-areas-no-invalid": null,
    // 不校验同类选择器的优先级
    "no-descending-specificity": null,
    // 不校验空文件
    "no-empty-source": null,
    // 校验类规则之间的空行
    "rule-empty-line-before": [
      "always",
      {
        ignore: ["after-comment", "first-nested"],
      },
    ],
    // 校验类命名
    "selector-class-pattern":
      "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:[.+])?$",
    // 不校验 not 语法
    "selector-not-notation": null,
    // 不校验自定义属性
    "custom-property-pattern": null,
    // 不校验伪类未知属性
    "selector-pseudo-class-no-unknown": null,
    // 不校验自定义export属性
    "property-no-unknown": null,
    // 不校验浏览器前缀
    "property-no-vendor-prefix": null,
    // 不校验动画命名规则
    "keyframes-name-pattern": null,
  },
};

export default {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-case": [0],
    "type-enum": [
      2,
      "always",
      [
        "feat",
        "fix",
        "docs",
        "style",
        "refactor",
        "perf",
        "test",
        "build",
        "ci",
        "revert",
        "other",
      ],
    ],
    "scope-case": [0],
    "scope-empty": [2, "never"],
    "subject-case": [0, "never"],
    "subject-full-stop": [0, "never"],
    "header-max-length": [0, "always", 120],
  },
};

{
  // 版本
  "version": "0.2",
  // 检查的语言
  "language": "en,en-US",
  // 允许使用复合词
  "allowCompoundWords": true,
  // 被认为是正确的单词列表
  "words": [
    "axios",
    "paratera",
    "blsc",
    "bscc",
    "iconfont",
    "pinia",
    "wechat",
    "nprogress",
    "istio",
    "pkce",
    "echarts",
    "weixin",
    "vite",
    "cros",
    "jsencrypt",
    "dompurify",
    "mockjs",
    "remixicon",
    "vuex",
    "exceljs",
    "matomo",
    "Piwik",
    "brotli",
    "npmmirror",
    "monoplasty",
    "rushstack",
    "argb",
    "cascader",
    "backtop",
    "popconfirm",
    "msgbox",
    "acmr",
    "antd",
    "antdv",
    "astro",
    "brotli",
    "clsx",
    "defu",
    "demi",
    "echarts",
    "ependencies",
    "esno",
    "etag",
    "execa",
    "iconify",
    "iconoir",
    "intlify",
    "ipaddr",
    "lockb",
    "logininfor",
    "lucide",
    "mkdist",
    "vitejs",
    "noopener",
    "noreferrer",
    "nprogress",
    "nuxt",
    "oper",
    "operlog",
    "prefixs",
    "publint",
    "Qqchat",
    "qrcode",
    "shadcn",
    "sonner",
    "sortablejs",
    "styl",
    "taze",
    "ui-kit",
    "uicons",
    "unref",
    "vitepress",
    "vnode",
    "vueuse",
    "yxxx",
    "unocss",
    "attributify",
    "svgicon",
    "amfe"
  ],
  // 要忽略检测的单词列表
  "ignoreWords": [
    "userinfo",
    "userid",
    "readed",
    "unplugin",
    "mcode",
    "persistedstate",
    "selfservice",
    "accountapply",
    "sess",
    "jobname",
    "jobid",
    "preinstall",
    "cusers",
    "pcas",
    "invoicable",
    "supercomputing",
    "cmscp",
    "headerbtn",
    "qrcode-mpdefault",
    "realname",
    "resultv2",
    "VVIP",
    "hasPermi",
    "checkPermi",
    "clientid",
    "Relogin",
    "ctyk",
    "yjk",
    "unmatch",
    "strs",
    "gitee",
    "auths",
    "jpge",
    "webp",
    "pxtorem"
  ],
  // 总是被认为是不正确单词的列表
  "flagWords": [],
  // 忽略iconfont相关目录的拼写检测
  "ignorePaths": ["**/node_modules/**", "**/dist/**", "**/icons/**", "npm-lock.yaml", "**/*.log", "src/assets/**"]
}