如何为前端项目一键自动添加eslint和prettier的支持

本文来自读者@那个曾经的少年回来了 写的源码共读35期笔记文章，授权投稿，写的真好。

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

本文属于源码共读第35期 | 为 vite 项目自动添加 eslint 和 prettier点击了解本期详情一起参与 https://juejin.cn/post/7113563466211786783

前言

我之前好多次都是一步一步的安装eslint和prettier及相关依赖，一个配置文件一个配置文件的粘贴复制，并修改其中的相关配置。而且可能会在每个项目中都要去处理，如果项目工程规划化以后，eslint和prettier确实是项目少不了的配置。不知道你有没有像我一样操作过呢？

那么有没有一种更简单的方式去处理呢？答案是我终于遇到了。通过若川大佬的源码共读活动发现了，真的是太棒了。

本文以vite脚手架创建的项目为基础进行研究的，如果是其他脚手架创建的项目，那么就要自己去修改处理，但是原理是一样的。

那么接下来，我就要来一探究竟，先看看如何使用，然后查阅一下它的源码，看看它到底是如何实现的呢？

1、vite创建项目

• 创建项目

yarn create vite

一顿操作以后项目就创建完毕了

image.png

• 2、安装依赖

yarn

• 3、运行项目

yarn dev

• 4、运行初始化eslint和prettier命令

yarn create vite-pretty-lint

先来看没有执行命令前的文件目录

image.png

再来看执行完命令后的文件目录

image.png

可以发现文件目录中增加了eslint和prettier的相关配置，package.json中增加了相关的依赖、以及vite.config.xx文件也增加了相关配置，具体的文件变更可以查看https://github.com/lxchuan12/vite-project/commit/6cb274fded66634191532b2460dbde7e29836d2e。

一个命令干了这么多事情，真的太优秀了。接下来我们就去看看这如此优秀的源代码吧

2、整个过程的示意图

通过大致的查看源代码，简单总结出来的代码执行过程示意图，仅供参考

未命名文件 (3).png

3、源码调试过程

3.1、找到调试代码的位置

通过package.json中的bin节点可以发现，yarn create vite-pretty-lint最终执行的便是lib/main.js中的代码

"bin": {
    "create-vite-pretty-lint": "lib/main.js"
  },

3.2、 开始调试的命令

因为我们现在只是要执行lib/main.js这个入口文件，通过package.json的scripts 也没有发现执行命令，所以现在我们可以直接通过node来运行代码

node lib/main.js

调试成功的结果如下图所示

企业微信截图_16564645675849.png

3.3、 查看头部引入的模块

• chalk终端多色彩输出

npm i chalk

import chalk from 'chalk'

const log = console.log
// 字体背景颜色设置
log(chalk.bgGreen('chalk打印设置') )

// 字体颜色设置
log(chalk.blue('Hello') + ' World' + chalk.red('!'))

// 自定义颜色
const custom = chalk.hex('#F03A17')
const bgCustom = chalk.bgHex('#FFFFFF')
log(cus