使用Vite、TypeScript和Vue 3搭建纯净版UniApp小程序

包管理工具安装

npm install -g pnpm

下载项目基础包：

github.com/dcloudio/un…

配置小程序启动路径：

*如果不添加会提示： "app.json 未找到" *

// 根目录 project.config.json
{
"miniprogramRoot": "dist/dev/mp-weixin/",
"srcMiniprogramRoot": "dist/dev/mp-weixin/"
}

• project.config.json：是小程序项目的配置文件，用于存储和管理小程序项目的相关配置信息。
• miniprogramRoot：配置项指定了小程序项目的源代码目录，即开发者编写和修改的代码所在的目录。
• srcMiniprogramRoot：该配置项指定了编译后的小程序目标目录，即编译后生成的小程序代码所放置的目录。

启动小程序：

可以在package.json中的scripts内自定义。

// 根目录 package.json

"scripts": {
   `pnpm run dev:mp-weixin`
}

配置 Eslint、Prettier、Husky：

1. ESLint - js检查：是一个静态代码分析工具，用于检查和报告JavaScript代码中的潜在问题、错误和不一致性。
2. Prettier - 格式检查：是一个代码格式化工具，用于自动格式化代码以保持一致的风格。
3. Husky - git提交检查：是一个Git钩子工具，它允许开发人员在Git操作（例如提交、推送等）的不同阶段执行自定义脚本。Husky常用于在代码提交之前进行代码检查、测试和格式化等操作。

安装 eslint：

add eslint -D

初始化 eslint：

pnpm eslint --init

配置 eslint：

ESLint的配置文件，用于定义和配置JavaScript代码的静态代码检查规则

// 根目录 .eslintrc.js

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

配置脚本命令：

运行npm run lint命令会执行ESLint工具对项目中的.vue、.js、.ts、.jsx和.tsx文件进行静态代码检查，并尝试自动修复一些简单的问题

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
},

• lint: 是自定义的脚本命令名称，可以根据项目需要进行修改。
• eslint: 是运行ESLint工具的命令。
• .: 表示要检查的目录，这里使用"."表示当前目录，即项目根目录。
• --ext .vue,.js,.ts,.jsx,.tsx: 用于指定ESLint要检查的文件扩展名，这里包括了.vue、.js、.ts、.jsx和.tsx文件。
• --fix: 是ESLint的一个选项，用于自动修复可以自动修复的问题，如一些简单的语法错误、缩进问题等。

配置忽略文件

.eslintignore 文件用于指定哪些文件或目录应该被 ESLint 忽略，不进行代码检查。

// 根目录 .eslintignore

**/node_modules/*
**/build/*
**/dist/*

安装 Prettier：

pnpm add prettier -D

配置 Prettier：

// 根目录：.prettierrc.js

module.exports = {
  // 一行的字符数，如果超过会进行换行，默认为80
  printWidth: 100,
  // 一个tab代表几个空格数，默认为2
  tabWidth: 2,
  // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
  useTabs: false,
  // 字符串是否使用单引号，默认为false，使用双引号
  singleQuote: false,
  // 行位是否使用分号，默认为true
  semi: false,
  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  trailingComma: 'none',
  // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  bracketSpacing: true
}

配置Prettier脚本命令：

// 根目录：package.json

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
},

1. prettier --write .: 这个命令使用 Prettier 工具来格式化代码，并将更改写回到源文件中。Prettier 是一个代码格式化工具，它可以根据预定义的规则和配置自动格式化代码，以确保代码的一致性和可读性。
2. pnpm lint --fix: 这个命令执行代码检查，并尝试自动修复一些简单的问题。在这里，使用了 "pnpm" 作为包管理器命令，"lint" 是一个自定义的脚本命令，用于运行代码检查工具，可能是 ESLint 或其他类似的工具。通过添加 "--fix" 参数，它告诉代码检查工具尝试自动修复一些可以自动修复的问题。

解决eslint 与 prettier冲突问题

pnpm add eslint-config-prettier eslint-plugin-prettier -D

配置Prettier忽略文件：

// 根目录 .prettierignore

dist
node_modules

安装husky：

pnpm add husky -D

配置husky脚本命令：

// 根目录：package.json

"scripts": {
   "huskyinstall": "husky install"
}

安装husky：

pnpm huskyinstall

运行pnpm huskyinstall用于安装单独Husky后，会出现一个.husky目录，如果报错husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)，说明没有初始化git，执行git init

配置husky Git提交前检查

用于在项目中添加一个 pre-commit 钩子。这个命令会将 pre-commit 钩子的脚本文件（.husky/pre-commit）复制到项目的根目录下。pre-commit 钩子是在执行 Git 提交操作之前触发的钩子

pnpm husky add .husky/pre-commit

// .husky/pre-commit

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

pnpm lint && pnpm format

参考：

juejin.cn/post/721841…