Vite项目自动添加eslint prettier源码解读

时间:2022-12-27 田八人气:0

引言

vite-pretty-lint库是一个为Vite创建的Vue或React项目初始化eslint和prettier的库。

该库的目的是为了让开发者在创建项目时，不需要手动配置eslint和prettier，而是通过vite-pretty-lint库来自动配置。

源码地址：

使用

根据vite-pretty-lint库的README.md，使用该库的只需要执行一行命令即可：

// NPM
npm init vite-pretty-lint
// YARN
yarn create vite-pretty-lint
// PNPM
pnpm init vite-pretty-lint

这里就涉及到了一个知识点，npm init <initializer>，yarn create <initializer>，pnpm init <initializer>，这三个命令的作用是一样的，都是用来初始化一个项目的。

<initializer>是一个初始化项目的包名，比如vite-pretty-lint就是一个初始化项目的包名;

执行npm init vite-pretty-lint命令后，相当于执行npx create-vite-pretty-lint命令；

这里不多讲解，参考：npm init

源码阅读

打开lib/main.js文件直接看，一开头就看到了下面这段代码：

const projectDirectory = process.cwd();
const eslintFile = path.join(projectDirectory, '.eslintrc.json');
const prettierFile = path.join(projectDirectory, '.prettierrc.json');
const eslintIgnoreFile = path.join(projectDirectory, '.eslintignore');

一看这些名字就知道，这里是用来创建eslint和prettier的配置文件的，这里的projectDirectory就是当前项目的根目录。

当然现在这些暂时还没有用到，接着往下走：

async function run() {
    let projectType, packageManager;
    try {
        const answers = await askForProjectType();
        projectType = answers.projectType;
        packageManager = answers.packageManager;
    } catch (error) {
        console.log(chalk.blue('\n

加载全部内容