关于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;

编译为: