# private

**Repository Path**: China-Htf/private

## Basic Information

- **Project Name**: private
- **Description**: 个人全栈型项目，统计日常遇到的hook
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://82.157.137.75
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-26
- **Last Updated**: 2024-02-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite

## vscode 插件

- Eslint
- stylelint
- Prettier - Code formatter
- TypeScript Vue Plugin (Volar)
- Vue Language Features (Volar)

## 项目结构

- 介绍

```json
|-- private						// 私有目录（项目名称）
|--	|-- husky					// Husky 配置文件目录
|-- |-- dist					// 打包输出目录
|-- |-- public					// 静态资源目录
|-- |-- src						// 源码目录
|-- |-- |-- api					// API接口目录
|-- |-- |-- assets				// 静态资源目录
|-- |-- |-- components			// 公共组件目录
|-- |-- |-- constants			// 常量目录
|-- |-- |-- directives			// 自定义指令目录
|-- |-- |-- i18n				// 国际化语言目录
|-- |-- |-- icon				// icon 图标目录
|-- |-- |-- layout				// 页面布局目录
|-- |-- |-- router				// 路由配置目录
|-- |-- |-- sql					// 后端 sql 语句目录
|-- |-- |-- stores				// 状态管理目录
|-- |-- |-- theme				// 通用 css 目录
|-- |-- |-- utils				// 工具函数目录
|-- |-- |-- views				// 页面组件目录
|-- |-- |-- App.vue				// 页面入口文件
|-- |-- |-- main.ts				// 程序入口文件，加载各种公共组件
|-- |-- |-- vite-env.d.ts		// 环境类型声明文件
|-- |-- .editorconfig			// 编辑器配置文件，用于保持一致的编码样式
|-- |-- .env					// 默认的环境变量配置文件
|-- |-- .env.development		// 本地开发环境的环境变量配置文件
|-- |-- .env.production			// 生产环境的环境变量配置文件
|-- |-- .eslintignore			// ESLint 忽略文件配置
|-- |-- .eslintrc.cjs			// ESLint 配置规则文件
|-- |-- .gitignore				// Git 忽略文件配置
|-- |-- .prettierignore			// Prettier 忽略文件配置
|-- |-- .prettierrc.cjs			// Prettier 配置规则文件
|-- |-- ..stylelintignore		// Stylelint 忽略文件配置
|-- |-- .stylelintrc.cjs		// Stylelint 配置规则文件
|-- |-- auto-imports.d.ts		// Element Plus 按需引入类型声明文件
|-- |-- components.d.ts			// Element Plus 组件类型声明文件
|-- |-- lint-staged.config.cjs	// Git 提交时的代码规范配置文件
|-- |-- index.html				// 入口页面文件
|-- |-- commitlint.config.cjs	// Git 提交信息的代码规范配置文件
|-- |-- package-lock.json		// 锁定依赖项确切版本的文件
|-- |-- package.json			// 项目基本信息和包依赖配置文件
|-- |-- README.md				// 项目描述文件
|-- |-- stats.html				// 用于分析打包代码块大小的页面文件
|-- |-- tsconfig.json			// TypeScript编译选项配置
|-- |-- tsconfig.node.json		// Node.js环境的TypeScript配置文件，用于在Node.js环境下编译和运行项目
|-- |-- vite.config.ts			// Vite配置文件，用于配置项目构建和开发环境
```

## package.json 命令

- 介绍

```json
{
	"scripts": {
		// 本地运行
		"start": "vite",
		// 初始化 husky 配置
		"husky": "husky install",
		// 本地环境预览构建后的 dist
		"preview": "vite preview",
		// 执行 lint-staged.config.js 文件下的命令
		"lint:lint-staged": "lint-staged",
		// 提交代码(可自定义配置执行命令)
		"commit": "git add -A && lint-staged && czg && git push",
		// 构建打包
		"build": "vue-tsc && vite build",
		// 执行 stylelint 格式化 prettier 格式化 与 eslint 校验
		"lint": "stylelint --cache src/**/*.{css,less,vue,html} --fix && prettier --cache --write . && eslint --cache src/**/*.{js,vue,ts}",
		// 执行 eslint 校验
		"lint:eslint": "eslint --cache src/**/*.{js,vue,ts} --fix",
		// 执行 prettier 格式化
		"lint:prettier": "prettier --cache --write .",
		// 执行 stylelint 格式化
		"lint:stylelint": "stylelint --cache src/**/*.{css,less,vue,html} --fix"
	}
}
```

## 项目规范

### prettier

- 安装

```shell
npm i prettier -D
```

### eslint

- 安装

```shell
npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
```

- 介绍

|               依赖               |                                 描述                                 |
| :------------------------------: | :------------------------------------------------------------------: |
|              eslint              |                            ESLint 核心库                             |
|      eslint-config-prettier      |               关掉所有和 Prettier 冲突的 ESLint 的配置               |
|      eslint-plugin-prettier      |         将 Prettier 的 rules 以插件的形式加入到 ESLint 里面          |
|        eslint-plugin-vue         |                      为 Vue 使用 ESlint 的插件                       |
| @typescript-eslint/eslint-plugin |      ESLint 插件，包含了各类定义好的检测 TypeScript 代码的规范       |
|    @typescript-eslint/parser     | ESLint 的解析器，用于解析 TypeScript，从而检查和规范 TypeScript 代码 |

