【uniapp&微信小程序】vue3+ts+vite+pinia+eslint+prettier+husky项目搭建

目录

前言

一.创建项目

二.配置Pinia

三.配置eslint

四.配置prettier

五.解决eslint和prettier冲突

六.配置husky

七.总结

---

前言

        【uniapp微信小程序系列】将持续更新分享使用uniapp开发小程序的干货文章。本篇文章是从0搭建uniapp项目，如果是个人项目或者公司无代码规范等，可以参考本篇vue3+ts+vite+pinia搭建项目，如果有规范要求，或者想接入规范，那么本篇文章将从0搭建vue3+ts+vite+pinia项目,并接入代码规范eslint+prettier，及代码提交钩子husky配置。

一.创建项目

        uniapp官网提供了多个版本下载方式，这里我们选择Vue3/Vite版，创建以 typescript 开发的工程：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

创建好后安装依赖并启动：

# 安装依赖
yarn install

# 启动开发环境
yarn dev:mp-weixin

因为我们是开发微信小程序，这里启动后会编译出dist包，在微信开发者工具打开地址dist/dev/mp-weixin，即可预览小程序的效果，并会同步编译更新。

二.配置Pinia

        Pinia这里就不过多介绍，不懂的小伙伴可以看这篇文章，里面有详细介绍及使用方法： 快速搞懂Pinia及数据持久化存储(详细教程)http://t.csdn.cn/dSakD

安装Pinia依赖：

yarn add pinia

main.ts中引入并挂载：

import { createPinia } from "pinia";
import { createSSRApp } from "vue";
import App from "./App.vue";
export function createApp() {
  const app = createSSRApp(App);
  app.use(createPinia())
  return {
    app,
  };
}

新建src/store/user/index.ts，这里以user模块为例：

 import {ref} from "vue"
 import {defineStore} from "pinia"
 // 用户user模块
 export const useUserStore = defineStore("user", () => {
   // token信息
   const token = ref("")
   // 用户信息
   const userInfo = ref({
     id: "",
     name: "测试员",
     phone: "",
   })
   return {
     token,
     userInfo,
   }
 })

接下来就可以进行全局数据的存取：

到此变成功在项目中引入并使用Pinia了，关于Pinia的更多细节就看上面那篇文章连接就好。

三.配置eslint

安装依赖

yarn add -D eslint

eslint初始化命令

npx eslint --init

初始化选项选择 

(1) How would you like to use ESLint?

选择：To check syntax, find problems, and enforce code style

(2) What type of modules does your project use?

选择：JavaScript modules (import/export)

(3) Which framework does your project use?

选择：Vue.js

(4) Does your project use TypeScript?

选择：Yes

(5) Where does your code run?

选择：Browser

(6) What format do you want your config file to be in?

选择：JavaScript

(7) Would you like to install them now?

选择：Yes

(8) Which package manager do you want to use?

选择：yarn

此时在项目中会产生一个.eslintrc.js文件，因为eslint默认是不会解析.vue后缀文件的，所以还需要额外的解析器，但初始的.eslintrc.js文件中extends配置顺序原因@typescript-eslint/parser把vue-eslint-parser覆盖了。所以这里需要做些修改，配置如下：

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
    'node': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'
  ],
  'parser': 'vue-eslint-parser',
  'parserOptions': {
    'ecmaVersion': 'latest',
    'parser': '@typescript-eslint/parser',
    'sourceType': 'module'
  },
  'plugins': [
    'vue',
    '@typescript-eslint'
  ],
  'rules': {
    'vue/multi-word-component-names':'off',
    'quotes': ['error', 'single']
  }
}

当我们启动微信小程序时在根目录会产生dist文件，而这个文件我们也不需要eslite检测，这时候就需要将文件设置为不检测，在根目录新建.eslintignore 文件，将不需要检测文件路径写入其中即可，如下：

# 忽略dist目录下文件的语法检查

