背景
之前不是说了吗,公司准备升到 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