### stylelint

- 安装

```shell
npm i stylelint stylelint-config-html stylelint-config-recommended-less stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-less stylelint-config-recess-order postcss postcss-less postcss-html stylelint-config-prettier -D

```

- 介绍

|             **依赖**              |                                                                     **描述**                                                                     |
| :-------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: |
|             stylelint             |                                                                 stylelint 核心库                                                                 |
|       stylelint-config-html       |                                  Stylelint 的可共享 HTML（和类似 HTML）配置，捆绑 postcss-html 并对其进行配置。                                  |
| stylelint-config-recommended-less |                                         扩展 stylelint-config-recommended 共享配置，并为 less 配置其规则                                         |
| stylelint-config-recommended-vue  |                                         扩展 stylelint-config-recommended 共享配置，并为 Vue 配置其规则                                          |
|     stylelint-config-standard     | 打开额外的规则来执行在规范和一些 CSS 样式指南中发现的通用约定，包括：惯用 CSS 原则，谷歌的 CSS 样式指南，Airbnb 的样式指南，和 @mdo 的代码指南。 |
|  stylelint-config-standard-less   |                                          扩展 stylelint-config-standard 共享配置，并为 less 配置其规则                                           |
|   stylelint-config-recess-order   |                                                               属性的排序（插件包）                                                               |
|     stylelint-config-prettier     |                                                   关闭所有不必要的或可能与 Prettier 冲突的规则                                                   |
|              postcss              |                                                                转换 css 代码工具                                                                 |
|           postcss-less            |                                                                  识别 less 语法                                                                  |
|           postcss-html            |                                                   用于解析 HTML（和类似 HTML）的 PostCSS 语法                                                    |

- vscode 使用 stylelint，.vscode 文件夹下创建 settings.json

```json
{
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.fixAll.stylelint": true
	},
	"stylelint.enable": true,
	"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],
	"files.eol": "\n"
}
```

### git 规范

#### husky（操作 git 钩子的工具）

- 安装

```shell
npm i husky -D
```

- 使用 (package.json 命令)

```json
"husky": "husky install",
```

> npm run husky

#### lint-staged（本地暂存代码检查工具）

- 安装

```shell
npm i lint-staged --D
```

- .husky 文件夹添加 pre-commit
- 通过钩子函数，判断提交的代码是否符合规范，并使用 prettier 格式化代码

```shell
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint:lint-staged
```

- 新增 lint-staged.config.cjs 文件

```javascript
module.exports = {
	'*.{js,jsx,ts,tsx}': ['eslint --cache src/**/*.{js,vue,ts} --fix', 'prettier --cache --write .'],
	'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
	'package.json': ['prettier --cache --write .'],
	'*.vue': [
		'eslint --cache src/**/*.{js,vue,ts} --fix',
		'prettier --cache --write .',
		'stylelint --cache src/**/*.{css,less,vue,html} --fix',
	],
	'*.{less,html}': ['stylelint --cache src/**/*.{css,less,vue,html} --fix', 'prettier --cache --write .'],
	'*.md': ['prettier --cache --write .'],
};
```

#### commitlint (commit 信息校验工具，不符合则报错)

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

- .husky 文件夹添加 commit-msg

```shell
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

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

- commitizen（基于 Node.js 的 git commit 命令行工具，生成标准化的 message）

```shell
// 安装 czg，如此一来可以快速使用 czg 命令进行启动。
npm i czg -D
```

- cz-git

```shell
// 指定提交文字规范，一款工程性更强，高度自定义，标准输出格式的 commitizen 适配器
npm i cz-git -D
```

> 配置 package.json

```json
"config": {
  "commitizen": {
    "path": "node_modules/cz-git"
  }
}
```

- 新建 commitlint.config.cjs 文件

```js
// @see: https://cz-git.qbenben.com/zh/guide
const fs = require('fs');
const path = require('path');

const scopes = fs
	.readdirSync(path.resolve(__dirname, 'src'), { withFileTypes: true })
	.filter(dirent => dirent.isDirectory())
	.map(dirent => dirent.name.replace(/s$/, ''));

