注意事项

:v-deep 以及:deep()在 vitepress 中不支持解决方案

目前暂时还没有想到比较好的解决方案,目前需要在全局手动修改样式

docs\.vitepress\theme\style.css

暗黑模式切换的解决方案

本项目文档有引入 element-plus 如果切换暗黑模式的时候可能会不兼容

例如：

<el-descriptions
  :class="{ light: !isDark, dark: isDark }"
  direction="vertical"
  :column="4"
  size="large"
  border
>
  <el-descriptions-item label="微信">
    <el-image
      style="width:150px"
      :src="'/moneyReceivingQRCode/moneyReceivingQRCode_vx.jpg'"
    />
  </el-descriptions-item>
  <el-descriptions-item label="支付宝">
    <el-image
      style="width:150px"
      :src="'/moneyReceivingQRCode/moneyReceivingQRCode_vx.jpg'"
    />
  </el-descriptions-item>
</el-descriptions>
<script setup>
  import { watch, ref, onMounted } from 'vue';

  const isDark = ref(false);
  // console.log(window.localStorage?.['vitepress-theme-appearance'])
  // 监听本地存储的主题设置
  onMounted(() => {
    window.addEventListener('storage', () => {
      const val = localStorage.getItem('vitepress-theme-appearance');
      if (val === 'auto' || val === 'dark') {
        isDark.value = false;
      } else if (val === 'light') {
        isDark.value = true;
      }
    });
  });
</script>

当然,这样子写肯定还不行,还需要在全局样式中添加对应的样式,由于 vitepress 的样式与 vue 的样式写法不兼容 需要提升到全局样式中以下是这段代码暗黑模式的全局样式

/* 表格dark样式 */
.dark table {
  background-color: #1b1b1f !important;
}
.dark table th {
  background: #1b1b1f !important;
  color: #fffff5db !important;
}

eslint 规则

可前往项目 fx-pub/config/eslint-config/src/* 与 eslint.config.mjs 进行配置

配置 eslint 可参考 eslint 官网查看

prettier 规则

可前往项目 fx-pub/config/prettier-config/index.mjs 与 .prettierrc.mjs 进行配置
.prettierignore 配置忽略 prettier 规则检查

1. 配置 prettier 规则可参考 prettier 官网查看
2. 配置 tailwindcss 可参考 prettier-plugin-tailwindcss github查看

cspell 代码拼写检查

可前往项目 cspell.json 配置 cspell
配置 cspell 可参考 cspell 官网查看配置完成可执行 pnpm run cspell 来进行代码拼写检查

commitlint 提交规范

可前往项目 fx-pub/config/commit-config/index.mjs 与 .commitlintrc.js 配置 commitlint
配置可参考 commitlint 官网

commitlint 依赖包

1. @commitlint/cli Commitlint 命令行工具，用于校验 Git 提交信息是否符合约定式提交规范
2. @commitlint/config-conventional Commitlint 的默认配置预设，基于 Angular 提交规范，定义了 feat | fix | docs 等标准提交类型
3. commitlint-plugin-function-rules Commitlint 插件，允许通过函数式规则扩展校验逻辑（如 function-rules/scope-enum 自定义 scope 校验）
4. cz-git Commitizen 适配器，提供交互式提交界面，支持在代码中通过 prompt 配置项定义快捷别名、自动填充 scope 等高级特性 cz-git 官网
5. czg cz-git 的命令行工具，可通过 czg 命令触发交互式提交流程
6. @fx-pub/node-utils 工程内部 Node.js 工具包 用于通过 getPackagesSync() 方法获取 monorepo 项目的所有子包信息 可前往 fx-pub/node-utils/src/index.ts 查看更多信息

stylelint 规则

可前往项目 fx-pub/config/style-config/index.mjs 与 stylelint.config.mjs .stylelintignore 配置 commitlint
配置可参考 stylelint 官网

stylelint 依赖包

1. stylelint CSS 代码规范检查工具 stylelint 官网
2. stylelint-scss 支持 SCSS/Sass 语法检查的插件 stylelint-scss github
3. stylelint-order 检查 CSS 属性顺序的插件 stylelint-order github
4. stylelint-config-standard stylelint 官方规则包 标准 CSS 规则集 点击前往查看 stylelint-config-standard
5. stylelint-config-recommended 基础推荐规则 stylelint-config-recommended github
6. stylelint-config-recommended-scss SCSS 专用推荐规则 stylelint-config-recommended-scss github
7. stylelint-config-recommended-vue Vue 文件专用规则 stylelint-config-recommended-vue github
8. stylelint-config-recess-order 按 Recess 项目规范定义属性排序规则 stylelint-config-recess-order github
9. stylelint-prettier 与 Prettier 代码格式化工具集成 stylelint-prettier github
10. @stylistic/stylelint-plugin 新版 Stylelint 代码风格规则插件 @stylistic/stylelint-plugin github
11. postcss PostCSS 的 CSS 语法解析器 点击前往查看 postcss
12. postcss-html PostCSS 的 HTML 语法解析器 postcss-html github
13. postcss-scss PostCSS 的 SCSS 语法解析器 postcss-scss github

建议

1. 使用本项目建议使用 VScode 编辑器
2. 使用 VScode 编辑器时,建议安装插件: PNPM-catalog-lens用于管理 catalogs
3. catalogs 可前往 PNPM 官网学习