vite-pretty-lint 源码解读之为 vite 项目添加 eslint和prettier

前言

vite 作为一种前端工具，创建项目是非常快的，但是今天我们要聊的并不是 vite 创建项目有多快有多好，而是来聊聊如何为 vite 项目添加 eslint 和 prettier，这对一个项目规范而言是非常重要的。

创建项目

首先我们来 npm init vite 创建一个 vite 项目，如下所示，我创建了一个名为vite-demo 的项目。

然后在这个 vite 项目的基础上，再执行 npm init vite-pretty-lint 或者 yarn create vite-pretty-lint。这个就是今天的主角了，vite-pretty-lint 工具。

我们根据提示填写相关信息即可。我这里使用的是 react 创建项目。

安装完成之后，可以发现目录下多了几个文件，分别是 .eslintrc.json 以及 .prettierrc.json。这就是通过以上命令生成的 eslint 和 prettier 相关配置文件。

添加 eslint

.eslintrc.json 配置如下：

{"env": {"browser": true,"es2021": true,"node": true},"overrides": [{"files": ["*.js","*.jsx"],"parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": "latest","sourceType": "module"},"extends": ["eslint:recommended","plugin:react/recommended","plugin:prettier/recommended"],"rules": {"react/react-in-jsx-scope": "off"}}]
} 

添加 prettier

.prettierrc.json 配置如下：

{"trailingComma": "es5","tabWidth": 2,"semi": true,"singleQuote": true
} 

完成以上配置后在就可以在 vite 项目下就可以使用 eslint+prettier 进行格式化校验了。由于每个人创建项目的方式不同，因此配置文件里也会有所差距，这是正常的。

源码解读

打开关于 vite-pretty-lint 的 github 仓库并根据 package.json 找到源码入口。关键实现部分在 lib 目录下。

lib/main.js 包含了主要的实现代码，下面是 main.js 引入的一些东西

我们可以关注一下在 main.js 文件里引入的如下三个东西：

• chalk 在终端输出内容加上样式
• gradient 在终端输出漂亮的颜色渐变
• nanospinner 最简单最小的终端旋转器

这三个东西代表 彩色渐变的输出 以及 加载进度提示。

由于代码部分较多，这里就不粘贴全部源码了，在源码中关键的实现部分是24行~96行，即从 async 函数开始。

这里讲一讲如下这段代码：

let projectType, packageManager;
try { const answers = await askForProjectType();  projectType = answers.projectType;  packageManager = answers.packageManager; } catch (error) {console.log(chalk.blue('\n👋 Goodbye!')); return; } 

这段代码就是前面我们提到的根据提示填写信息那一部分，通过 askForProjectType 获取项目类型 projectType 和包管理工具 packageManager。

总结

如何为 vite 项目自动添加 eslint 和 prettier，我们可以直接使用命令 npm init create-vite-pretty-lint，然后它会自动给你添加基本的配置文件。

我们可以去 github 根据 package.json 找到源码入口，找到源码入口就可以分析代码了。vite-pretty-lint 的源码逻辑简洁，阅读起来不是很难。通过分析源码可以项目添加 eslint 和 prettier 提供了更多思路。对于大多数开发人员和团队来说，做这些是为了提高生产力。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享