共计 2635 个字符，预计需要花费 7 分钟才能阅读完成。
本文记录通过 cli 脚手架搭建 uniapp+vue3+vite+typescript 我的项目过程。
背景
因为在开发 uniapp 我的项目时须要启动 HbuilderX 来运行我的项目，但很多时候是习惯应用 vscode 去开发的，而后再在小程序 IDE 上关上查看成果，一个我的项目须要开 3 个软件是很麻烦的一件事，所以看看能不能去掉 HbuilderX 这一环节，一看还真能够，uniapp 官网曾经写出了应用 cli 创立我的项目的办法，我搭建了运行了一下没有问题，这里去记录一下搭建与欠缺过程。
创立我的项目
在 uniapp 文档中有明确阐明有创立命令：传送门。我这里创立的是 vite+ts 的，我就间接贴代码了
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project如果碰到以下报错，须要去间接下载模板
[图片上传失败 …(image-50ab5d-1680707519977)]
能够去 uni-preset-vue 的 vite 分支下间接下载 zip 包，解压后粘贴到本人的我的项目中。
实现后目录构造是这样
[图片上传失败 …(image-c44f18-1680707519977)]
查看 package.json 中的 script 命令，运行命令启动小程序，这里我用微信小程序为例
pnpm run dev:mp-weixin启动起来后关上微信小程序 IDE，抉择导入，而后抉择 dist 目录下 dev 文件夹下的 mp-weixin 导入，这里运行不同的环境和不同的小程序平台，打的包是不同的，所以留神辨别。
我的项目关上后初始就是这样，并且反对热更新，还是很不便的。
[图片上传失败 …(image-df148a-1680707519977)]
配置 eslint
接下来就要配置代码查看的货色了,
首先装置 eslint
pnpm add eslint -D初始化 eslint
pnpm eslint --init我的抉择如下
[图片上传失败 …(image-71753e-1680707519977)]
装置好后进入.eslintrc.js 文件，在 env 中增加 node:true 解决报错
在 package.json 中增加 lint 命令
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"接下来运行 pnpm run lint 发现代码有谬误咱们一一解决。
- .vue 文件解析谬误，代码谬误如下
[图片上传失败 …(image-42a23b-1680707519977)]
解决办法
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},起因能够看这篇文章：
vue3+ts+vite 我的项目中应用 eslint+prettier+stylelint+husky 指南 – 掘金
- vue 文件命名不标准
[图片上传失败 …(image-e0325f-1680707519977)]
解决办法：在 eslint 中配置相应规定
"rules": {'vue/multi-word-component-names':"off",}配置.eslintignore 文件
**/node_modules/*
**/build/*
**/dist/*配置 prettier
增加 prettier
pnpm add prettier -D在根目录新建.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
}在 package.json 中配置 format 命令
"format": "prettier --write . && pnpm lint --fix"解决 eslint 与 prettier 抵触问题
装置 eslint-config-prettier + eslint-plugin-prettier。
pnpm add eslint-config-prettier eslint-plugin-prettier -D配置 eslint
extends: [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended",
// 新增
"plugin:prettier/recommended"
],配置.prettierignore
dist
node_modules配置 husky
装置
pnpm add husky -D在 package.json 中配置命令
"postinstall": "husky install",运行 pnpm postinstall 后就会呈现一个..husky 目录
再运行 pnpm husky add .husky/pre-commit 命令增加一个 pre-commit 文件
pnpm husky add .husky/pre-commit 外面写入
#!/usr/bin/env sh
. "$(dirname --"$0")/_/husky.sh"
pnpm format这样在执行 git commit 的时候就会现执行 pnpm format 如果报错则不会提交。
最初
如果有其余的调整，我也会第一工夫更新这篇文章，心愿能够帮忙到大家，这个 demo 的代码我已上传到 github，有趣味的小伙伴能够查看传送门。=
参考
搭建中参考了两篇很不错的文章，感激大佬们的文章给了我很大的启发。
实战 – 为 vite-vue3-ts 我的项目增加 eslint + prettier + lint-staged 我的项目标准
vue3+ts+vite 我的项目中应用 eslint+prettier+stylelint+husky 指南
