Code Template Snippets

English

A powerful VSCode extension providing commonly used code snippets, smart component generator, and Next.js page creator for React, TypeScript, and JavaScript development.

Installation

Open VSCode
Press Ctrl+P (macOS: Cmd+P)
Type: ext install TOPCODERFULLSTACK.code-template-snippets
Press Enter

Or install from VS Code Marketplace

Features

🚀 30+ code snippets for JavaScript, TypeScript, React
🎨 Smart component generator with Tailwind CSS integration
📄 Next.js App Router page generator - Create routes interactively
🎭 Theme Toggle component generator - Dark/Light mode with next-themes
🏷️ HTML Template Literals syntax highlighting - Full HTML support in tagged templates
✨ Word Highlighting - Enhanced double-click word highlighting with swapped colors
📁 Support for .js, .jsx, .ts, .tsx files
⚡ Smart placeholders with Tab navigation
💾 Multi-file selection with memory feature

All Keyboard Shortcuts

Shortcut	Command	Description
`Ctrl+Shift+T P` (macOS: `Cmd+Shift+T P`)	Create Next.js Page	Interactive Next.js App Router page
`Ctrl+Shift+T C` (macOS: `Cmd+Shift+T C`)	Smart Component Generator	Generate component with Tailwind CSS
`Ctrl+Shift+T T` (macOS: `Cmd+Shift+T T`)	Create Theme Toggle	Generate theme toggle component

Quick Start

Next.js App Router Page Generator

Shortcut: Ctrl+Shift+T P (macOS: Cmd+Shift+T P)

Create Next.js App Router pages interactively:

Features:

Interactive wizard for route creation
Auto-detect TypeScript/JavaScript
Multi-file selection (page, layout, loading, error, etc.)
Memory feature: remember your file preferences
Support for dynamic routes: [id], [slug], [...params]
Support for route groups: (auth), (marketing)

Example workflow:

Press Cmd+Shift+T P
Enter route name: blog
Select parent path: app/
Select files (default: page, layout, loading, error)
Optionally check "Remember my selection"
Press Enter

Creates:

app/blog/page.tsx
app/blog/layout.tsx
app/blog/loading.tsx
app/blog/error.tsx

Smart Component Generator

Shortcut: Ctrl+Shift+T C (macOS: Cmd+Shift+T C)

Generate React components with Tailwind CSS utilities automatically:

// In Button.tsx, press Cmd+Shift+T C
import { cn, ComponentProps } from "@/lib/utils";

export const Button = ({ className, style }: ComponentProps) => {
  return (
    <div className={cn("", className)} style={style}>
      Button
    </div>
  );
};

Prerequisites: Install required packages

npm install clsx tailwind-merge

Theme Toggle Component Generator

Shortcut: Ctrl+Shift+T T (macOS: Cmd+Shift+T T)

NEW - Quickly generate a complete theme toggle component with dark/light mode support:

Features:

One-click generation of ThemeToggle component
Automatic creation of ThemeProvider wrapper
Built with next-themes for seamless theme switching
Supports system theme preference
Includes Sun/Moon icons
Ready-to-use TypeScript support

Prerequisites: Install next-themes

npm install next-themes
# or
pnpm add next-themes
# or
yarn add next-themes

Usage:

Press Cmd+Shift+T T anywhere in your Next.js project
Choose component location (default: components/)
Two files will be created:
- components/ThemeToggle.tsx - The toggle button component
- components/ThemeProvider.tsx - The theme context provider
Wrap your app with ThemeProvider in app/layout.tsx:

import { ThemeProvider } from '@/components/ThemeProvider'

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Use ThemeToggle component anywhere:

import { ThemeToggle } from '@/components/ThemeToggle'

export default function Header() {
  return (
    <header>
      <ThemeToggle />
    </header>
  )
}

Word Highlighting

NEW - Enhanced word highlighting with swapped foreground and background colors for better visibility!

When you double-click a word in the editor, VSCode highlights all occurrences with a subtle background color. However, finding these highlighted words can be difficult with only a faint color change.

This extension provides an enhanced highlighting feature that swaps the text color and background color, making it much easier to spot all occurrences of the selected word.

Features:

Automatically activates on double-click
Swaps foreground and background colors for maximum contrast
Adds a subtle border and bold font for emphasis
Shows occurrence count in the status bar
Automatically updates when theme changes
Works with all programming languages

Usage:

