在VSCode中使用uni-app开发微信小程序在VSCode中使用uni-app开发微信小程序一、创建uni-app

在VSCode中使用uni-app开发微信小程序

一、创建uni-app微信小程序项目

通过命令行的方式创建uni-app项目：

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

可能会出现如下报错：

当出现上面这种报错可以换成直接通过git将uni-app模板代码拉到本地：

拉取指定分支的代码

git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git project-name

安装依赖包
```
pnpm i
```

二、安装插件

快速创建 uniapp 视图与组件：
增强 vscode 使用 uniapp 的体验：
标签属性、uniapp的api...提示：

三、启动微信小程序

pnpm dev:mp-weixin

四、增强对微信组件的ts类型提示

效果：
安装类型提示包：
- @uni-helper/uni-app-types：为 uni-app 组件提供 TypeScript 类型；
- miniprogram-api-typings：wx API 相关的 TypeScript 类型；

配置 tsconfig.json：

{
  ...,
  "compilerOptions": {
    ...,
    "types": [
      "vite/client",
      "@dcloudio/types",
      "miniprogram-api-typings",
      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
  ...
}

详情请查阅：uni-app-types

五、安装 eslint 和 prettier

安装 eslint
```
pnpm create @eslint/config@latest
```
根据步骤，按照项目的需求选择需要的配置，然后会生成一个eslint.config.mjs文件。

你也可以将 .mjs 改为 .js，但是需要在 package.json 中添加 "type": "module"

如果env.d.ts中遇到如下报错：

是因为旧ban-types已被废弃，被分成几条规则:
- no-empty-object-type{}：在容易混淆的地方禁止使用内置类型
- no-unsafe-function-type：禁止内置Function
- no-wrapper-object-types：禁止Object和内置类包装器，例如Number
只需要将@typescript-eslint/ban-types换成@typescript-eslint/no-empty-object-type即可消除报错。
安装prettier相关插件
- prettier：格式化代码；
- eslint-config-prettier: 关闭所有不必要的或可能与Prettier冲突的规则。
- eslint-plugin-prettier：将 prettier 规则运行，并将差异报告为单独的 ESLint 问题。

2.1 在 eslint.config.js中引用：

import eslintConfigPrettier from 'eslint-config-prettier/flat';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default defineConfig([
  ...,
  eslintConfigPrettier,
  eslintPluginPrettierRecommended
]);

注意：prettier 的配置需要放在所有配置的后面！

六、在开发阶段运行项目时检查代码

安装vite-plugin-checker插件，可以在工作线程中运行 TypeScript、VLS、vue-tsc、ESLint、Stylelint，为 Vite 添加类型检查和代码风格检查支持：
```
pnpm add vite-plugin-checker -D
```

在vite.config.ts中配置

import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    ...,
    checker({
      typescript: true,
      vueTsc: true,
      eslint: {
          useFlatConfig: true,
          lintCommand: 'eslint "./src/**/*.{ts,tsx,vue}"'
      }
    })
  ]
});

那么在运行项目的时候，就会对代码进行检查以及输出错误信息：

七、遇到的问题

如果出现下图一样的问题，那么可以尝试使用下面的解决方案：

在ts.config.json中添加：

"vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"],
 }

如果将package.json中的type的值设置为module，然后在vite.config.ts中出现 uni is not a function错误信息，可以在vite.config.ts中尝试修改为如下代码：
```
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
  plugins: [
    uni.default(),
  ]
});
```