Vite 前端项目 - CSS变量智能提示

🚀 Vite 前端项目 - CSS变量智能提示

一个基于 Vite 的现代化前端项目，集成CSS变量智能提示功能

快速开始 • 功能特性 • 使用指南 • 配置说明

📋 项目概述

这是一个基于 Vite 的现代化前端项目，专注于提供优秀的开发体验。项目集成了完整的 CSS变量智能提示 功能，支持多主题切换，让您在编写样式时能够快速选择和使用全局CSS变量。

---

✨ 功能特性

🎨 CSS变量智能提示

• 🔍 智能补全 ：输入 var(-- 即可显示所有可用CSS变量
• 📝 详细描述：每个变量都有清晰的用途说明
• 🎯 快速选择：支持键盘导航和Enter确认
• 🌈 颜色预览：直观显示颜色变量的实际效果

🛠️ 开发体验优化

• ⚡ 零配置：开箱即用的智能提示功能
• 🔧 VSCode集成：完美配合VSCode编辑器
• 📦 插件推荐：自动推荐必需的VSCode插件
• 🎨 主题支持：支持亮色/暗色主题切换

---

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• VSCode 编辑器（推荐）

安装步骤

1. 克隆项目

git clone <repository-url>
cd vite-study

2. 安装依赖

npm install

3. 安装VSCode插件

   📌 必需插件 ：CSS Var Complete

   安装方式：

   • 在VSCode扩展商店搜索 "CSS Var Complete"
   • 或点击 VSCode插件链接

4. 启动开发服务器

npm run dev

---

🎯 使用指南

CSS变量智能提示使用

步骤1：创建CSS变量定义文件

创建 src/styles/variables.css 文件，定义所有全局CSS变量：

/* 全局CSS变量定义 - 用于智能提示 */
:root {
  /* 主要颜色 */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* 背景和文本 */
  --background-color: #f5f7fa;
  --text-color: #333;
  
  /* 卡片和边框 */
  --card-bg: #ffffff;
  --border-color: #e0e0e0;
  
  /* 阴影 */
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* 自定义变量 */
  --guojie: ;
}

/* 深色主题 */
[data-theme="dark"] {
  --primary-color: #2980b9;
  --secondary-color: #27ae60;
  --background-color: #1a1a2e;
  --text-color: #f0f0f0;
  --card-bg: #16213e;
  --border-color: #34495e;
  --shadow-color: rgba(0, 0, 0, 0.3);
}

步骤2：配置VSCode智能提示

创建 .vscode/settings.json 文件，配置VSCode智能提示：

{
  "css.validate": true,
  "files.associations": {
    "*.css": "css",
    "*.less": "less",
    "*.scss": "scss"
  },
  "cssvar.files": [
    "src/styles/variables.css"
  ],
  "cssvar.exclude": [
    "**/node_modules/**"
  ]
}

步骤3：在样式文件中引入变量

在需要使用CSS变量的样式文件顶部引入变量定义：

/* 引入全局CSS变量以获得智能提示 */
@import '../styles/variables.css';

.my-component {
  /* 输入 var(-- 时会显示所有可用的CSS变量 */
  color: var(--text-color);
  background: var(--background-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px var(--shadow-color);
}

使用方法

1. 🔄 重启VSCode - 确保配置生效
2. ⌨️ 在CSS文件中输入 var(-- - 会显示所有可用的CSS变量列表
3. 🎯 选择变量 - 使用键盘上下键选择，按Enter确认
4. 👁️ 查看描述 - 每个变量都有详细的描述和颜色值说明

---

📊 可用的CSS变量

变量名	描述	默认值	预览
--primary-color	主题主色调	#3498db	🎨
--secondary-color	主题次要颜色	#2ecc71	🎨
--background-color	页面背景颜色	#f5f7fa	🎨
--text-color	文本颜色	#333	🎨
--card-bg	卡片背景颜色	#ffffff	🎨
--border-color	边框颜色	#e0e0e0	🎨
--shadow-color	阴影颜色	rgba(0, 0, 0, 0.1)	🎨
--guojie	自定义变量	-	📝

---

⚙️ 配置说明

VSCode 推荐配置

为了获得最佳开发体验，建议在 .vscode/settings.json 中添加以下配置：

{
  "css.validate": true,
  "css.lint.unknownProperties": "warning",
  "files.associations": {
    "*.css": "css",
    "*.less": "less",
    "*.scss": "scss"
  },
  "cssvar.files": [
    "src/styles/variables.css"
  ],
  "cssvar.exclude": [
    "**/node_modules/**",
    "**/dist/**"
  ],
  "emmet.includeLanguages": {
    "css": "css"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

推荐VSCode插件列表

创建 .vscode/extensions.json 文件，自动推荐必需插件：

{
  "recommendations": [
    
  ]
}

---

📚 参考资源

• 📖 CSS Var Complete 插件文档
• 🎨 CSS自定义变量指南
• ⚡ Vite 官方文档

---

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

---

⭐ 如果这个项目对你有帮助，请给它一个星标！

Made with ❤️ by guojie