用于在I18n项目中快速定位到DOM的插件

最近在开发一个国际化项目,是从一个

项目迁移过来的, 前同事估计是用的什么插件一键生成的翻译，翻译的命名都是很随意的,

这造成我在开发时想在编辑器中快速定位到某个位置上时，有些困难。因为一般中文的网页，直接在VSCode中搜索页面上的中文是最快的定位方式，但是由于使用i18n，代码中dom部分的字符并不能直接搜索到。于是在想有没有什么插件能够直接搜索英文 然后编辑器能自动定位到文件的使用该英文的部分，感觉这个功能开发起来也不难，于是正好本着学习VSCode插件开发的想法，就不调研了， 直接开写~

没啥好说的 网上教程一大堆 基本都是用

然后根据需求来选择不同的配置即可一键生成项目框架

开发直接使用VSCode自带的运行和调试即可，选择

核心逻辑是 输入页面中的英文 ⇒ 到

 这段文字，查找到就将VSCode光标跳转过去

1. 获取用户输入的想查询的英文

//查询的内容
const searchValue = await vscode.window.showInputBox({
	prompt: "输入要查询的英文",
	placeHolder: "Search...",
	value: "", // 设置默认值
});

2. 根据英文去JSON文件中查找对应的Key

async function getJSON(langFolder: "en" | "cn") {
  const activeEditor = vscode.window.activeTextEditor; // 当前打开的编辑器Tab
  const fileUri = activeEditor?.document.uri; // 编辑器Tab打开的文件
  if (!fileUri) {
    vscode.window.showErrorMessage("No active file");
    return;
  }
  const rootPath = vscode.workspace.getWorkspaceFolder(fileUri); // 获取工作区的路径
  if (!rootPath) {
    vscode.window.showErrorMessage("No workspace folder found.");
    return;
  }

/* i18n文件夹目录结构
--src
 --locale
	--en
		--a.json
		--b.json
	--cn 
		--c.json
*/

  const localeFolderPath = path.join(rootPath.uri.fsPath, "src/locale"); 
  const targetFolderPath = path.join(localeFolderPath, langFolder);// 存放JSON文件的文件夹路径
  /* 这个函数可以视作没用，因为原先的业务中JSON文件是嵌套存储的，这里是为了深度遍历，获取每个JSON文件的路径，后来改成扁平化结构了也就没用了*/
	const targetFolderPaths = getAllFiles(targetFolderPath);
  
  return  targetFolderPaths;
}

// 根据查询的内容查到的key (可能有多个)
const searchKeys = getKeys(searchValue, enFolderPaths!);
	if (!searchKeys || !searchKeys.length) {
	return;
}

3. 在当前文件中查找是否存在 刚才得到的JSON.key

const activeEditor = vscode.window.activeTextEditor;
if (!activeEditor) {
	return;
}
const editorContent = activeEditor.document.getText();

3.2 对内容进行匹配 看是否存在

const matchRes: Array<{ start: number; end: number }> = []; // 使用数组存储 这样一会设置光标后，可以使用编辑器的前进回退功能
let match;
/*
	每个JSON.key都在文件中搜
  并且如果这个JSON.key搜到了也别停，因为这个JSON.key可能在文件内多处使用
*/
searchKeys.forEach((key: string) => {
	const searchRegex = new RegExp(`\\b${key}\\b`, "g");
	while ((match = searchRegex.exec(editorContent)) !== null) {
		matchRes.push({ start: match.index, end: match.index + key.length });
  }
});


if (matchRes.length === 0) {
  vscode.window.showInformationMessage("No matches found.");
  return;
}
// 每个都匹配到的位置都设置一下光标， 方便前进后退查看
matchRes.forEach((match) => {
  const startPosition = activeEditor.document.positionAt(match.
  const endPosition = activeEditor.document.positionAt(match.en
  activeEditor.selection = new vscode.Selection(
    startPosition,
    endPosition
  );
});
// 将第一个位置作为最终光标的位置
const firstMatchPosition = {
  start: activeEditor.document.positionAt(matchRes[0].start),
  end: activeEditor.document.positionAt(matchRes[0].end),
};
activeEditor.selection = new vscode.Selection(
  firstMatchPosition.start,
  firstMatchPosition.end
);
activeEditor.revealRange(
  new vscode.Range(firstMatchPosition.start, firstMatchPosition.end)
);

这个网上教程很多，简单记录下

接着需要配置一下package.json文件，

publisher, displayName,icon,activationEvents,contributes

 等等，具体可以看仓库中我的配置

vsce login [publisherName] 然后输入Token

🆚开发一个VSCode插件

记录一次对十万量级数据操作的优化

2. 两数相加

proxy

❓如何一个端口下运行多个项目？

整理一下各种配置代理

功能

需求

项目初始化

实现

1. 获取用户输入的想查询的英文

2. 根据英文去JSON文件中查找对应的Key

2.1 获取JSON文件

2.2 在JSON文件里寻找符合的Key

3. 在当前文件中查找是否存在刚才得到的JSON.key

3.1 获取当前打开的文件的内容

3.2 对内容进行匹配看是否存在

3.3 设置VSCode光标

部署

功能

需求

项目初始化

实现

1. 获取用户输入的想查询的英文

2. 根据英文去JSON文件中查找对应的Key

2.1 获取JSON文件

2.2 在JSON文件里寻找符合的Key

3. 在当前文件中查找是否存在 刚才得到的JSON.key

3.1 获取当前打开的文件的内容

3.2 对内容进行匹配 看是否存在

3.3 设置VSCode光标

部署

3. 在当前文件中查找是否存在刚才得到的JSON.key

3.2 对内容进行匹配看是否存在