源码共读 | 为 vite 项目自动添加 eslint 和 prettier

Vite 是一个用于现代 JavaScript 应用程序的快速、轻量级的构建工具，其设计目的是易于使用和适用于大型项目。Vite-pretty-lint 是一个插件，可以在基于 Vite 的项目中安装和配置，以便在编写代码时能够自动对代码进行格式化和检查代码。这可以帮助开发人员在开发过程的早期捕获格式化和链接错误，并确保代码库遵循一致的样式。,学习目标：,资源：,创建一个vite项目：,进入项目文件夹下，安装 Vite-pretty-lint：,执行上面命令后，会提示选择项目类型和你使用的那种包管理器，如图： <img src=”https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9039a03050b04630bbfd7c1ce596e3a1~tplv-k3u1fbpfcp-watermark.image?” alt=”” width=”70%” />,施加魔法中，稍等片刻，它给你的项目自动添加上eslint与prettier的配置，懒人福音啊。,<img src=”https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68a1c56111224dcaa3832986665151d0~tplv-k3u1fbpfcp-watermark.image?” alt=”” width=”40%” />,可以发现，执行
npm init Vite-pretty-lint 我们的项目主要发生了如下的变化：,其实，实现上述功能所用到的方法这这篇文章
源码共读 – 构建脚手架（2K字长文） 中都有出现，为了加深印象，我们再来复习一遍。,找到脚本的入口文件。如图：,<img src=”https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e6858c15aa14a43a459e7a3d1d0b070~tplv-k3u1fbpfcp-watermark.image?” alt=”” width=”40%” />,源码：,询问项目类型，之后根据用户选择的项目类型复制对应的模板文件，询问包管理器类型，用于安装依赖。,这里交互式命令提示工具使用的是 enquirer 包。,做完询问工作，使用exec执行命令安装依赖，然后使用
fs.writeFileSync 复制文件。,parseSync 方法用于解析一串 JavaScript 代码并返回代码的抽象语法树(AST)表示。AST 是一个树状结构，表示代码的结构，它可以用来以各种方式分析或修改代码。,ParseSync 方法有两个参数:,通过本次课程，不仅学习到了
Vite-pretty-lint 是如何自动配置eslint与prettier的，而且了解到了如何通过 babel 的 parseSync 解析 js代码。,parseSync 方法用于解析一串 JavaScript 代码并返回代码的抽象语法树(AST)表示。AST 是一个树状结构，表示代码的结构，它可以用来以各种方式分析或修改代码。,

前言

Vite 是一个用于现代 JavaScript 应用程序的快速、轻量级的构建工具，其设计目的是易于使用和适用于大型项目。Vite-pretty-lint 是一个插件，可以在基于 Vite 的项目中安装和配置，以便在编写代码时能够自动对代码进行格式化和检查代码。这可以帮助开发人员在开发过程的早期捕获格式化和链接错误，并确保代码库遵循一致的样式。

学习目标：

• 如何为 vite 项目自动添加 eslint 和 prettier
• 它的原理是什么

资源：

• 源码地址：vite-pretty-lint

如何使用

创建一个vite项目：

npm init vite

进入项目文件夹下，安装 Vite-pretty-lint：

npm init Vite-pretty-lint

执行上面命令后，会提示选择项目类型和你使用的那种包管理器，如图： <img src=”https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9039a03050b04630bbfd7c1ce596e3a1~tplv-k3u1fbpfcp-watermark.image?” alt=”” width=”70%” />

施加魔法中，稍等片刻，它给你的项目自动添加上eslint与prettier的配置，懒人福音啊。

<img src=”https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68a1c56111224dcaa3832986665151d0~tplv-k3u1fbpfcp-watermark.image?” alt=”” width=”40%” />

它是如何做到的呢？

可以发现，执行 npm init Vite-pretty-lint 我们的项目主要发生了如下的变化：

• 自动生成了配置文件
• 添加了依赖

其实，实现上述功能所用到的方法这这篇文章 源码共读 – 构建脚手架（2K字长文） 中都有出现，为了加深印象，我们再来复习一遍。

