husky配置

安装-初始化 husky

pnpm i husky -D // 安装 husky
npx husky-init // 初始化生成 husky，执行此命令前，要先 git init 或者是先将本项目链接到远程仓库(github、gitee等)
// 根目录下生成个一个.husky目录，在这个目录下面会有一个pre-commit文件，内容如下

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm lint # 注意，这里对应package.json中的脚本

配置 commit 规则

// 配置 git 提交时的 commit 信息，统一提交 git 提交规范
pnpm add @commitlint/config-conventional @commitlint/cli -D

根目录下新建commitlint.config.cjs

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build',
        'config'
      ]
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
}

// 'feat',     //新特性、新功能
// 'fix',      //修改bug
// 'docs',     //文档修改
// 'style',    //代码格式修改, 注意不是 css 修改
// 'refactor', //代码重构
// 'perf',     //优化相关，比如提升性能、体验
// 'test',     //测试用例修改
// 'chore',    //其他修改, 比如改变构建流程、或者增加依赖库、工具等
// 'revert',   //回滚到上一个版本
// 'build',    //编译相关的修改，例如发布版本、对项目构建或者依赖的改动
// 'config',   //配置文件修改

packjson.json 文件的 script 字段中添加命令

"scripts": {
    "prepare": "husky install",
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
}

生成commit-msg，搭配husky使用

npx husky add .husky/commit-msg # 执行这个命令会在.husky目录下生成一个commit-msg文件，这个文件需要修改，修改内容复制下面内容

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

自动导入配置

pnpm install -D unplugin-vue-components unplugin-auto-import

官方指导，点击访问

我个人的一些配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      include: [ // 目标文件，哪些文件免导入
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      imports: [ // 需要导入哪些依赖包
        'vue',
        'vue-router',
        'pinia',
        {
          '@vueuse/core': [
            // named imports
            'useMouse', // import { useMouse } from '@vueuse/core',
            // alias
            ['useFetch', 'useMyFetch'] // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          axios: [
            // default imports
            ['default', 'axios'] // import { default as axios } from 'axios',
          ],
          // '[package-name]': [ // 这里复制别人的，暂时还没有看懂什么意思....
          //   '[import-names]',
          //   // alias
          //   ['[from]', '[alias]']
          // ]
        }
      ],
      dts: 'src/auto-import.d.ts', // 生成文件地址
      resolvers: [ElementPlusResolver()],
      eslintrc: {
        // 这里自动导入有坑，需要把enabled的值先改为true(会在根目录下生成一个.eslintrc-auto-import.json文件)，然后改成false，避免重复生成
        // 生成文件之后，再去.eslintrc.cjs文件，extends数组末尾中追加 './.eslintrc-auto-import.json'
        enabled: false, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      }
    }),
    Components({
      dirs: ['src/components'], // 目标文件，哪些文件免导入
      deep: true,
      dts: 'src/components.d.ts', // 自动导入生成的文件所在地
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass', // 需要pnpm i sass -D，否则报错
          directives: true
        })
      ]
    }),
  ],
})

element-icon自动导入

pnpm i unplugin-icons unplugin-auto-impor -D

// vite.config.ts
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig(() => {
  plugins: [
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],

      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),
        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],

      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),

    Icons({
      autoInstall: true,
    }),
})
// ---------.vue使用---------
// i+ep+icon
// <i-ep-user></i-ep-user>

持续更新

大家有什么问题留言给我