z-ui 跨框架 2.5D 组件库 - 1. 项目初始化仓库初始化 Github 上 new repository 输入

互相学习，共同进步，才是王道

加好友回复 组件库 进群， 互相学习，共同进步

关联文章

仓库初始化

• Github 上 new repository
• 输入 repository name
• 点击 Create repository
• 复制 clone 地址

本地初始化 vite 项目代码

pnpm create vite

限制 node、pnpm 版本，指定包管理工具 pnpm

限制 node 版本和 pnpm 版本是很有必要的。这个后面可以单独展开说说

• 限制 node 版本

package.json

"engines": {
    "node": ">=22.0.0"
  },

.npmrc

22

通过 fnm 可以自动切换 node 版本

• 限制 pnpm 版本 通过激活 corepacke, 可以自动切换 pnpm 版本

package.json

"packageManager": "pnpm@9.7.1"

• 限制包管理工具只能使用 pnpm

package.json

"script": {
    "preinstall": "npx only-allow pnpm"
}

代码规范

eslint

• vscode 安装 eslint 插件
• 安装 eslint
• 专门处理 Svelte 开发的 eslint-plugin-svelte
• 安装 prettier eslint-config-prettier eslint-plugin-prettier
• ts 相关 @typescript-eslint/eslint-plugin @typescript-eslint/parser

配置 .prettierrc

    "semi": true, 
    "singleQuote": true

配置 .eslintrc

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:svelte/recommended"
  ],
  "overrides": [{ "files": ["**/*.svelte"], "parser": "svelte-eslint-parser" }],
}

在项目根目录中创建 .vscode 文件夹，创建 setting.json 文件

 "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },

Stylelint

• vscode 安装 Stylelint 插件
• 安装 stylelint, stylelint-config-standard
• stylelint-order 用于 css 属性排序
• postcss-html 用于解析类 html（Vue, Svelte, Astro 等） 中 PostCss 语法

配置 .stylelintrc

{
  "extends": ["stylelint-config-standard"],
  "plugins": ["stylelint-order"],
  "customSyntax": "postcss-html",
  "fix": true,
  "rules": {
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "float",
      "width",
      "height",
      "max-width",
      "max-height",
      "min-width",
      "min-height",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "margin-collapse",
      "margin-top-collapse",
      "margin-right-collapse",
      "margin-bottom-collapse",
      "margin-left-collapse",
      "overflow",
      "overflow-x",
      "overflow-y",
      "clip",
      "clear",
      "font",
      "font-family",
      "font-size",
      "font-smoothing",
      "osx-font-smoothing",
      "font-style",
      "font-weight",
      "hyphens",
      "src",
      "line-height",
      "letter-spacing",
      "word-spacing",
      "color",
      "text-align",
      "text-decoration",
      "text-indent",
      "text-overflow",
      "text-rendering",
      "text-size-adjust",
      "text-shadow",
      "text-transform",
      "word-break",
      "word-wrap",
      "white-space",
      "vertical-align",
      "list-style",
      "list-style-type",
      "list-style-position",
      "list-style-image",
      "pointer-events",
      "cursor",
      "background",
      "background-attachment",
      "background-color",
      "background-image",
      "background-position",
      "background-repeat",
      "background-size",
      "border",
      "border-collapse",
      "border-top",
      "border-right",
      "border-bottom",
      "border-left",
      "border-color",
      "border-image",
      "border-top-color",
      "border-right-color",
      "border-bottom-color",
      "border-left-color",
      "border-spacing",
      "border-style",
      "border-top-style",
      "border-right-style",
      "border-bottom-style",
      "border-left-style",
      "border-width",
      "border-top-width",
      "border-right-width",
      "border-bottom-width",
      "border-left-width",
      "border-radius",
      "border-top-right-radius",
      "border-bottom-right-radius",
      "border-bottom-left-radius",
      "border-top-left-radius",
      "border-radius-topright",
      "border-radius-bottomright",
      "border-radius-bottomleft",
      "border-radius-topleft",
      "content",
      "quotes",
      "outline",
      "outline-offset",
      "opacity",
      "filter",
      "visibility",
      "size",
      "zoom",
      "transform",
      "box-align",
      "box-flex",
      "box-orient",
      "box-pack",
      "box-shadow",
      "box-sizing",
      "table-layout",
      "animation",
      "animation-delay",
      "animation-duration",
      "animation-iteration-count",
      "animation-name",
      "animation-play-state",
      "animation-timing-function",
      "animation-fill-mode",
      "transition",
      "transition-delay",
      "transition-duration",
      "transition-property",
      "transition-timing-function",
      "background-clip",
      "backface-visibility",
      "resize",
      "appearance",
      "user-select",
      "interpolation-mode",
      "direction",
      "marks",
      "page",
      "set-link-source",
      "unicode-bidi",
      "speak"
    ]
  }
}

