Vue automatically writes comments

The project is about to be delivered recently, and there is a requirement for 30% of the comment volume, so I wrote a script with node.js to generate it automatically. Let's look at the code next.

1. Create a new folder

I am here to create new scripts, which are at the same level as src, and put a js file in it

2. Add-comment.js content

Here is to match the .vue suffix in the folders and files in views under src, and add a new line of comments on el-button;

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

const viewsDir = path.resolve(__dirname, "../src/views"); // views 文件夹路径
const commentText = "这是一个功能按钮;"; // 要添加的注释内容

// 遍历 views 文件夹下的所有文件和文件夹
fs.readdir(viewsDir, { withFileTypes: true }, (err, entries) => {
  if (err) {
    console.error(err);
    return;
  }

  entries.forEach((entry) => {
    const entryPath = path.join(viewsDir, entry.name);

    if (entry.isFile() && path.extname(entry.name) === ".vue") {
      // 如果是 .vue 文件
      const filePath = entryPath;

      // 读取文件内容
      fs.readFile(filePath, "utf8", (err, data) => {
        if (err) {
          console.error(err);
          return;
        }

        // 在 <el-button> 标签上方添加注释
        const regex = /(<el-button[\s\S]*?>)/g;
        const lines = data.split("\n");
        let updatedData = data;
        let offset = 0;
        let lastLineIndex = -1;

        for (let i = 0; i < lines.length; i++) {
          const line = lines[i];
          const match = regex.exec(line);
          if (match && !/<!--.*?-->/.test(line)) {
            lastLineIndex = i;
            break;
          }
        }

        if (lastLineIndex !== -1) {
          const insertPos = lines.slice(0, lastLineIndex + 1).join("\n").length;

          updatedData = data.slice(0, insertPos) + `\n<!-- ${commentText} -->` + data.slice(insertPos);

          // 将注释添加到文件中
          fs.writeFile(filePath, updatedData, (err) => {
            if (err) {
              console.error(err);
              return;
            }

            console.log(`已为 ${filePath} 添加注释`);
          });
        }
      });
    } else if (entry.isDirectory()) {
      // 如果是文件夹，则遍历文件夹内的 .vue 文件
      fs.readdir(entryPath, (err, files) => {
        if (err) {
          console.error(err);
          return;
        }

        files.forEach((file) => {
          if (path.extname(file) === ".vue") {
            const filePath = path.join(entryPath, file);

            // 读取文件内容
            fs.readFile(filePath, "utf8", (err, data) => {
              if (err) {
                console.error(err);
                return;
              }

              // 在 <el-button> 标签上方添加注释
              const regex = /(<el-button[\s\S]*?>)/g;
              const lines = data.split("\n");
              let updatedData = data;
              let offset = 0;
              let lastLineIndex = -1;

              for (let i = 0; i < lines.length; i++) {
                const line = lines[i];
                const match = regex.exec(line);
                if (match && !/<!--.*?-->/.test(line)) {
                  lastLineIndex = i;
                  break;
                }
              }

              if (lastLineIndex !== -1) {
                const insertPos = lines.slice(0, lastLineIndex + 1).join("\n").length;

                updatedData = data.slice(0, insertPos) + `\n<!-- ${commentText} -->` + data.slice(insertPos);

                // 将注释添加到文件中
                fs.writeFile(filePath, updatedData, (err) => {
                  if (err) {
                    console.error(err);
                    return;
                  }

                  console.log(`已为 ${filePath} 添加注释`);
                });
              }
            });
          }
        });
      });
    }
  });
});

3. Configuration command 

in package.json

Finally, type in the console

npm run add-comment 

 You can get annotations.

you can do whatever you want