入口文件

找到脚本的入口文件。如图：

<img src=”https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e6858c15aa14a43a459e7a3d1d0b070~tplv-k3u1fbpfcp-watermark.image?” alt=”” width=”40%” />

询问项目类型

源码：

  try {
    const answers = await askForProjectType();
    projectType = answers.projectType;
    packageManager = answers.packageManager;
  } catch (error) {
    console.log(chalk.blue('\n Goodbye!'));
    return;
  }
  const { packages, eslintOverrides } = await import(
    `./templates/${projectType}.js`
  );

询问项目类型，之后根据用户选择的项目类型复制对应的模板文件，询问包管理器类型，用于安装依赖。

// util.js
export function askForProjectType() {
  return enquirer.prompt([
    {
      type: 'select',
      name: 'projectType',
      message: 'What type of project do you have?',
      choices: getOptions(),
    },
    {
      type: 'select',
      name: 'packageManager',
      message: 'What package manager do you use?',
      choices: ['npm', 'yarn', 'pnpm'],
    },
  ]);
}

这里交互式命令提示工具使用的是 enquirer 包。

执行脚本

  exec(`${commandMap[packageManager]}`, { cwd: projectDirectory }, (error) => {
    if (error) {
      spinner.error({
        text: chalk.bold.red('Failed to install packages!'),
        mark: '',
      });
      console.error(error);
      return;
    }

    fs.writeFileSync(eslintFile, JSON.stringify(eslint, null, 2));
    fs.writeFileSync(prettierFile, JSON.stringify(prettierConfig, null, 2));
    fs.writeFileSync(eslintIgnoreFile, eslintIgnore.join('\n'));
    fs.writeFileSync(viteFile, viteConfig);

    spinner.success({ text: chalk.bold.green('All done! '), mark: '' });
    console.log(
      chalk.bold.cyan('\n Reload your editor to activate the settings!')
    );
  });

做完询问工作，使用exec执行命令安装依赖，然后使用 fs.writeFileSync 复制文件。

解析vite配置文件

export function viteEslint(code) {
  // 解析配置为抽象语法树
  const ast = babel.parseSync(code, {
    sourceType: 'module',
    comments: false,
  });
  const { program } = ast;
  
  // 将import 声明映射为一个列表
  const importList = program.body
    .filter((body) => {
      return body.type === 'ImportDeclaration';
    })
    .map((body) => {
      delete body.trailingComments;
      return body;
    });
  
  // 找到 vite-plugin-eslint 下写入代码
  if (importList.find((body) => body.source.value === 'vite-plugin-eslint')) {
    return code;
  }

  const nonImportList = program.body.filter((body) => {
    return body.type !== 'ImportDeclaration';
  });
  const exportStatement = program.body.find(
    (body) => body.type === 'ExportDefaultDeclaration'
  );

  if (exportStatement.declaration.type === 'CallExpression') {
    const [argument] = exportStatement.declaration.arguments;
    if (argument.type === 'ObjectExpression') {
      const plugin = argument.properties.find(
        ({ key }) => key.name === 'plugins'
      );

      if (plugin) {
        plugin.value.elements.push(eslintPluginCall);
      }
    }
  }

  importList.push(eslintImport);
  importList.push(blankLine);
  program.body = importList.concat(nonImportList);

  ast.program = program;

  return babel.transformFromAstSync(ast, code, { sourceType: 'module' }).code;
}

parseSync 方法用于解析一串 JavaScript 代码并返回代码的抽象语法树(AST)表示。AST 是一个树状结构，表示代码的结构，它可以用来以各种方式分析或修改代码。

ParseSync 方法有两个参数:

• Code: 包含要解析的 JavaScript 代码的字符串。
• Options: 包含解析器配置选项的可选对象。

总结

通过本次课程，不仅学习到了 Vite-pretty-lint 是如何自动配置eslint与prettier的，而且了解到了如何通过 babel 的 parseSync 解析 js代码。