告别在 vue 中使用公共 less 文件没有提示信息的烦恼

痛点：Vue项目中Less开发的困扰

作为一名Vue开发者，当你同时使用Less作为样式预处理器时，是否经常遇到这些令人抓狂的问题：

变量提示缺失 ：在Vue单文件组件的<style lang="less">标签中，输入@想引用Less变量时，VSCode没有任何智能提示
混入函数找不到 ：使用.border-radius()这样的Less混入时，需要手动查看定义文件
跳转定义困难：想查看某个Less变量的定义位置？只能全局搜索
错误难以发现：拼写错误的变量名要到编译时才报错，打断开发流程

解决方案：easier-less提示增强版

我fork了原有的easier-less插件，只是在此基础上加了一些细节，新增了一些功能。

在项目的 .vscode/settings.json 中加上了 less 文件地址后，即可拥有以下支持。

🚀 核心特性

1. 智能变量提示

在Vue文件的Less样式中输入@，立即显示所有可用变量
支持颜色变量的颜色预览

2. 混入函数支持

输入.即可看到所有可用的混入函数
支持参数提示

3. 定义跳转

Ctrl+点击变量名直接跳转到定义位置
支持跨文件的定义跳转

📦 安装方式

方法一：VSCode扩展商店（推荐）

打开VSCode
进入扩展商店（Ctrl+Shift+X）
搜索"easy-use-less-vue"
点击安装

方法二：手动安装

bash 复制代码

# 克隆仓库
git clone https://github.com/dmxiaoshubao/easier-less.git

# 进入目录
cd easier-less

# 安装依赖
yarn

# 打包
npm run compile

# 在VSCode中按F5运行测试，然后打包成vsix安装

⚙️ 快速配置

在项目根目录创建或修改.vscode/settings.json：

json 复制代码

{
  "less.suppressNotice": true,
  "less.files": [
    "./src/styles/variables.less",
    "./src/styles/mixins.less"
  ]
}

🎯 使用示例

场景一：智能变量提示

在variables.less中定义：

less 复制代码

@primary-color: #1890ff;
@border-radius: 4px;

在Vue组件中使用时：

vue 复制代码

<style lang="less">
.container {
  background-color: @primary-color; // 输入@时会有提示
  border-radius: @border-radius;
}
</style>

场景二：混入函数支持

在mixins.less中定义：

less 复制代码

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用时获得完整提示：

vue 复制代码

<style lang="less">
.card {
  .flex-center(); // 输入.时会有提示
}
</style>

🐛 常见问题解决

Q: 插件没有生效？ A: 检查：

VSCode已重启
文件语言模式设置为"Vue"
style标签有lang="less"属性

Q: 变量提示不完整？ A: 确保变量文件路径配置正确，文件已保存。

Q: 有提示写了但是报错？ A: 需要在 <style lang="less"></style>中自行引入该公共 less 文件。 eg: @import (reference) from '@/assets/styles/mixin.less'; 本插件只作提示信息使用。

🤝 参与贡献

如果你发现bug或有改进建议：

访问 GitHub仓库
提交Issue或Pull Request
参与功能讨论

🎉 开始使用

不要再让样式开发成为你的瓶颈！安装easier-less提示增强版，体验流畅的Vue+Less开发流程。

bash 复制代码

# 或者直接通过VSIX安装
code --install-extension easier-less-enhanced.vsix

提升开发效率，从更好的工具开始。现在就尝试这款专为Vue开发者打造的Less增强插件吧！

如果你觉得这个插件有帮助，欢迎在GitHub上给我一个Star⭐，这对我非常重要！

项目地址：github.com/dmxiaoshuba...

有任何问题或建议，欢迎在Issues中讨论！