Vite專案自動新增eslint prettier原始碼解讀

2022-12-29 14:01:28

引言

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

Vite專案自動新增eslint prettier原始碼解讀

目錄

引言

使用

原始碼閱讀

熱門文章