Simply double-click any word to highlight all occurrences
Click elsewhere or double-click another word to clear/change highlighting
Use the command palette: Highlight Current Word for manual triggering

Example: When you double-click on a variable name like userName, all instances of userName in the current file will be highlighted with inverted colors (text becomes background color, background becomes text color), making them instantly visible.

HTML Template Literals Support

NEW - Full syntax highlighting and IntelliSense for HTML inside tagged template literals!

This extension now provides complete HTML support when using the html tagged template literal pattern. This is perfect for building web components, lit-html, or any framework that uses HTML template strings.

Features:

Full HTML syntax highlighting in template literals
HTML tag and attribute IntelliSense
Automatic HTML formatting on save - Respects your editor.formatOnSave setting
Manual formatting - Press Shift+Alt+F or right-click > Format Document
Variable interpolation support with ${}
Works in .js, .jsx, .ts, and .tsx files

Example:

// Automatic HTML syntax highlighting and formatting!
const navbar = html`
  <nav class="nav">
    <div class="container">
      <!-- HTML comments work! -->
      <div class="nav__left">
        <button class="nav__menu-btn" id="mobile-menu-btn" aria-label="Open menu">
          <i class="uil uil-bars"></i>
        </button>
        <div class="nav__logo">${logoText}</div>
      </div>

      <!-- Variables are properly highlighted -->
      <div class="nav__search-container">
        ${searchBar}
      </div>

      <div class="nav__create">
        <label for="create-post" class="btn btn--primary">Create</label>
        <button class="nav__messages-btn" id="messages-menu-btn">
          <i class="uil uil-comment-dots"></i>
        </button>
        <div class="profile__avatar">
          <img src="${userAvatar}" alt="profile photo">
        </div>
      </div>
    </div>
  </nav>
`;

How it works:

Simply tag your template literal with html
The extension automatically detects and applies HTML syntax highlighting
Variables inside ${} maintain TypeScript/JavaScript syntax highlighting
Automatic formatting: Enable "editor.formatOnSave": true in your VSCode settings to format on save
Manual formatting: Press Shift+Alt+F (or right-click > Format Document)
No additional configuration needed - it just works!

Enable format on save (in .vscode/settings.json or User Settings):

{
  "editor.formatOnSave": true
}

Use cases:

lit-html / Lit components
Web Components with template strings
Vanilla JS DOM manipulation
Any framework using HTML template literals

Code Snippets

Type prefix and press Tab:

Console Methods (18 snippets)

Basic Logging

Prefix	Output	Description
`clg`	`console.log()`	Log message
`cwn`	`console.warn()`	Warning message
`cer`	`console.error()`	Error message
`cin`	`console.info()`	Info message
`cdb`	`console.debug()`	Debug message

Data Display

Prefix	Output	Description
`cdr`	`console.dir()`	Display object properties
`ctb`	`console.table()`	Display data as table

Performance Timing

Prefix	Output	Description
`ctm`	`console.time()`	Start timer
`ctme`	`console.timeEnd()`	End timer
`ctml`	`console.timeLog()`	Log timer
`ctms`	`console.timeStamp()`	Add timestamp

Grouping

Prefix	Output	Description
`cgp`	`console.group()`	Start group
`cgpc`	`console.groupCollapsed()`	Start collapsed group
`cgpe`	`console.groupEnd()`	End group

Counting & Tracing

Prefix	Output	Description
`cct`	`console.count()`	Count calls
`cctr`	`console.countReset()`	Reset counter
`ctc`	`console.trace()`	Stack trace

Utilities

Prefix	Output	Description
`ccl`	`console.clear()`	Clear console

Function Snippets

Prefix	Description	Output
`fn`	Function declaration	`function name() {}`
`afn`	Async function declaration	`async function name() {}`
`fna`	Arrow function	`const name = () => {}`
`afna`	Async arrow function	`const name = async () => {}`
`fnc`	Closure function	`function outer() { return function inner() {} }`
`fnca`	Closure arrow function	`const outer = () => { return () => {} }`
`fni`	IIFE function	`(function() {})()`
`fnia`	IIFE arrow function	`(() => {})()`

Control Flow Snippets

