Outline Config VSCode 扩展

特性

• 点击来快速跳转到常见方法的所在代码 (比如常见的生命周期函数... 支持配置)

介绍

开发该组件针对于这个文件里面代码量太大,快速定位到自己要修改/查看的方法题

比如一个js文件几百上千行代码,想要找到render(),componentDidMount()...方法 - 都需要搜索或者滑动好一会才能找到,因此做了一个可以配置当前文件常用方法的快速跳转功能,点击就能快速跳转到对应方法体的代码区域

配置

• 插件默认配置了react和vue的常见生命周期

  •  [
         "constructor",
         "initData",
         "componentDidMount",
         "componentDidUpdate",
         "render",
         "created",
         "watch",
         "mounted",
         "updated"
       ] 
    

• 支持配置可以自己在vscode的settings.json配置

  • 参考配置:

  {
      "outlineConfig.methods":[
          "constructor",
          "initData",
          "componentDidMount",
          "componentDidUpdate",
          "render",
          "created",
          "watch",
          "mounted",
          "updated",
          "renderMainVendor",
          "renderMainVendorNew",
          "renderServiceBottomView",
          "renderServiceBottomViewNew",
      ],
  }
  

  • 可以根据当前需求动态配置一些常见的方法,这样也能提高找代码的时间

参考使用方法

我是把视图放在右上角点击,用户可以按个人喜好更改