less-plugin-chris (适用 vue, 如果设置变量文件 失败 请更新插件 > 0.0.15 )配置(设置项目的变量文件)可在less 或者 js 目录文件右击或者 在 less、js 文件编辑区右击(如果右击 无效 请更新 vsocde 帮助> 检查更新) js 变量文件注意, 如果js 设置无效,请参考以下 配置(设置项目的全局类型)设置 > 拓展 > less-plugin-chris 功能1. less 变量 codeLens有时候我们定义了一些全局的 less 变量,但由于种种原因,如项目成员不清楚已有这样的一堆变量或者对这些变量不熟悉,直接从交互稿上直接复制一些 css 代码等,导致定义好的变量没有被用到,这种情况我们可以通过 codeLens 在页面中给用户一些提示信息,并为用户提供点击使用变量替换原来的值的功能。 note! 支持颜色转换(rgb rgba keyword HEX 等)之间对等替换 (注意rgb和gaba括号前后及内部不要有空格,下一步再优化)2. less 变量补全在键入 less 变量的值时,可根据配置的全局 less 变量文件进行 less 变量的补全。 3. less 变量 hover 提示当 hover 在 less 变量上,会进行对应的键值对提示。 4. className 自动补全有时候,我们提前定义好一些全局或者是各个组件的样式文件,然后再到 jsx 中去填写 className。这时经常会出现一些令人十分痛苦的情况,例如忘记了定义好的 className,或者是拼写错误导致样式不生效 less-helper-chris 能够帮助我们在填写 jsx 的 className 时,根据 impor 的 less 文件和配置的全局样式文件进行补全提示。 5. 通过别名补全 className( 暂时没有用,下一步完善)但有时候,全局样式文件中的一些 className 难以记住,这时我们可以通过别名识别某个 className。我们可以在全局 className 的前一行敲入 ad 来键入一个代码片段,用于填写别名和 className 的描述,然后就可以通过设置的别名来进行 className 的补全。 6. 自动补全 less 文件的 className( 暂时没有用,下一步完善)根据同级以及 vscode 中已打开的 jsx、tsx 文件,自动补全 less 文件的 className。 FAQ本项目参考了多个项目的功能,如果又什么问题请提交 issues,我的宝贵意见我会抽空优化改正,感谢 |