MotionDiv - Visual Studio Code Extension

• Convert HTML and SVG elements into Motion components directly within VS Code.
• Streamline your workflow by instantly transforming a <div> into a <motion.div> with a simple keyboard shortcut (Ctrl + Shift + M).
• Automatically manages framer-motion imports, converting them to motion/react.
• Supports a wide range of HTML elements including div, section, article, header, footer, nav, main, img, span, button, a, ul, li, p, and headings (h1-h6).
• Also supports common SVG elements such as svg, g, path, circle, rect.
• Features automatic import handling: detects existing Motion imports, inserts new imports after existing ones, places them after use client directives, or at the top of the file if necessary.
• Includes single-step undo support for quick corrections.
• Places the cursor after the Motion tag for faster subsequent editing.
• Future versions plan advanced JSX/AST-based element detection.

Installation is straightforward: Launch VS Code Quick Open, paste the command, and press enter.