Prefix	Description	Output
`if`	If statement	`if (condition) {}`
`ife`	If else statement	`if (condition) {} else {}`
`ifel`	If else if statement	`if (condition) {} else if (condition) {} else {}`
`ter`	Ternary operator	`condition ? trueValue : falseValue`
`swc`	Switch statement	`switch (expression) { case value: break; }`
`try`	Try catch block	`try {} catch (error) {}`
`tryf`	Try catch finally block	`try {} catch (error) {} finally {}`

Loop Snippets

Prefix	Description	Output
`for`	For loop	`for (let i = 0; i < array.length; i++) {}`
`foe`	forEach loop	`array.forEach((item) => {})`
`fori`	For in loop	`for (const key in object) {}`
`foro`	For of loop	`for (const item of array) {}`
`some`	Array.some method	`array.some((item) => { return })`
`every`	Array.every method	`array.every((item) => { return })`

Class Snippets

Prefix	Description	Output
`cls`	Empty class	`class Name {}`
`clsc`	Constructor method	`constructor() {}`
`clse`	Class extends	`class Name extends Parent { constructor() { super() } }`
`clssp`	Singleton pattern	Complete singleton with getInstance() and resetInstance()
`clsm`	Class method	`methodName() {}`
`clsms`	Class static method	`static methodName() {}`
`clsmsa`	Class static arrow method	`static methodName = () => {}`
`clsg`	Class getter	`get propertyName() {}`
`clss`	Class setter	`set propertyName(value) {}`

React Hooks

State Management

Prefix	Description	Output
`ust`	useState	`const [state, setState] = useState()`
`urd`	useReducer	`const [state, dispatch] = useReducer(reducer, initialState)`
`uct`	useContext	`const context = useContext(Context)`

Side Effects

Prefix	Description	Output
`uef`	useEffect	`useEffect(() => {}, [])`
`ule`	useLayoutEffect	`useLayoutEffect(() => {}, [])`
`uie`	useInsertionEffect (React 18+)	`useInsertionEffect(() => {}, [])`

Performance Optimization

Prefix	Description	Output
`umo`	useMemo	`const memoizedValue = useMemo(() => {}, [])`
`ucb`	useCallback	`const memoizedCallback = useCallback(() => {}, [])`
`utr`	useTransition (React 18+)	`const [isPending, startTransition] = useTransition()`
`udf`	useDeferredValue (React 18+)	`const deferredValue = useDeferredValue(value)`

Refs & DOM

Prefix	Description	Output
`urf`	useRef	`const ref = useRef()`
`uih`	useImperativeHandle	`useImperativeHandle(ref, () => ({}), [])`

Other Utilities

Prefix	Description	Output
`uid`	useId (React 18+)	`const id = useId()`
`udb`	useDebugValue	`useDebugValue(value)`
`uses`	useSyncExternalStore (React 18+)	`const state = useSyncExternalStore(subscribe, getSnapshot)`

Common Snippets

Prefix	Description	Output
`rimp`	React import	`import React, { } from 'react'`
`intc`	Props interface	`interface ComponentProps { }`
`gtyp`	Generic type	`type Name<T> = { }`

View all snippets in source code

Configuration

Customize @/ alias path in tsconfig.json or jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

FAQ

Q: Missing dependencies error when using Smart Component Generator? A: Install clsx and tailwind-merge in your project:

npm install clsx tailwind-merge

Q: Will it overwrite my utils file? A: No. It only adds missing cn or ComponentProps, never overwrites existing content.

Q: Theme Toggle not working? A: Make sure you've installed next-themes and wrapped your app with ThemeProvider in app/layout.tsx.

Q: Can I customize the component styles? A: Yes! All generated components are fully customizable. Edit the generated files to match your design system.

Q: Which Next.js versions are supported? A: This extension supports Next.js 13+ with App Router.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Changelog

See CHANGELOG.md for all release notes.

Support

中文

强大的 VSCode 代码片段扩展，为 React、TypeScript 和 JavaScript 开发提供常用代码片段、智能组件生成器和 Next.js 页面创建器。

安装

打开 VSCode
按 Ctrl+P (macOS: Cmd+P)
输入: ext install TOPCODERFULLSTACK.code-template-snippets
按 Enter

或者从 VS Code 市场安装

功能特性

🚀 30+ 代码片段 - JavaScript、TypeScript、React
🎨 智能组件生成器 - 集成 Tailwind CSS
📄 Next.js App Router 页面生成器 - 交互式创建路由
🎭 主题切换组件生成器 - 使用 next-themes 实现深色/浅色模式
🏷️ HTML 模板字面量语法高亮 - 完整的 HTML 标签模板支持
✨ 词条高亮 - 双击高亮词条，颜色和背景色互换以增强可见性
📁 支持 .js、.jsx、.ts、.tsx 文件
⚡ 智能占位符，支持 Tab 键跳转
💾 多文件选择及记忆功能

