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
📁 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>
  )
}

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 实现深色/浅色模式
📁 支持 .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>
  )
}

代码片段

输入前缀并按 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

Code Snippets

Configuration

FAQ

Contributing

Changelog

Support

中文

安装

功能特性

所有快捷键

快速开始

Next.js App Router 页面生成器

智能组件生成器

主题切换组件生成器

代码片段

配置

常见问题

贡献

更新日志

支持