【源码共读】第35期 - 学到了为项目自动添加 eslint 和 prettier

【源码共读】第35期 | 学到了为项目自动添加 eslint 和 prettier

前言

• 本文参加了由公众号@若川视野?发起的每周源码共读活动，点击了解详情一起参与。

• 这是源码共读的第35期，链接：/post/711356… 。

• git项目仓库地址

学习目标

1. 了解如何给vite自动添加eslint和prettier
2. 学习如何下载包到本地

如何使用

通过运行npm init vite-pretty-lint，选择vue和yarn一键安装（以vue框架和yarn为例）；

阅读思路

1. git clone github.com/tzsk/vite-p… 下载项目
2. 打开package.json文件，通过bin找到入口文件路径lib/main.js
3. 从main.js文件中看run()函数是主要执行入口

从上图可以看到主流程执行了以下几个关键操作：

• 下载相关的包（通过child_process的exec子进程下载包）；
• 把相关包的规则组合生成相关的文件并写入到本地；
  • 一种json格式 .xxx.json ： 这种比较好实现，组合成json格式的数据后 fs.writeFileSync(xxxx, JSON.stringify(eslint, null, 2));
  • 一种是js,ts等格式 vite.config.js：这种需要通过babel转化，先把js文件通过babel解析为ast数据格式，经过各种type判断整合数据，然后再通过Babel的transformFromAstSync方法转换成处理好的js文件，最后通过fs.writeFileSync(viteFile, viteConfig);写入到本地文件中；

相关包：

• commonPackages = [ 'eslint', 'prettier', 'eslint-plugin-prettier', 'eslint-config-prettier', 'vite-plugin-eslint', ];

• 相关文件写入：

  • .eslintrc.json
  • .prettierrc.json
  • .eslintignore
  • vite.config.js

• 总之，vite 项目自动添加 eslint 和 prettier的本质把相关的包和通用文件及相关规则封装起来，通过终端命令后选择的方式，匹配出相应的包和相应的规则并下载到使用的当前项目的本地及文件写入当前项目中；

关于控制台命令的方式选择操作如何实现

import chalk from 'chalk'; // 主要用来改变console的颜色
import gradient from 'gradient-string'; // 炫彩风格的字符串  渐变色 可以和chalk结合起来一起使用
import { createSpinner } from 'nanospinner'; // Node.js 终端微调器，进度、成功、失败等状态友好展示，也可用 ora 代替
import enquirer from 'enquirer'; // cli终端友好提示库 类似与inquirerjs库

enquirer提供了cli终端相关的不同类型的选项，用来实现npm init vite-pretty-lint之后关于框架和下载工具的选择；

• enquirer与inquirerjs库有何区别？
  • 使用场景：Enquirer 和 Inquirer.js 都可用于创建交互式命令行界面的工具。
  • 主要区别： Enquirer 更加轻量级， Inquirer.js 提供了更多的功能和更大的生态系统。

总结

1. 学习到了通过 exec(npm install --save-dev xxx xxx, { cwd: projectDirectory }, (error) => {})的方式，代码自动下载相关包到对应的项目目录；

2. 了解到项目中如何自动添加eslint和prettier

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!