所有快捷键

快捷键	命令	说明
`Ctrl+Shift+T P` (macOS: `Cmd+Shift+T P`)	创建 Next.js 页面	交互式 Next.js App Router 页面
`Ctrl+Shift+T C` (macOS: `Cmd+Shift+T C`)	智能组件生成器	生成带 Tailwind CSS 的组件
`Ctrl+Shift+T T` (macOS: `Cmd+Shift+T T`)	创建主题切换组件	生成主题切换组件

快速开始

Next.js App Router 页面生成器

快捷键: Ctrl+Shift+T P (macOS: Cmd+Shift+T P)

交互式创建 Next.js App Router 页面：

功能特性:

交互式向导引导创建路由
自动检测 TypeScript/JavaScript
多文件选择（page、layout、loading、error 等）
记忆功能：记住你的文件偏好
支持动态路由：[id]、[slug]、[...params]
支持路由组：(auth)、(marketing)

使用流程示例:

按 Cmd+Shift+T P
输入路由名称：blog
选择父级路径：app/
选择文件（默认：page、layout、loading、error）
可选：勾选"记住我的选择"
按 Enter 确认

生成文件：

app/blog/page.tsx
app/blog/layout.tsx
app/blog/loading.tsx
app/blog/error.tsx

智能组件生成器

快捷键: Ctrl+Shift+T C (macOS: Cmd+Shift+T C)

自动生成带 Tailwind CSS 工具的 React 组件：

// 在 Button.tsx 中，按 Cmd+Shift+T C
import { cn, ComponentProps } from "@/lib/utils";

export const Button = ({ className, style }: ComponentProps) => {
  return (
    <div className={cn("", className)} style={style}>
      Button
    </div>
  );
};

前置条件: 安装必需的包

npm install clsx tailwind-merge

主题切换组件生成器

快捷键: Ctrl+Shift+T T (macOS: Cmd+Shift+T T)

新功能 - 快速生成完整的主题切换组件，支持深色/浅色模式：

功能特性:

一键生成 ThemeToggle 组件
自动创建 ThemeProvider 包装器
使用 next-themes 实现无缝主题切换
支持系统主题偏好
包含太阳/月亮图标
完整的 TypeScript 支持

前置条件: 安装 next-themes

npm install next-themes
# 或
pnpm add next-themes
# 或
yarn add next-themes

使用方法:

在 Next.js 项目中的任意位置按 Cmd+Shift+T T
选择组件位置（默认: components/）
将创建两个文件:
- components/ThemeToggle.tsx - 切换按钮组件
- components/ThemeProvider.tsx - 主题上下文提供者
在 app/layout.tsx 中用 ThemeProvider 包装你的应用：

import { ThemeProvider } from '@/components/ThemeProvider'

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

在任何地方使用 ThemeToggle 组件:

import { ThemeToggle } from '@/components/ThemeToggle'

export default function Header() {
  return (
    <header>
      <ThemeToggle />
    </header>
  )
}

词条高亮

新功能 - 增强的词条高亮功能，通过颜色和背景色互换提高可见性！

当您在编辑器中双击一个词条时，VSCode 会用淡淡的背景色高亮所有匹配的词条。然而，仅凭这种微弱的颜色变化来找到这些高亮词条是很困难的。

本扩展提供了增强的高亮功能，将文本颜色和背景色互换，使得找到所选词条的所有出现位置变得更加容易。

功能特性:

双击时自动激活
颜色和背景色互换，获得最大对比度
添加细微边框和粗体字以强调
在状态栏显示出现次数
主题更改时自动更新
支持所有编程语言

使用方法:

只需双击任何词条即可高亮所有出现位置
点击其他位置或双击其他词条以清除/更改高亮
使用命令面板：Highlight Current Word 进行手动触发

示例: 当您双击变量名如 userName 时，当前文件中所有的 userName 实例都会以反转的颜色高亮显示（文本变为背景色，背景变为文本色），使它们立即可见。

HTML 模板字面量支持

新功能 - 在标签模板字面量中提供完整的 HTML 语法高亮和智能提示！

