Vue3，Vite，TypeScript，Monorepo，qiankun...... Buff叠满，BUG没有

背景

之前不是说了吗，公司准备升到 Vue3。后面又因为一些需求把项目结构改成了 qiankun 和 Monorepo，所以这篇文章就是一个建设模板的讲解。

老话说的好，~打 BOSS 前要把 Buff 加满~，不是，是工欲善其事，必先利其器。在其它小伙伴过来写代码之前需要把重复工作的模板搭好，开发效率才能更高。

所以我们的目标就是，ESLint、Prettier、TypeScript之类的工具配置好，可以用命令行启动整个项目，可以用命令行新建微应用。可以让其他人零配置直接上手写代码。

开始

本项目默认包管理器使用 pnpm，IDE 使用 VSCode

pnpm create vite 

TypeScript

看下依赖，只有 vue-tsc 不熟，查下文档。（注意下图红框）

看起来是一个检查 Vue SFC 文件 TS 类型的命令行工具，比如在打包或者在 merge 代码前检查 TS 类型是否正确，而在 dev 环境下使用 Volar 插件来验证。

这样看来，需要推荐安装 Volar 插件。

在根目录新建 .vscode 目录，添加

{
  "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
} 

这样其他用 VSCode 打开这个项目的人就会弹出推荐安装该插件。

插件的名字可以在详情查看

这样开发时就有 TS 类型约束了。

而且安装这两个插件之后，也不需要原来的 *.vue 的类型声明了。

ESLint

pnpm install eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D 

• ESLint JavaScript 代码检查工具
• eslint-plugin-vue Vue 官方的 ESLint 插件，包含 vue/* 的规则集
• @typescript-eslint/eslint-plugin TS 检查的 ESLint 插件，包含 @typescript-eslint/* 的规则集
• @typescript-eslint/parser 帮助 ESLint 解析 TypeScript 语法

需要注意的 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 版本号必需一致

添加 .eslintrc.js，.eslintignore 文件

pnpm install eslint-define-config -D 

.eslintrc.js

// @ts-check
const { defineConfig } = require('eslint-define-config');

module.exports = defineConfig({
  root: true,
  rules: {
    // rules...
  },
}); 

这样 eslintrc 也有类型约束了

同样，VSCode 的 ESLint 插件也添加到推荐 JSON 里。下面不在提示了。

Prettier

Volar、ESLint 都有格式化功能，那为什么还要选择 Prettier 呢?

代码风格最不好管理的地方在哪里? 就是所有人都有自己的习惯，无法讨论出一个让所有人都满意的方案。

Prettier 的方案是 opinionated，就是给出最小的配置，要不你就用我的风格，要不你就别用。不容许随便改。(所以也不用吵了。。。)

注意代码风格和语法检查的区别，代码风格是要不要加空格，分号，逗号等等。语法检查是是否声明变量，声明未使用等等。

pnpm install -D eslint-config-prettier eslint-plugin-prettier prettier 

• eslint-config-prettie