快速构建一个 Vite/Nuxt+Vue3+TS+ESLintStyleLint+Husky+lint-staged+Commitlint 项目

阿阳热爱前端
1,349 阅读3分钟

前言

最近写了一些新项目，项目创建步骤和初始项目结构都大差不差，每次构建时都需要搜索对应文档来查看命令，索性直接写一遍文章来记录一下，顺便也把我认为不错的这套构建流程分享给大家！

创建项目

vite

pnpm create vite my-app --template vue-ts

nuxt

npx nuxi@latest init my-app

Eslint

eslint 我推荐使用 antfu 大佬出的一套配置，只需一行代码，即可达到最佳实践！

pnpm add -D eslint @antfu/eslint-config

新建 .eslintrc 文件

{
  "extends": "@antfu"
}

// package.json
{
  "scripts": {
+   "lint": "eslint . --fix"
  }
}

安装 eslint 的 vscode 插件并且新建 .vscode/settings.json 文件。

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Husky

通过 Husky 在 Git commit 时进行代码校验。

pnpm add -D husky

向 package.json 中添加脚本命令 prepare。

npm pkg set scripts.prepare="husky install"

运行脚本命令之前，确保已执行 git init 或远程仓库已存在！

pnpm prepare

给 Husky 添加一个 Hook，使得每次 git commit 之前都会先运行 npm run lint。

npx husky add .husky/pre-commit "npm run lint"

lint-staged

每次提交检测所有代码并不是一个好的实践，我们可以通过 lint-staged 只对暂存区的代码进行检验。

pnpm add -D lint-staged

// package.json
{
+ "lint-staged": {
+   "*": "npm run lint"
+ }
}

修改 .husky/pre-commit 文件。

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

- npx npm run lint
+ npx lint-staged

Commitlint

使用 commitlint 对提交信息进行校验。

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

新建 .commitlintrc 文件。

{
  "extends": "@commitlint/config-conventional"
}

把 commitlint 命令也添加到 Husky Hook。

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

到这里，项目已经构建完毕了，可以愉快的写代码了。

下面是我使用的其它插件的推荐，有兴趣的小伙伴可以继续往下观看！

UnoCSS

我非常喜欢在项目中使用 UnoCSS，强烈推荐大家尝试一下，我也是被我的朋友推荐之后才入坑的，它完美地诠释了什么是真香定律！

记得搭配 vscode 的 unocss 插件使用，体验感直接拉满。

vite

pnpm add -D unocss

// vite.config.ts
import { defineConfig } from 'vite'
+ import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
+   UnoCSS(),
  ],
})

// main.ts
+ import 'virtual:uno.css'

nuxt

pnpm add -D @unocss/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
+   '@unocss/nuxt',
  ],
})

vite/nuxt

新建 uno.config.ts 文件

import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [presetUno()]
})

关于 UnoCSS 的具体使用和其它配置详见官网

unocss-eslint

为了能规范项目团队不同成员的代码，使用 unocss-eslint 进行类名排序和去空，以此达到一致性。

pnpm add -D @unocss/eslint-config

// .eslintrc
{
  "extends": [
    "@antfu", 
+   "@unocss"
  ]
}

AutoImport

nuxt 本身就支持自动导入，这里主要给 vite 项目加一下。

pnpm add -D unplugin-auto-import

// vite.config.ts
import { defineConfig } from 'vite'
+ import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
+  AutoImport({
+    dts: './src/types/auto-import.d.ts',
+    imports: ['vue'],
+  }),
  ],
})

使用前

import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

使用后

const count = ref(0)
const doubled = computed(() => count.value * 2)

此插件还支持 vue-router、pinia、react 等等...

vite 相关构建流程在 react 项目同样适用！自从开始写 vue3 之后，个人项目就不怎么想用 react 了 😂！

avatar
文章
阅读
粉丝