本扩展现在为使用 html 标签的模板字面量提供完整的 HTML 支持。非常适合构建 Web Components、lit-html 或任何使用 HTML 模板字符串的框架。

功能特性:

模板字面量中的完整 HTML 语法高亮
HTML 标签和属性智能提示
保存时自动格式化 - 遵循您的 editor.formatOnSave 设置
手动格式化 - 按 Shift+Alt+F 或右键 > 格式化文档
支持 ${} 变量插值
在 .js、.jsx、.ts 和 .tsx 文件中均可使用

示例:

// 自动 HTML 语法高亮和格式化！
const navbar = html`
  <nav class="nav">
    <div class="container">
      <!-- HTML 注释也能工作！ -->
      <div class="nav__left">
        <button class="nav__menu-btn" id="mobile-menu-btn" aria-label="Open menu">
          <i class="uil uil-bars"></i>
        </button>
        <div class="nav__logo">${logoText}</div>
      </div>

      <!-- 变量会被正确高亮 -->
      <div class="nav__search-container">
        ${searchBar}
      </div>

      <div class="nav__create">
        <label for="create-post" class="btn btn--primary">Create</label>
        <button class="nav__messages-btn" id="messages-menu-btn">
          <i class="uil uil-comment-dots"></i>
        </button>
        <div class="profile__avatar">
          <img src="${userAvatar}" alt="profile photo">
        </div>
      </div>
    </div>
  </nav>
`;

工作原理:

只需使用 html 标签模板字面量
扩展自动检测并应用 HTML 语法高亮
${} 内的变量保持 TypeScript/JavaScript 语法高亮
自动格式化：在 VSCode 设置中启用 "editor.formatOnSave": true 即可在保存时格式化
手动格式化：按 Shift+Alt+F（或右键 > 格式化文档）
无需额外配置 - 开箱即用！

启用保存时格式化（在 .vscode/settings.json 或用户设置中）：

{
  "editor.formatOnSave": true
}

使用场景:

lit-html / Lit 组件
使用模板字符串的 Web Components
原生 JS DOM 操作
任何使用 HTML 模板字面量的框架

代码片段

输入前缀并按 Tab 键：

Console 方法（18 个片段）

基础日志

前缀	输出	说明
`clg`	`console.log()`	日志消息
`cwn`	`console.warn()`	警告消息
`cer`	`console.error()`	错误消息
`cin`	`console.info()`	信息消息
`cdb`	`console.debug()`	调试消息

数据展示

前缀	输出	说明
`cdr`	`console.dir()`	显示对象属性
`ctb`	`console.table()`	表格形式显示数据

性能计时

前缀	输出	说明
`ctm`	`console.time()`	开始计时
`ctme`	`console.timeEnd()`	结束计时
`ctml`	`console.timeLog()`	记录计时
`ctms`	`console.timeStamp()`	添加时间戳

分组

前缀	输出	说明
`cgp`	`console.group()`	开始分组
`cgpc`	`console.groupCollapsed()`	开始折叠分组
`cgpe`	`console.groupEnd()`	结束分组

计数和追踪

前缀	输出	说明
`cct`	`console.count()`	计数调用
`cctr`	`console.countReset()`	重置计数器
`ctc`	`console.trace()`	堆栈跟踪

工具

前缀	输出	说明
`ccl`	`console.clear()`	清空控制台

函数片段

前缀	说明	输出
`fn`	函数声明	`function name() {}`
`afn`	异步函数声明	`async function name() {}`
`fna`	箭头函数	`const name = () => {}`
`afna`	异步箭头函数	`const name = async () => {}`
`fnc`	闭包函数	`function outer() { return function inner() {} }`
`fnca`	闭包箭头函数	`const outer = () => { return () => {} }`
`fni`	立即执行函数	`(function() {})()`
`fnia`	立即执行箭头函数	`(() => {})()`

流程控制片段

前缀	说明	输出
`if`	If 语句	`if (condition) {}`
`ife`	If else 语句	`if (condition) {} else {}`
`ifel`	If else if 语句	`if (condition) {} else if (condition) {} else {}`
`ter`	三元运算符	`condition ? trueValue : falseValue`
`swc`	Switch 语句	`switch (expression) { case value: break; }`
`try`	Try catch 块	`try {} catch (error) {}`
`tryf`	Try catch finally 块	`try {} catch (error) {} finally {}`

循环片段

