Overview Version History Q & A Rating & Review
Lean Snippet
🌈 Smart Code Snippets Extension for Visual Studio Code
🚀 Download from Marketplace
English | 中文
✨ Features
🎯 Smart Sidebar Panel - Browse and manage code snippets visually
🌈 Multi-Language Support - JavaScript, TypeScript, Vue, HTML snippets
⚡ Quick Insert - One-click snippet insertion with hotkeys
🎨 Custom Icons - Beautiful language-specific icons
📝 Log Management - Smart console.log insertion and cleanup
🔧 Interactive Actions - Add, import, export snippets
💾 TypeScript Powered - Full TypeScript rewrite for better performance
🚀 Using
Click the Lean Snippet icon in the activity bar
Browse snippets by language (JavaScript, TypeScript, Vue, HTML)
Double-click or use action buttons to insert snippets
Use the preview feature to see snippet details
⌨️ Keyboard Shortcuts
Shortcut
Description
Ctrl+Shift+L / Cmd+Shift+LInsert log statement with variable
Ctrl+Shift+/ / Cmd+Shift+/Insert log statement for selection
Ctrl+Shift+D / Cmd+Shift+DDelete all console.log statements
Ctrl+Shift+J / Cmd+Shift+JInsert consolePlus statement
Examples
Log with variable:
console.log('🍧-----text-----', text);
Log for selection:
console.log('🌳result------------------------------>');
📝 Code Snippets
JavaScript & TypeScript
Prefix
Description
Content
lreAPI request demo
async/await request pattern
lclConsole log with variable
console.log('🌈-----xxx-----', xxx)
lafArrow function
const func = () => {}
lifIf-else statement
if(){...} else{...}
lswSwitch statement
switch(){case: break; default: break;}
lccJSDoc comment
/** * @func fnName */
linterfaceTypeScript interface
interface InterfaceName {}
ltypeTypeScript type alias
type TypeName = type
ltsfuncTypeScript function
function name(): returnType {}
lclassTypeScript class
class ClassName {}
lenumTypeScript enum
enum EnumName {}
ltrycatchTry-catch block
try{} catch(error: unknown){}
Vue 3 Composition API
Prefix
Description
Content
lvcVue 3 component template
Complete component structure
lvbVue base template
Basic Vue template
lrefReactive reference
const valName = ref(..)
lreaReactive object
const valName = reactive(..)
lcomComputed property
const valName = computed(..)
lwaWatch
watch(..)
lweWatch effect
watchEffect(..)
lmoonMounted
onMounted(..)
lbmonBeforeMount
onBeforeMount(..)
lbuonBeforeUnmount
onBeforeUnmount(..)
lunonUnmounted
onUnmounted(..)
lvemDefine emits
const emit = defineEmits([])
lvprDefine props
const props = defineProps({})
lvdeDefine expose
defineExpose({})
HTML Utilities
Prefix
Description
Content
lremLorem ipsum English
English placeholder text
lremcLorem ipsum Chinese
Chinese placeholder text
lremnLorem ipsum numbers
Number placeholder text
🛠️ Development
This extension is built with TypeScript and follows modern VS Code extension development practices:
TypeScript : Full type safety and better development experienceModular Architecture : Clean separation of concernsCustom Icons : Beautiful SVG icons for better visual experienceInteractive Sidebar : Visual snippet management with preview functionality
🔧 Installation
Install from VS Code Marketplace
Or search for "Lean Snippet" in VS Code Extensions panel
Reload VS Code and enjoy!
🚀 About
Lean Snippet is designed to boost your coding productivity by providing:
Smart code snippet management
Quick insertion tools
Visual browsing experience
Multi-language support
Customizable and extensible
With the rapid development of modern web technologies, developers need efficient tools to reduce repetitive work and improve code quality. Lean Snippet encapsulates common patterns and best practices into easily accessible snippets, optimizing both code size and development efficiency while greatly improving code readability and maintainability.
Enjoy coding with Lean Snippet! 🌈
📄 License
MIT License © 2023-PRESENT Icey Wu
