在使用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

格式化後為:

@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;

編譯為: