- 本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
- 这是源码共读的第# 第35期期，链接：juejin.cn/post/711356… 。
1.代码准备
-
可以用 npm init vite 或者 yarn create vite 生成一个 vite 的项目
-
在这个vite项目的基础上，再执行 npm init vite-pretty-lint 或者 yarn create vite-pretty-lint
-
vite-pretty-lint代码仓库： github.com/tzsk/vite-p…
2.vite-pretty-lint中用到的插件简单介绍
- nanospinner Node.js 最简单、最小的终端微调器
- gradient-string 终端输出中漂亮的颜色渐变
- chalk 终端字符串样式正确
- Enquirer 时尚的 CLI 提示，用户友好、直观且易于创建。
3.代码结构
- 代码执行流程
4.代码解析
4.1 入口
run().catch((e) => {
console.error(e);
});
4.2弹出命令，选择项目类型和包管理工具
projectType选择项目类型： 【react-ts】 【react】【vue-ts】 【vue】
packageManager选择项目包管理方式：【npm】 【yarn】
4.3根据命令行的参数，读取模版文件
//依赖的包
const commonPackages = [
'eslint',
'prettier',
'eslint-plugin-prettier',
'eslint-config-prettier',
'vite-plugin-eslint',
];
const viteConfig = viteEslint(fs.readFileSync(viteFile, 'utf8'));
viteEslint方法将配置文件内容，转化成ast
4.4执行重写eslint和prettier配置文件
总结
- npm init这里的原理不是很清楚，大家可以参考 若川的文章[ create-vue 文章 npm init，源码共读中的第9期。
- AST这里还需要在深入了解。
