Day5【小试牛刀】prettier API 实战与 极简 CLI 开发

APIs

专栏所有代码地址:github.com/Sunny-117/j...

在前面我们对代码进行格式化的时候,我们采用的是命令行工具的形式,但是这些命令行工具所提供的命令实际上也是调用的 prettier 背后对应的各种 API。

在官网能够查看到这些 API:prettier.io/docs/en/api...

prettier.format(source, options)

这个 API 是整个 prettier 里面最最核心的 API,该 API 负责的就是格式化操作。

下面是一个使用该 API 进行代码格式化的例子:

js 复制代码
// 该文件使用 API 的形式来对代码进行格式化

const prettier = require("prettier");
const fs = require("fs");
const path = require("path");

// prettier.format(source, options)

// console.log(sourcePath);
// /Users/jie/Desktop/prettier-demo/src/index.js

// const optionsPath = path.resolve(".prettierrc");

// 书写 prettier 规则配置
const options = {
  singleQuote: false,
  printWidth: 50,
  semi: false,
  trailingComma: "es5",
  parser: "babel",
};

// 读取 src 目录

fs.readdir("src", (err, files) => {
  if (err) throw err;

  for (let i = 0; i < files.length; i++) {
    // 拼接路径
    const sourcePath = path.resolve("src", files[i]);

    // 读取源码文件
    const jsSource = fs.readFileSync(sourcePath, "utf8");

    // 使用 prettier.format 来进行格式化
    // 通过 API 的方式来格式化,一定要指定 parser
    prettier.format(jsSource, options).then((res) => {
      // 将格式化好的结果重新写入到原来的文件里面
      fs.writeFileSync(sourcePath, res, "utf-8");
    });
  }
  console.log("格式化完毕...");
});

注意在使用 API 进行格式化的时候,格式化规则里面需要添加 parser,指定对应的解析器,关于能够添加哪些 parser,可以参阅:prettier.io/docs/en/opt...

之后就是读取目录下面的文件,调用 format API 进行格式化操作,格式化完成之后将格式化的结果重新写入到原来的文件里面。

prettier.check(source, [ options ])

该 API 主要负责核对对应的文件是否已经被 prettier 格式化,如果已经被格式化,则返回 true,否则返回 false

下面是一个使用示例:

js 复制代码
// 判断 src 下面是否所有的文件都已经格式化

const prettier = require("prettier");
const fs = require("fs");
const path = require("path");

// 书写 prettier 规则配置
const options = {
  singleQuote: false,
  printWidth: 50,
  semi: false,
  trailingComma: "es5",
  parser: "babel",
};

fs.readdir("src", async (err, files) => {
  if (err) throw err;

  let isAllFormated = true;
  for (let i = 0; i < files.length; i++) {
    // 拼接路径
    const sourcePath = path.resolve("src", files[i]);

    // 读取源码文件
    const jsSource = fs.readFileSync(sourcePath, "utf8");

    const res = await prettier.check(jsSource, options);

    if (!res) {
      // 说明这个文件没有被格式化
      console.log(`${files[i]} 文件还没有格式化`);
      isAllFormated = false;
    }
  }
  if (isAllFormated) {
    console.log("所有文件都已经格式化...");
  }
});

实现简易 CLI

一个工具的 CLI 背后其实就是调用的对应的 API,所以我们这里来实现一个简易的 CLI 工具。

首先新建一个名为 formattool 项目,使用 pnpm init 进行初始化。然后在项目中新建一个 index.js,代码如下:

js 复制代码
#!/usr/bin/env node

// 上面的第一行代码,通常称之为 shebang(sharp bang)
// 这个是在类 unix 操作系统里面所支持的一种特性,用于告诉系统如何执行之后的脚本
// 因此在 #! 后面一般会跟上一个解释器的绝对路径

// 获取命令行参数
const args = process.argv.slice(2);

console.log(args);

主要就是要注意第一行代码,该代码是类Unix(Linux、MacOS)操作系统所拥有的一种特性,告诉操作系统如何执行之后的脚本,后面会跟上解释器的绝对路径。

接下来我要进行一个全局的链接。

终端定位到在 formattool 项目根目录下,使用 npm link 进行一个全局的链接,接下来回到要链接的项目(prettier-demo),使用 npm link formattool 链接刚才放到了全局下面的包。

接下来回到 formattool 下面的 index.js 文件中,补充如下的代码:

js 复制代码
#!/usr/bin/env node

// 上面的第一行代码,通常称之为 shebang(sharp bang)
// 这个是在类 unix 操作系统里面所支持的一种特性,用于高速系统如何执行之后的脚本
// 因此在 #! 后面一般会跟上一个解释器的绝对路径

const prettier = require("prettier");
const fs = require("fs");
const path = require("path");


// 获取命令行参数
const args = process.argv.slice(2);

// 要做格式化的操作
// pnpm formattool --write src/index.js

// 读取源码
const sourcePath = path.resolve("src", "index.js");
const jsSource = fs.readFileSync(sourcePath, "utf8");

// 读取配置文件
const options = JSON.parse(fs.readFileSync(path.resolve(".prettierrc")));

if(args.length === 0){
    console.error("请提供一个参数!");
    process.exit(1);
}

const input = args[0];

if(input === "--write" || input === "-w"){
    // 使用 prettier 的 api 对代码进行格式化操作
    prettier.format(jsSource, options).then(res=>{
        // 将格式化后的 js 代码重新写回到原来的文件
        fs.writeFileSync(sourcePath, res, 'utf-8');
    })
    console.log("格式化操作已经完成...");
}

在上面的代码中,我们调用了 prettier 的 format 方法来对 src/index.js 文件进行一个格式化,并且将格式化后的代码写回到原来的文件。

之后在 prettier-demo 项目中,我们需要在 package.json 中添加一条命令:

js 复制代码
"scripts": {
    // ...
    "formattool": "formattool"
},

之后我们就可以在控制台通过 pnpm formatool --write 对 src/index.js 文件进行格式化操作。

注意,我们上面所完成的代码只是一个最最基本的演示,目的是为了让大家明白 CLI 背后的原理其实就是获取用户在命令行所输入的参数,然后调用对应的 API。实际的 CLI 背后还会有更多的判断。

相关推荐
哆啦A梦的口袋呀9 分钟前
基于Python学习《Head First设计模式》第六章 命令模式
python·学习·设计模式
谢尔登17 分钟前
【React】React 18 并发特性
前端·react.js·前端框架
Joker`s smile20 分钟前
使用React+ant Table 实现 表格无限循环滚动播放
前端·javascript·react.js
国家不保护废物25 分钟前
🌟 React 魔法学院入学指南:从零构建你的第一个魔法阵(项目)!
前端·react.js·架构
import_random27 分钟前
[机器学习]svm支持向量机(优势在哪里)
前端
国家不保护废物29 分钟前
从刀耕火种到现代框架:DOM编程 vs Vue/React 进化史
前端·vue.js·react.js
陈随易29 分钟前
Univer v0.8.0 发布,开源免费版 Google Sheets
前端·后端·程序员
不怎么爱学习的dan34 分钟前
实现 ECharts 多国地区可视化方案
前端
嘉小华34 分钟前
Android Lifecycle 状态同步与分发机制深度解析
前端
李三岁_foucsli40 分钟前
chrome架构-多进程和进程中的线程
前端·google