关于vscode插件:VSCode-样式格式化

在应用 VSCode 的插件进行 less 文件格式化的时候，发现会存在问题。

index.less

@prefix: test;

@{prefix}-input{
    color :red;
    width :     @base-with;
    height :         @base-height;
}

@base-size : 10px;
@base-with : @base-size + 2px;
@base-height : @base-with + 3px;

存在的问题

1. 合并 + 号和数组

格式化后为:

@prefix: test;

@{prefix}-input {
    color: red;
    width: @base-with;
    height: @base-height;
}

@base-size : 10px;
@base-with : @base-size +2px;
@base-height : @base-with +3px;

编译后为

尽管没有报错，然而不是你想要的后果, 如果要对变量做运算的话，则会报错

@base-height : @base-with * 2;

波及的插件:

2. @{prefix} 和 - 两头会被插入空格

格式化后为:

@prefix: test;

@{prefix} -input {
  color: red;
  width: @base-with;
  height: @base-height;
}
@base-size: 10px;
@base-with: @base-size + 2px;
@base-height: @base-with + 3px;

编译后为:

波及的插件:

3. 会拆分 ${prefix}

格式化后为:

@prefix: test;
@ {prefix}

-input {
    color: red;
    width: @base-with;
    height: @base-height;
}

@base-size : 10px;
@base-with : @base-size + 2px;
@base-height : @base-with * 2;

编译失败:

波及的插件:

4. 格式化报错,CssSyntaxError: Unknown word

波及的插件:

5. 格式化报错,Now Validation Error

波及的插件:

解决方案

基于 js-beautify 开发了一套 VSCode 插件, 插件商店里搜寻 ”formats less”

格式化后为:

@prefix: test;

@{prefix}-input {
    color: red;
    width: @base-with;
    height: @base-height;
}

@base-size : 10px;
@base-with : @base-size + 2px;
@base-height : @base-with + 3px;

编译为: