theme: fancy
我正在参与掘金会员专属活动-源码共读第一期，点击参与
前言
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 提供了更多思路。对于大多数开发人员和团队来说，做这些是为了提高生产力。
暂无评论内容