/** @type {import('cz-git').UserConfig} */
module.exports = {
	ignores: [commit => commit.includes('init')],
	extends: ['@commitlint/config-conventional'],
	rules: {
		// @see: https://commitlint.js.org/#/reference-rules
		'body-leading-blank': [2, 'always'],
		'footer-leading-blank': [1, 'always'],
		'header-max-length': [2, 'always', 108],
		'subject-empty': [2, 'never'],
		'type-empty': [2, 'never'],
		'subject-case': [0],
		'type-enum': [
			2,
			'always',
			[
				'feat',
				'fix',
				'docs',
				'style',
				'refactor',
				'perf',
				'test',
				'build',
				'ci',
				'chore',
				'revert',
				'wip',
				'workflow',
				'types',
				'release',
			],
		],
	},
	prompt: {
		messages: {
			// type: "Select the type of change that you're committing:",
			// scope: 'Denote the SCOPE of this change (optional):',
			// customScope: 'Denote the SCOPE of this change:',
			// subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
			// body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
			// breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
			// footerPrefixsSelect: 'Select the ISSUES type of changeList by this change (optional):',
			// customFooterPrefixs: 'Input ISSUES prefix:',
			// footer: 'List any ISSUES by this change. E.g.: #31, #34:\n',
			// confirmCommit: 'Are you sure you want to proceed with the commit above?',
			// 中文版
			type: '选择你要提交的类型 :',
			scope: '选择一个提交范围（可选）:',
			customScope: '请输入自定义的提交范围 :',
			subject: '填写简短精炼的变更描述 :\n',
			body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
			breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
			footerPrefixsSelect: '选择关联issue前缀（可选）:',
			customFooterPrefixs: '输入自定义issue前缀 :',
			footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
			confirmCommit: '是否提交或修改commit ?',
		},
		types: [
			// {
			// 	value: 'feat',
			// 	name: 'feat:     🚀  A new feature',
			// 	emoji: '🚀',
			// },
			// {
			// 	value: 'fix',
			// 	name: 'fix:      🧩  A bug fix',
			// 	emoji: '🧩',
			// },
			// {
			// 	value: 'docs',
			// 	name: 'docs:     📚  Documentation only changes',
			// 	emoji: '📚',
			// },
			// {
			// 	value: 'style',
			// 	name: 'style:    🎨  Changes that do not affect the meaning of the code',
			// 	emoji: '🎨',
			// },
			// {
			// 	value: 'refactor',
			// 	name: 'refactor: ♻️   A code change that neither fixes a bug nor adds a feature',
			// 	emoji: '♻️',
			// },
			// {
			// 	value: 'perf',
			// 	name: 'perf:     ⚡️  A code change that improves performance',
			// 	emoji: '⚡️',
			// },
			// {
			// 	value: 'test',
			// 	name: 'test:     ✅  Adding missing tests or correcting existing tests',
			// 	emoji: '✅',
			// },
			// {
			// 	value: 'build',
			// 	name: 'build:    📦️   Changes that affect the build system or external dependencies',
			// 	emoji: '📦️',
			// },
			// {
			// 	value: 'ci',
			// 	name: 'ci:       🎡  Changes to our CI configuration files and scripts',
			// 	emoji: '🎡',
			// },
			// {
			// 	value: 'chore',
			// 	name: "chore:    🔨  Other changes that don't modify src or test files",
			// 	emoji: '🔨',
			// },
			// {
			// 	value: 'revert',
			// 	name: 'revert:   ⏪️  Reverts a previous commit',
			// 	emoji: '⏪️',
			// },
			// {
			// 	value: 'wip',
			// 	name: 'wip:      🕔  work in process',
			// 	emoji: '🕔',
			// },
			// {
			// 	value: 'workflow',
			// 	name: 'workflow: 📋  workflow improvements',
			// 	emoji: '📋',
			// },
			// {
			// 	value: 'type',
			// 	name: 'type:     🔰  type definition file changes',
			// 	emoji: '🔰',
			// },
			// 中文版
			{ value: 'feat', name: '特性:   🚀  新增功能', emoji: '🚀' },
			{ value: 'fix', name: '修复:   🧩  修复缺陷', emoji: '🧩' },
			{ value: 'docs', name: '文档:   📚  文档变更', emoji: '📚' },
			{ value: 'style', name: '格式:   🎨  代码格式（不影响功能，例如空格、分号等格式修正）', emoji: '🎨' },
			{ value: 'refactor', name: '重构:   ♻️  代码重构（不包括 bug 修复、功能新增）', emoji: '♻️' },
			{ value: 'perf', name: '性能:    ⚡️  性能优化', emoji: '⚡️' },
			{ value: 'test', name: '测试:   ✅  添加疏漏测试或已有测试改动', emoji: '✅' },
			{ value: 'build', name: '构建:   📦️  构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）', emoji: '📦️' },
			{ value: 'ci', name: '集成:   🎡  修改 CI 配置、脚本', emoji: '🎡' },
			{ value: 'chore', name: '回退:   ⏪️  回滚 commit', emoji: '⏪️' },
			{ value: 'revert', name: '其他:   🔨  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）', emoji: '🔨' },
			{ value: 'wip', name: '开发:   🕔  正在开发中', emoji: '🕔' },
			{ value: 'workflow', name: '工作流:   📋  工作流程改进', emoji: '📋' },
			{ value: 'types', name: '类型:   🔰  类型定义文件修改', emoji: '🔰' },
		],
		useEmoji: true,
		scopes: [...scopes],
		customScopesAlign: 'bottom',
		emptyScopesAlias: 'empty',
		customScopesAlias: 'custom',
		allowBreakingChanges: ['feat', 'fix'],
	},
};
```