vscode 配置并使用less 控制台显示less行数

vscode 配置并使用less 控制台显示less行数

## 安装

• 打开vscode软件中的扩展商店 搜索 easy less

• 点击进行安装
  

• 检测是否安装成功

  • 新建一个后缀为“ .less ”的文件
  • 进行编写随意一些css代码并进行保存
  • 此时 当前less文件下自动生成一个“ .css”的文件既安装成功

配置 实现浏览器中显示 less文件中样式 行数

未配置前控制台显示的为编译后css文件中的样式
为了更好的定位到less 中的样式 进行配置改变控制台显示是提高效率的必然途径

• 首先打开扩展商店点击已安装的扩展（没安可直接搜索）找到 easy less 扩展程序

• 展示的详细页中 右侧的设置 再次点击 扩展设置

• 

• 此时会跳转到设置页面

• 点击 settings.js 跳转到该配置文件中
• 将以下代码进行复制粘贴即可 配置间需要逗号隔开否则报错

"less.compile": {
        "compress": false,//是否压缩
        "sourceMap": true,//是否生成map文件，有了这个可以在调试台看到less行数
        "out": true, // 是否输出css文件，false为不输出
        "outExt": ".css", // 输出文件的后缀

• 如上代码已经列举含义自行开启关闭

• 最后在控制台中查看样式 出现 less样式的行数既配置成功

bye-bye