需求背景

在开发vue2的项目的时候，在业务场景比较大的情况下，相应的methods里面的方法会非常的多，查询起来也很不方便，vscode自带大纲，但是里面不需要的东西太多，于是想着能不能生成一个便于检索的大纲，最好是中文的，因为有些人会使用拼音作为变量，英文起码还能查单词，但是拼音如果对业务不熟悉只能猜。
一开始也是打算自己写一个，但是不知道怎么下手，直到看到了这个插件。至于怎么发现这个插件的都不记得了，不过使用下来感觉还是挺好，推荐一下。

codemap.vscode扩展

github地址

官方介绍

Interactive code map for quick visualization and navigation within code DOM objects (e.g. classes, members). 翻译过来是：用于在代码DOM对象（例如类、成员）内快速可视化和导航的交互式代码图。
还有最后有一句很总要的话，The main objective of this plugin is not to provide the most accurate CodeDOM (syntax tree) presentation but rather to assist with the navigation to the most important points in your code. Thus the default mappers deliberately avoid high resolution code parsing (e.g. local variables).翻译过来是：这个插件的主要目的不是提供最准确的CodeDOM（语法树）表示，而是帮助导航到代码中最重要的点。因此，默认映射器有意避免高分辨率代码解析（例如，局部变量）。

就是因为这个我觉得才比较适合，因为有时候不需要像vscode大纲那样很完整的树，只需要最想要的变量、方法等的导航就好。

安装

直接搜索codemap安装即可

然后输入代码时，codemap就可以生成默认的导航了

自定义导航规则

自定义导航的方法有两种：
setting.json配置文件

"codemap.md": [
      {
          "pattern": "^(\\s*)### (.*)",
          "clear": "###",
          "prefix": " -",
          "icon": "path:E:\\icons\\VSCode\\codemap\\{theme}\\custom_level_a.svg"
      }
]

这种方式适合简单正则就可以匹配的规则

mapper.js文件
通过一个js文件来自定义匹配规则

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require("fs");

class mapper {

    static read_all_lines(file) {
        let text = fs.readFileSync(file, 'utf8');
        return text.split(/\r?\n/g);
    }

    static generate(file) {
        let members = [];
        try {
            let line_num = 0; 
            let image_index = 1;
            mapper
                .read_all_lines(file)
                .forEach(line => {
                    line_num++;
                    line = line.trimStart();
                    if (line.startsWith("### "))
                        members.push(`${line.substr(4)}|${line_num}|level3`);
                    else if (line.startsWith("## "))
                        members.push(`${line.substr(3)}|${line_num}|level2`);
                    else if (line.startsWith("# "))
                        members.push(`${line.substr(2)}|${line_num}|level1`);
                    else if (line.startsWith("![image]"))
                        members.push(`<image ${image_index++}>|${line_num}|none`);
            });
        }
        catch (error) {
        }
        return members;
    }
}
exports.mapper = mapper;

具体的导航显示规则可以查看文档

自定义自己的中文导航

因为需要中文导航，但是我们不可能写方法的时候就使用中文，那么怎么样才可以又不影响代码，又可以写中文呢？没错，就是注释，只要给每个方法写上固定的注释，就可以根据相应的规则去解析出想要的导航，而且还可以便于理解代码，对于多人维护项目也是百利无一害的。这里，我只使用普通的jsdoc的注释方式，也可以用koroFileHeader插件配合生成。

有个vue文件的methods如图所示，要生成想要的导航，我们只需要获取注释的第二行的文字作为导航的标题就好了。

自定义的mapper_vue.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require("fs");

class mapper {
  static read_all_lines(file) {
    let text = fs.readFileSync(file, "utf8");
    return text.split(/\r?\n/g);
  }

  static generate(file) {
    let members = [];
    let isNote = false;
    try {
      let line_num = 0;
      mapper.read_all_lines(file).forEach((line) => {
        line_num++;
        line = line.trimStart();
        if (line.startsWith("/*")) {
          isNote = true;
        } else {
          if (isNote) {
            isNote = false;
            members.push(
              `${line.substring(2, line.length)}|${line_num}|function`
            );
          }
        }
      });
    } catch (error) {
      console.log();
    }
    return members;
  }
}
exports.mapper = mapper;

然后在setttings.json里面配置，只需要codemap.加上要处理的文件的后缀和mapper文件的地址即可

  "codemap.vue": "c:\\Users\\shilim\\Desktop\\work\\mapper_vue.js",

这个时候，就可以看到导航栏就是中文的注释导航了

自定义html区域划分导航，折叠注释

有时候，我们可能会有对部分的html划分功能，假设头部

<div>标题</div>
<div>导航栏</div>

像这个代码，我们想自定义导航，其实很简单，只要用一个注释包着就好，如下，识别开始 -->就好

<!-- 头部开始 -->
<div>标题</div>
<div>导航栏</div>
<!-- 头部结束 -->

但我们的代码肯定不止这么少，那我想要折叠这个怎么办呢？这个时候就是冷知识了，也不知道冷不冷，就是#region #endregion注释，这两个注释包裹的代码可以在注释的位置折叠，这样页面代码很多的时候就可以一键折叠自定义的功能模块的代码，不会碍眼啦。

总结

体验下来还是挺好用的，但是呢就是要写注释，但是这也是无害的，别人去维护你的代码的时候也是更加简单的，相对于来说你去维护别人的代码也是一样的。

推荐一款好用的vscode代码导航插件codemap.vscode