如何解决在 VS Code 中 LESS 编写过程中变量无法提示的问题-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，拥有变量、函数、混合等便捷特性，为前端开发者的工作提供了很大的便利。但是在使用 LESS 进行开发时，很可能会遇到变量无法提示的情况，这会极大地影响开发效率。本文将介绍如何解决在 VS Code 中 LESS 编写过程中变量无法提示的问题。

问题描述

在使用 LESS 进行开发时，如果在 CSS 文件中使用了变量，当我们输入变量时，往往不能自动提示已定义的变量名和变量值。这就会使我们在编写样式时经常出现语法错误，导致开发效率低下，增加调试难度。

例如，我们定义了一个 LESS 变量：

@primary-color: #0070f3;

然后我们在样式中使用这个变量：

.button {
  background-color: @primary-color;
}

在 VS Code 中输入 @pri 时，并不能自动提示已有的变量，如下图所示：

解决方法

解决在 VS Code 中 LESS 编写过程中变量无法提示的问题，可以按照以下步骤操作：

安装vscode-less插件

vscode-less是一个 VS Code 插件，它可以提供 LESS 文件的语法高亮、自动完成、代码折叠等功能。打开 VS Code 的插件市场，搜索vscode-less并安装。

配置settings.json文件

在 VS Code 中按下 Ctrl + Shift + P（在 macOS 上为 Cmd + Shift + P），输入“Open Settings（JSON）”，打开用户设置 JSON 文件。在其中添加以下配置代码：

// javascriptcn.com 代码示例
"less.compile": {
  "out": "${fileDirname}/${fileNameNoExt}.css",
  "sourceMap": true,
  "strictMath": false,
  "sourceMapRootpath": "",
  "relativeUrls": false,
  "globalVars": {
    "primary-color": "#0070f3"
  }
}

其中，out表示输出文件的路径，globalVars为全局变量列表，可以将定义的变量名和变量值写在其中，如上面的例子中的 primary-color。

重启 VS Code

在完成以上步骤后，重新启动 VS Code，在 LESS 文件中可以输入定义的变量名并且自动提示对应的变量值了。

例如，我们输入 @pri 时，就会自动提示已有的变量名和变量值，如下图所示：

总结

在 LESS 文件中使用全局变量是一种常见的做法，但是在 VS Code 中使用时，经常会遇到无法自动提示变量的问题，大大降低了开发效率。通过安装vscode-less插件并配置settings.json文件，我们可以解决这个问题，提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6539c4dc7d4982a6eb3449aa