vscode常用插件

ident-rabow

https://github.com/oderwat/vscode-indent-rainbow

 

 安装完成后的默认效果

 

setting.json中配置如下：如果修改了配置，需要重启vscode新的配置才会生效。

{
"indentRainbow.includedLanguages":["javascript"], // 要应用到的语言类型，默认[]，例如 ["javascript", "typescript", "python"]，空数组表示全部
  "indentRainbow.excludedLanguages":[  // 指定不应用的语言类型 默认["typescript"]，空数组表示无
    "plaintext"
  ],
  "indentRainbow.ignoreErrorLanguages":[ // 以下类型的文件中 indentRainbow.errorColor 字段不起作用。默认 ["markdown"]
    "markdown"
  ],
  "indentRainbow.updateDelay":100, // 延迟时间ms，默认100
  // "indentRainbow.indentSetter":{}, // 这个参数目前没有用
  // 当从第0列到第一个字符间的空格数量不是设置的缩进的整数倍时，这一行的缩进空格要显示的颜色。默认 "rgba(128,32,32,0.6)", ""空字符串表示使用默认值
  "indentRainbow.errorColor": "rgba(255,0,0,0.8)",
  // 当缩进空白中同时有空格和tab时，要显示的颜色。默认"rgba(128,32,96,0.6)"。""表示不显示颜色。
  "indentRainbow.tabmixColor":"rgba(0,255,0,0.9)",
  // 这一行的文本如果满足以下正则，就不显示错误的颜色(indentRainbow.errorColor字段不起作用)。
  // 默认 ["/[ \t]* [*]/g", "/[ \t]+[/]{2}/g"]
  "indentRainbow.ignoreLinePatterns":[
    "/[ \t]* [*]/g",
    "/[ \t]+[/]{2}/g" // 跳过 空白 + 注释
  ],
  // 缩进的背景色，默认 ["rgba(255,255,64,0.07)","rgba(127,255,127,0.07)","rgba(255,127,255,0.07)","rgba(79,236,236,0.07)"]
  // 从整个文件的第0列开始算起，当设置的颜色数量小于缩进的层数时，循环使用列表中设置的颜色。
  // 颜色支持 hex, rgba, rgb 这三种。数量可任意多
  "indentRainbow.colors":[ 
    "rgba(255,255,64,0.07)",
    "rgba(127,255,127,0.1)",
    "rgba(255,127,255,0.13)",
    "rgba(79,236,236,0.16)",
    "rgba(79,236,236,0.19)",
    "rgba(79,236,236,0.22)",
    "rgba(255,0,0,0.3)",
    "rgba(255,0,0,0.5)",
    "rgba(255,0,0,0.7)",
    "rgba(255,0,0,0.7)",
    "rgba(255,0,0,0.7)",
    "rgba(255,0,0,0.7)",
  ],
  // 没测出来这个配置有什么用
  // "indentRainbow.colorOnWhiteSpaceOnly":false,

  // 缩进的类型，light表示使用竖线表示缩进，classic 表示使用背景色填充来表示。
  "indentRainbow.indicatorStyle":"classic",
  // 当indicatorStyle为light时，表示线条的宽度 px
  "indentRainbow.lightIndicatorStyleLineWidth":1,
}

"indentRainbow.errorColor": "rgba(255,0,0,0.8)" 设置为红色的效果。注意，只有当缩进不是整数倍时(如下图中那一行中就多了一个空格)才显示错误颜色。

缩进用竖线表示还是背景色表示，这个错误颜色都显示为背景色。

 

 

 "indentRainbow.ignoreLinePatterns": ["/[ \t]* [*]/g", "/[ \t]+[/]{2}/g"] ，如果值不是字符串则跳过。如果是 /.../img 这样的则是 new Regexp(..., img) 否则直接 new Regexp(str)

如 "/[ \t]+[/]{2}/g" 表示 /[ \t]+[/]{2}/g，“abc” 表示 /abc/。所有本来应该渲染为错误行的，如果这一行的文本匹配了这些正则中的某一个，则跳过错误颜色的渲染。