vue-linkto-vscode/add-location-loader/index.js

``` 引入只需如下三步 //1、install package npm install -s vue-linkto-vscode //2、vue.config.js const { vueCodeLinkServer, vueCodeLinkLoaderConfig } = require('vue-linkto-vscode') module.exports = { ... devServer: {

// 引入fs模块
var fs = require("fs");
const pathUtil = require("../utils/pathUtil.js");

module.exports = function (source) {
  // loader的上下文this对象包含一个resourcePath资源文件的路径属性
  const { resourcePath } = this;
  return sourceCodeChange(source, resourcePath);
};

function sourceCodeChange(source, resourcePath) {
  resourcePath = resourcePath.substring(pathUtil.projectBasePath.length); // 转换vue代码相对路径
  return codeLineTrack(source, resourcePath);
}
// 计算代码行号
function codeLineTrack(str, resourcePath) {
  let lineList = str.split("\n");
  let newList = [];
  //template标识，用于判断代码是否在template内，限制只处理tempalte下的代码
  let templateIndex = {
    index: 0,
  };
  lineList.forEach((item, index) => {
    newList.push(addLineAttr(item, index + 1, resourcePath, templateIndex)); // 添加位置属性，index+1为具体的代码行号
  });
  return newList.join("\n");
}

function addLineAttr(lineStr, line, resourcePath, templateIndex) {
  // 匹配标签:<div => <div code-location
  let reg = /(<[\w-]+)|(<\/template)/g;
  let leftTagList = lineStr.match(reg);
  if (leftTagList) {
    leftTagList = Array.from(new Set(leftTagList));
    leftTagList.forEach((item) => {
      if (item && item.indexOf("<template") !== -1) {
        templateIndex.index += 1;
      }
      if (item && item.indexOf("</template") !== -1) {
        templateIndex.index -= 1;
      }

      if (templateIndex.index > 0 && item && item.indexOf("template") == -1) {
        let regx = new RegExp(`${item}`, "g");
        let location = `${item} code-location="${resourcePath}:${line}"`;
        lineStr = lineStr.replace(regx, location);
      }
    });
  }
  return lineStr;
}