如何实现css变量中vscode编辑器中的类型提示

方法是利用TypeScript类型声明,并通过"模块扩展" (Module Augmentation)。,扩展标准 CSS 属性

  1. 创建类型声明文件,比如css.d.ts
  2. 声明自定义属性
typescript 复制代码
// 引入 'csstype' 以便扩展它
import 'csstype';

declare module 'csstype' {
  // 扩展 Properties 接口,它定义了所有合法的 CSS 属性
  interface Properties {
    // 在这里把你所有的 CSS 变量都列出来
    '--flood-font-family'?: string;
    '--flood-primary-color'?: string;
    '--flood-active-color'?: string;
    '--flood-border-color'?: string;
  }
}
  1. 在tsconfig中,引入类型声明文件
json 复制代码
 "include": [
    // ......
    "types/**/*.d.ts"
  ],
相关推荐
over6974 分钟前
弹性布局完全指南:从文档流到Flexbox实战
css
白兰地空瓶3 小时前
用 CSS3 造一场星际穿越:前端导演的《星球大战》片场手记
css
lh14245734953 小时前
ECSide标签<ec:table>表格对不齐问题处理
css·1024程序员节
加蓓努力我先飞4 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
UIUV4 小时前
《CSS3 星球大战》页面实现笔记:用代码演绎银河史诗
css·html
inx1775 小时前
HTML 敲击乐 PART--2
javascript·css
Tzarevich5 小时前
CSS3星球大战:前端代码界的视觉导演艺术
前端·css
繁花与尘埃5 小时前
CSS简介(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
黑云压城After7 小时前
3D魔方-Css实现方法
前端·css·3d
用户6600676685398 小时前
用 CSS3 导演一场星际穿越:复刻“星球大战”经典片头
前端·css