【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中指令式调用封装组件

你可能感兴趣的:(微信小程序,uni-app,小程序,vue.js,前端框架)