ls-lint

ls-lint 用的较少，主要用来统一文件名的命名方式的

• vscode 安装 Lslint 插件(此插件需要最新版的 vscode)

• 项目中安装 @ls-lint/ls-lint

配置

ls:
  packages/*:
    .dir: kebabcase

限制组件名以大驼峰方式命名

commitlint

安装 commitlint 相关依赖项

pnpm add @commitlint/cli @commitlint/config-conventional -D

根目录下添加配置文件

commitlint.config.js

export default {
    extends: ['@commitlint/config-conventional'],
    rules: {}
}

lint-staged

.lintstagedrc

{
  "*.{js,jsx}": ["eslint --fix", "prettier --cache --write"],
  "*.{ts,tsx}": [
    "eslint --fix",
    "prettier --cache --parser=typescript --write"
  ],
  "*.svelte": ["eslint --fix", "prettier --cache --write"],
  "*.css": ["stylelint --fix", "prettier --cache --write"]
}

commitizen 规范提交信息

• 安装 commitizen, husky, cz-customizable

配置 commitizen

添加 .cz-config.js 。 配置文件

.czrc

{ "path": "cz-customizable" }

配置“commitizen”以使用“cz-customizable”作为插件。将这些行添加到您的“package.json”

"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}

如果你的项目中 package.json 中

{
    "type": "module"
}

需要将配置文件名改成 .cz-config.cjs

并配置 config 路径 package.json

"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  },
  "cz-customizable": {
     "config": ".cz-config.cjs"
  }
}

配置 husky

npx husky init

.husky/prepare-commit-msg

if [ -z "$HUSKY_GIT_PARAMS" ] && [ -z "$COMMITIZEN_SKIP" ]; then
    exec < /dev/tty && npx cz --hook || true
fi

pre-commit 提交前校验 ts 类型和提交信息

还是利用 husky 的 git hooks

pre-commit

echo "类型校验中"

npx --no -- tsc --noEmit
npx --no lint-staged

npx --no -- tsc --noEmit // tsc 会按照 TypeScript 的规则对你的代码进行语法和类型检查，而不会生成编译后的 js 文件

尽可能得避免写 any, as 等断言类的类型

提交前，项目中的 any 类型，会报错提示。

npx --no lint-staged // 执行 lint-staged，会根据 .lintstagerc 配置文件分别执行 eslint, stylelint 等。

commit-msg

npx --no-install commitlint --edit $1

npx --no-install commitlint --edit $1 // 使用 commitlint 对提交的信息进行校验。查看是否符合Conventional Commits 规范。其实提交信息在 commitizen 中已经约束过了。

配置 .vscode/settings.json

配置完 eslint 和 stylelint 后， 我们一般都会配置 vscode 的保存自动格式化的功能。我建议这个配置还是跟着项目走。这样不管开发人员有没有在本地 vscode 中配置。只要他开发这个项目。保存自动格式化功能就会生效。 .vscode/settings.json

{
    "editor.formatOnSave": false,
    "eslint.format.enable": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "explicit",
        "eslint.autoFixOnSave": "explicit"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
}

changeset, release-it

• 这个等后面发布的时候再配置