/dist

 在package.json文件中的scripts中添加lint命令：

{
    "scripts": {
        // eslint . 为指定lint当前项目中的文件
        // --ext 为指定lint哪些后缀的文件
        // --fix 开启自动修复
        "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
    }
}

 运行命令即可校验代码，如有其他后缀文件加入即可。

四.配置prettier

安装依赖

yarn add -D prettier
yarn add -D eslint-config-prettier #eslint兼容的插件
yarn add -D eslint-plugin-prettier #eslint的prettier

在根目录下面添加.prettierrc.js文件夹，然后将下面的配置添加到其中（我这里只做演示，具体配置根据需要来）：

module.exports = {
 // 一行最多多少个字符
	printWidth: 150,
	// 指定每个缩进级别的空格数
	tabWidth: 2,
	// 使用制表符而不是空格缩进行
	useTabs: true,
	// 在语句末尾是否需要分号
	semi: true,
	// 是否使用单引号
	singleQuote: true,
	// 更改引用对象属性的时间 可选值""
	quoteProps: 'as-needed',
	// 在JSX中使用单引号而不是双引号
	jsxSingleQuote: false,
	// 多行时尽可能打印尾随逗号， 可选值""，默认none
	trailingComma: 'es5',
	// 在对象文字中的括号之间打印空格
	bracketSpacing: true,
	// jsx 标签的反尖括号需要换行
	jsxBracketSameLine: false,
	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
	arrowParens: 'always',
	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
	rangeStart: 0,

}

在package.json文件中的scripts中添加format命令：

{
    "scripts": {
        "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    }
}

运行命令会将项目中文件格式化一遍，如有其他后缀文件加入即可。

五.解决eslint和prettier冲突

        配置完成prettier肯定会和eslint发生冲突，根本原因就是eslint有部分规则与prettier冲突了，这里社区已经为我们提供了解决方案，即：

eslint-plugin-prettier：基于 prettier 代码风格的 eslint 规则，即eslint使用pretter规则来格式化代码。

eslint-config-prettier： 禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突

 安装依赖

yarn add eslint-config-prettier eslint-plugin-prettier -D

接下来在.eslintrc.js文件的extends数组末尾加上'plugin:prettier/recommended',其作用是：

1.继承.prettierrc.js文件规则

2.开启rules的"prettier/prettier": "error"

3.eslint fix同时执行.prettierrc.js格式化

这时候eslint和prettier的冲突算是解决啦。

六.配置husky

        上面我们已经配置了eslint和prettier各自的命令，但是在实际项目中不能保证每位成员提交代码前都运行格式化命令，那么怎么确保提交代码的质量呢，这时候就需要用到husky了。

husky是用来管理 git hook 的工具，即代码提交过程中会触发的钩子。

安装依赖

yarn add husky -D

在package.json文件中的scripts中添加prepare命令 :

  "scripts": {
    "prepare": "husky install",
  },

其他成员拉项目装依赖的时候就会自动执行该命令来安装husky,我们这里直接yarn run prepare

这时候根目录会产生一个.husky文件，然后使用husky命令添加pre-commit钩子，运行：

yarn husky add .husky/pre-commit "yarn run lint && yarn run format"

运行上面命令后，会在.husky文件下生成一个pre-commit文件，内容如下：

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

yarn run lint && yarn run format

这之后，当提交代码运行git commit 命令时，就会执行 yarn run lint 和 yarn run format 命令，当有报错时，代码便不会提交成功，如此一来也保障了代码仓库代码的质量与格式。

七.总结

        本篇文章主要以vue3+ts+vite+pinia项目为基础，再引入eslint+prettier+husky来规范代码质量与格式，这其中还有很多配置后续会继续完善更新（如stylelint的引入等）。

---

推荐阅读

快速搞懂Pinia及数据持久化存储

Print.js实现打印pdf，HTML，图片

多终端响应式开发（Bootstrap栅格系统原理及实现)

vue中指令式调用封装组件