前缀	说明	输出
`for`	For 循环	`for (let i = 0; i < array.length; i++) {}`
`foe`	forEach 循环	`array.forEach((item) => {})`
`fori`	For in 循环	`for (const key in object) {}`
`foro`	For of 循环	`for (const item of array) {}`
`some`	Array.some 方法	`array.some((item) => { return })`
`every`	Array.every 方法	`array.every((item) => { return })`

类片段

前缀	说明	输出
`cls`	空类	`class Name {}`
`clsc`	构造函数方法	`constructor() {}`
`clse`	类继承	`class Name extends Parent { constructor() { super() } }`
`clssp`	单例模式	完整单例模式，包含 getInstance() 和 resetInstance()
`clsm`	类方法	`methodName() {}`
`clsms`	类静态方法	`static methodName() {}`
`clsmsa`	类静态箭头方法	`static methodName = () => {}`
`clsg`	类 Getter	`get propertyName() {}`
`clss`	类 Setter	`set propertyName(value) {}`

React Hooks

状态管理

前缀	说明	输出
`ust`	useState	`const [state, setState] = useState()`
`urd`	useReducer	`const [state, dispatch] = useReducer(reducer, initialState)`
`uct`	useContext	`const context = useContext(Context)`

副作用

前缀	说明	输出
`uef`	useEffect	`useEffect(() => {}, [])`
`ule`	useLayoutEffect	`useLayoutEffect(() => {}, [])`
`uie`	useInsertionEffect (React 18+)	`useInsertionEffect(() => {}, [])`

性能优化

前缀	说明	输出
`umo`	useMemo	`const memoizedValue = useMemo(() => {}, [])`
`ucb`	useCallback	`const memoizedCallback = useCallback(() => {}, [])`
`utr`	useTransition (React 18+)	`const [isPending, startTransition] = useTransition()`
`udf`	useDeferredValue (React 18+)	`const deferredValue = useDeferredValue(value)`

Refs 与 DOM

前缀	说明	输出
`urf`	useRef	`const ref = useRef()`
`uih`	useImperativeHandle	`useImperativeHandle(ref, () => ({}), [])`

其他工具

前缀	说明	输出
`uid`	useId (React 18+)	`const id = useId()`
`udb`	useDebugValue	`useDebugValue(value)`
`uses`	useSyncExternalStore (React 18+)	`const state = useSyncExternalStore(subscribe, getSnapshot)`

常用片段

前缀	说明	输出
`rimp`	React 导入	`import React, { } from 'react'`
`intc`	Props 接口	`interface ComponentProps { }`
`gtyp`	泛型类型	`type Name<T> = { }`

在源代码中查看所有片段

配置

在 tsconfig.json 或 jsconfig.json 中自定义 @/ 别名路径：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

常见问题

Q: 使用智能组件生成器时提示缺少依赖？ A: 在项目中安装 clsx 和 tailwind-merge：

npm install clsx tailwind-merge

Q: 会覆盖我的 utils 文件吗？ A: 不会。只会添加缺失的 cn 或 ComponentProps，不会覆盖现有内容。

Q: 主题切换不工作？ A: 确保已安装 next-themes 并在 app/layout.tsx 中用 ThemeProvider 包装了应用。

Q: 可以自定义组件样式吗？ A: 可以！所有生成的组件都完全可自定义。编辑生成的文件以匹配你的设计系统。

Q: 支持哪些 Next.js 版本？ A: 本扩展支持 Next.js 13+ 及 App Router。

贡献

欢迎贡献！请随时提交 Pull Request。

Fork 本仓库
创建你的特性分支 (git checkout -b feature/AmazingFeature)
提交你的更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开一个 Pull Request

更新日志

查看 CHANGELOG.md 了解所有发布说明。

支持

License: MIT Made by: TOPCODERFULLSTACK

Code Template Snippets

TOPCODER FULLSTACK

Code Template Snippets

English

Installation

Features

All Keyboard Shortcuts

Quick Start

Next.js App Router Page Generator

Smart Component Generator

Theme Toggle Component Generator

Word Highlighting

HTML Template Literals Support

Code Snippets

Configuration

FAQ

Contributing

Changelog

Support

中文

安装

功能特性

所有快捷键

快速开始

Next.js App Router 页面生成器

智能组件生成器

主题切换组件生成器

词条高亮

HTML 模板字面量支持

代码片段

配置

常见问题

贡献

更新日志

支持