亲宝软件园·资讯

展开

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

田八 人气:0

引言

vite-pretty-lint库是一个为Vite创建的VueReact项目初始化eslintprettier的库。

该库的目的是为了让开发者在创建项目时,不需要手动配置eslintprettier,而是通过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');

一看这些名字就知道,这里是用来创建eslintprettier的配置文件的,这里的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

加载全部内容

相关教程
猜你喜欢
用户评论