useState<\/code> declaration with an inline object type:<\/p>\n\n\n\nconst [data, setData] = useState<{\n totalUsers: number;\n previousTotalUsers: number; \n revenue: number;\n previousRevenue: number;\n pageViews: number;\n previousPageViews: number;\n conversionRate: number;\n previousConversionRate: number;\n recentActivity: {\n user: string;\n action: string;\n timestamp: string;\n }[];\n} | null>(null);<\/pre>\n\n\n\nThis approach gets you running immediately, but for production code, you’ll want proper interfaces.<\/p>\n\n\n\n
The solution:<\/strong> WebStorm’s Extract type alias<\/em> refactoring.<\/p>\n\n\n\nHow to do it in WebStorm:<\/strong><\/p>\n\n\n\n\n- Select the object type definition (everything between
{<\/code> and }<\/code>, including the nested object types)<\/li>\n\n\n\n- Right-click, select Refactor<\/em>, and then click on Extract Type Alias<\/em>.<\/li>\n\n\n\n
- WebStorm will automatically create proper interfaces and update all usages of this literal type within the file.<\/li>\n<\/ol>\n\n\n\n
The result:<\/strong><\/p>\n\n\n\ninterface AnalyticsData {\n totalUsers: number;\n previousTotalUsers: number;\n revenue: number;\n previousRevenue: number;\n pageViews: number;\n previousPageViews: number;\n conversionRate: number;\n previousConversionRate: number;\n recentActivity: {\n user: string;\n action: string;\n timestamp: string;\n }[];\n}\n\nconst [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);<\/pre>\n\n\n\nNotice that the nested object type for recentActivity<\/code> is still inline. You can run the refactoring again on nested types to extract them to whatever granularity makes sense for reuse:<\/p>\n\n\n\n\/\/ Select the nested object type and extract again\ninterface RecentActivity {\n user: string;\n action: string;\n timestamp: string;\n}\n\ninterface AnalyticsData {\n totalUsers: number;\n previousTotalUsers: number;\n revenue: number;\n previousRevenue: number;\n pageViews: number;\n previousPageViews: number;\n conversionRate: number;\n previousConversionRate: number;\n recentActivity: RecentActivity[];\n}<\/pre>\n\n\n\nWhy this matters:<\/strong> WebStorm finds and updates all instances of that exact type structure throughout your file. What would take you five or more minutes manually (hunting down every usage and likely missing a spot) happens instantly and without error.<\/p>\n\n\n\nStep 2: Rename for clarity<\/h2>\n\n\n\n
The problem: <\/strong>Variables like data<\/code> and result<\/code> tell us nothing. When you come back to this code in six months, you’ll waste time figuring out what they contain.<\/p>\n\n\n\nThe solution:<\/strong> WebStorm’s smart Rename<\/em> refactoring.<\/p>\n\n\n\nHow to do it in WebStorm:<\/strong><\/p>\n\n\n\n\n- Place the cursor on the variable\u2019s name.<\/li>\n\n\n\n
- Press Shift+F6<\/em> (or right-click, then “Refactor\u201d<\/em>, and select Rename<\/em>)<\/li>\n\n\n\n
- Type the new name and WebStorm will update all the references automatically.
<\/li>\n<\/ol>\n\n\n\nLet’s rename:<\/p>\n\n\n\n
* data<\/code> \u2192 analyticsData<\/code>
* result<\/code> \u2192 apiResponse<\/code>
* err<\/code> \u2192 apiError<\/code><\/p>\n\n\n\nWhy this matters:<\/strong> WebStorm’s Rename<\/em> refactoring is scope-aware and handles edge cases that find-and-replace misses. It knows the difference between your local variable data<\/code> and a property called data<\/code> on some other object.<\/p>\n\n\n\nStep 3: Extract reusable components<\/h2>\n\n\n\n
The problem:<\/strong> This component is doing everything: data fetching, formatting, and rendering multiple UI patterns. It’s impossible to test individual pieces or reuse the metric cards elsewhere.<\/p>\n\n\n\nThe solution: <\/strong>WebStorm’s Extract Component<\/em> refactoring.<\/p>\n\n\n\nLet’s extract that repeated metric card pattern:<\/p>\n\n\n\n
How to do it in WebStorm:<\/strong><\/p>\n\n\n\n\n- Select the JSX for one complete metric card (elements with the class
metric-card<\/code>)<\/li>\n\n\n\n- Right-click, select Refactor<\/em>, and then pick Extract Component<\/em> (or use the shortcut Ctrl+Alt+M\/\u2325+\u2318+M<\/em>).<\/li>\n\n\n\n
- WebStorm will:\n
\n- Create a new component.<\/li>\n\n\n\n
- Identify the props automatically.<\/li>\n\n\n\n
- Replace the selected code with the component call.
<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nThe result:<\/strong><\/p>\n\n\n\nexport function MetricCardProps(props: { s: string, number: number }) {\n return <div style={{border: "1px solid #ddd", padding: "20px", borderRadius: "8px"}}>\n <h3>Total Users<\/h3>\n <div style={{fontSize: "32px", fontWeight: "bold", color: "#2196F3"}}>\n {props.s}\n <\/div>\n <div\n style={{color: props.number >= 0 ? "green" : "red"}}>\n {props.number >= 0 ? "\u2197" : "\u2198"}\n {Math.abs(props.number).toFixed(1)}% vs last month\n <\/div>\n <\/div>;\n}<\/pre>\n\n\n\nWhy this matters:<\/strong> WebStorm automatically figured out what should be props and what should stay internal. This kind of analysis would take you several minutes manually, and you’d probably miss something.<\/p>\n\n\n\nNote: The Extract Component refactoring works seamlessly across the major frontend frameworks (Angular, Vue, and React). We’re using React for demo purposes, but this refactoring technique applies universally.<\/em><\/p>\n\n\n\nBonus:<\/strong> Once the component is extracted, you can use WebStorm’s Move<\/em> refactoring (F6<\/em>) to relocate the MetricCard<\/code> component to its own file (e.g., components\/MetricCard.tsx<\/code>). WebStorm will automatically:<\/p>\n\n\n\n\n- Create the new file with proper imports.<\/li>\n\n\n\n
- Update the import statement in the original file.<\/li>\n\n\n\n
- Handle any type dependencies between files.<\/li>\n<\/ul>\n\n\n\n
This transforms your extracted component from a local helper into a truly reusable component that other parts of your application can import and use. Note that WebStorm won’t automatically detect and replace similar code patterns elsewhere in your codebase. Those would need to be manually refactored to use the new component.<\/p>\n\n\n\n
Step 3.5: Rename props for clarity<\/h2>\n\n\n\n
The problem:<\/strong> The extracted component works perfectly, but WebStorm generated prop names based on the original variable names, which might not be ideal for a reusable component.<\/p>\n\n\n\nThe solution:<\/strong> WebStorm’s smart Rename<\/em> refactoring. We already went over this, but this also works well when destructuring props.<\/p>\n\n\n\nLooking at our extracted MetricCard<\/code>, the props might have generic names like value<\/code> and previousValue<\/code>. For a reusable component, these could be more descriptive:<\/p>\n\n\n\nHow to do it in WebStorm:<\/strong><\/p>\n\n\n\n\n- Place the cursor on the prop name in the JSX part.<\/li>\n\n\n\n
- Press Shift+F6<\/em> (or right-click, pick Refactor<\/em>, and then select Rename<\/em>)<\/li>\n\n\n\n
- Type the new name and WebStorm updates all the references automatically.<\/li>\n<\/ol>\n\n\n\n
Let’s rename:<\/p>\n\n\n\n
* s<\/code> \u2192 label<\/code>
* number<\/code> \u2192 delta<\/code><\/p>\n\n\n\nStep 4: Add props for better reusability<\/h2>\n\n\n\n
The problem:<\/strong> Our MetricCard<\/code> component has hardcoded trend icons (\u2197 and \u2198). To make it more flexible, let’s make the icon configurable by the parent component.<\/p>\n\n\n\nThe solution:<\/strong> WebStorm’s Create component prop<\/em> quick-fix.<\/p>\n\n\n\nFirst, let’s use the new prop in the parent component by adding it to one of our MetricCard<\/code> calls:<\/p>\n\n\n\n<MetricCard\n label="Total Users"\n delta={calculateGrowth(analyticsData.totalUsers, analyticsData.previousTotalUsers)}\n icon={calculateGrowth(analyticsData.totalUsers, analyticsData.previousTotalUsers) >= 0 ? "\u2197" : "\u2198"}\n\/><\/pre>\n\n\n\nHow to do it in WebStorm:<\/strong><\/p>\n\n\n\n\n- Place the cursor on the new
icon<\/code> prop (it will be highlighted as an error).<\/li>\n\n\n\n- Hit Alt+Enter<\/em>\/\u2325+Enter<\/em> and then select the Create component prop ‘icon’<\/em> option.<\/li>\n\n\n\n
- WebStorm automatically adds the prop to the
MetricCardProps<\/code> interface.<\/li>\n\n\n\n- Update the component to use the new
icon<\/code> prop instead of the hardcoded logic.<\/li>\n<\/ol>\n\n\n\nThe result:<\/strong><\/p>\n\n\n\nexport function MetricCard(props: { label: string, delta: number, icon?: string }) {\n return <div style={{border: "1px solid #ddd", padding: "20px", borderRadius: "8px"}}>\n <h3>Total Users<\/h3>\n <div style={{fontSize: "32px", fontWeight: "bold", color: "#2196F3"}}>\n {props.label}\n <\/div>\n <div\n style={{color: props.delta >= 0 ? "green" : "red"}}>\n {props.icon ?? props.delta >= 0 ? "\u2197" : "\u2198"}\n {Math.abs(props.delta).toFixed(1)}% vs last month\n <\/div>\n <\/div>;\n}<\/pre>\n\n\n\nNote:<\/strong> By default, the newly created prop will be optional; this way, the introduced change is backwards compatible with existing usages of that component. This might be something that you want to change manually based on the semantics of the prop and the component usage.<\/p>\n\n\n\nWhy this matters:<\/strong> WebStorm’s Create component prop<\/em> quick-fix ensures perfect synchronization between prop usage and interface definitions. No more forgetting to add props to interfaces or mismatched types. This feature works similarly in Angular (for component inputs and outputs) and Vue (for component props), adapting to each framework’s conventions.<\/p>\n\n\n\nStep 5: Surround with error boundaries and loading states<\/h2>\n\n\n\n
The problem:<\/strong> Our main dashboard content has no error boundary protection. If a component throws an error, the entire app crashes.<\/p>\n\n\n\nThe solution:<\/strong> WebStorm’s Surround with<\/em> refactoring to wrap our content with error handling.<\/p>\n\n\n\nLet’s say we want to wrap our main dashboard grid with an error boundary. First, select the main dashboard content:<\/p>\n\n\n\n
<div style={{\n display: 'grid', \n gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', \n gap: '20px', \n marginBottom: '30px'\n}}>\n <MetricCard ... \/>\n <MetricCard ... \/>\n <MetricCard ... \/>\n <MetricCard ... \/>\n<\/div><\/pre>\n\n\n\nHow to do it in WebStorm:<\/strong><\/p>\n\n\n\n\n- Select the JSX content you want to protect.<\/li>\n\n\n\n
- Hit Ctrl+Alt+T\/\u2325+\u2318+T<\/em> (or right-click and select Surround With<\/em>).<\/li>\n\n\n\n
- Choose Surround with <tag><\/tag><\/em> and type
<ErrorBoundary fallback={<div>Something went wrong<\/div>}><\/code><\/li>\n\n\n\n- If
ErrorBoundary<\/code> doesn’t exist yet, hit Alt+Enter<\/em> and select Create component ‘ErrorBoundary’<\/em> to generate it automatically.<\/li>\n<\/ol>\n\n\n\nThe result:<\/strong><\/p>\n\n\n\n<ErrorBoundary fallback={<div>Something went wrong with the metrics.<\/div>}>\n <div style={{\n display: 'grid', \n gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', \n gap: '20px', \n marginBottom: '30px'\n }}>\n <MetricCard ... \/>\n <MetricCard ... \/>\n <MetricCard ... \/>\n <MetricCard ... \/>\n <\/div>\n<\/ErrorBoundary><\/pre>\n\n\n\nYou can also use Surround with<\/em> to wrap async operations in try...catch<\/code> blocks or conditional statements in if\/else<\/code> logic.<\/p>\n\n\n\nWhy this matters:<\/strong> The Surround with<\/em> feature helps you consistently apply protective patterns across your codebase. No more forgetting to wrap risky operations in error boundaries or try...catch<\/code> blocks. It’s also incredibly handy for adding structural elements like containers, sections, or wrapper divs to your HTML\/JSX without manually typing opening and closing tags.<\/p>\n\n\n\nStep 6: Smart string refactoring<\/h2>\n\n\n\n
The problem:<\/strong> We have string concatenation that’s harder to read and maintain. For example, in our formatDate<\/code> function, we’re building a date string with multiple concatenations.<\/p>\n\n\n\nThe solution:<\/strong> WebStorm’s smart string conversion.<\/p>\n\n\n\nLet’s say you start with this string concatenation in your function:<\/p>\n\n\n\n
const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n return months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();\n};<\/pre>\n\n\n\nYou want to convert this to a template literal for better readability:<\/p>\n\n\n\n
Two approaches in WebStorm:<\/strong><\/p>\n\n\n\n\n- Explicit conversion<\/strong>: Place the cursor on the string and hit Alt+Enter\/\u2325+\u21b5<\/em>, then select Convert to template string<\/em> (more efficient for this example with complex concatenation).<\/li>\n\n\n\n
- Natural conversion<\/strong>: Start typing
${<\/code> anywhere in the string and WebStorm automatically converts your code without interrupting your flow (fastest when you just want to add a variable to an existing string).
<\/li>\n<\/ul>\n\n\n\nHow to do it in WebStorm:<\/strong><\/p>\n\n\n\n\n- Place the cursor inside any of the string quotes (like
' '<\/code> between a month and date).<\/li>\n\n\n\n- Start typing
${<\/code> and WebStorm immediately converts the entire expression to use backticks.<\/li>\n\n\n\n- Continue building your template:
`${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`<\/code>
<\/li>\n<\/ol>\n\n\n\nBefore:<\/strong><\/p>\n\n\n\nreturn months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();<\/pre>\n\n\n\nAfter (automatic conversion):<\/strong><\/p>\n\n\n\nreturn `${months[date.getMonth()]}\/${date.getDate()}\/${date.getFullYear()}`;<\/pre>\n\n\n\nHonorable mention:<\/strong> That months<\/code> array is also a perfect candidate for WebStorm’s Introduce Constant<\/em> refactoring (Ctrl+Alt+C\/\u2325+\u2318+C<\/em>). Select the array and extract it to a module-level constant for better reusability and performance.<\/p>\n\n\n\nWhy this matters:<\/strong> You never have to manually convert strings to template literals. WebStorm recognizes when you need interpolation and handles the conversion seamlessly. This works for any string in JavaScript\/TypeScript, including function returns, variable assignments, object properties, etc.<\/p>\n\n\n\nThe transformation: From AI-generated to production-ready<\/h2>\n\n\n\n
After applying these six refactorings, we’ve transformed our AI-generated component from a functional prototype into professional-grade code. Let’s look at what we accomplished:<\/p>\n\n\n\n
What we started with:<\/strong><\/p>\n\n\n\n\n- A single 250-line component doing everything.<\/li>\n\n\n\n
- Inline types scattered throughout the code.<\/li>\n\n\n\n
- Generic variable names like
data<\/code> and result<\/code>.<\/li>\n\n\n\n- Repeated UI patterns copy-pasted four times.<\/li>\n\n\n\n
- String concatenation mixed with template literals.<\/li>\n\n\n\n
- No error boundaries or component isolation.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
What we ended up with:<\/strong><\/p>\n\n\n\n\n- Clean, separated interfaces (
AnalyticsData<\/code>, RecentActivity<\/code>).<\/li>\n\n\n\n- Descriptive variable names (
analyticsData<\/code>, apiResponse<\/code>).<\/li>\n\n\n\n- Reusable
MetricCard<\/code> component with a clear API.<\/li>\n\n\n\n- Consistent string formatting using template literals.<\/li>\n\n\n\n
- Error boundaries protecting critical sections.<\/li>\n\n\n\n
- A focused main component that orchestrates rather than implements.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Each refactoring took just seconds to apply, but collectively they’ve made the code exponentially more maintainable, testable, and professional. More importantly, these changes happened deterministically \u2013 there was no guesswork, no manual find-and-replace errors, just reliable transformations.<\/p>\n\n\n\n
This is the power of combining AI’s rapid prototyping with WebStorm’s precise refactorings. You get the best of both worlds: speed and quality.<\/p>\n\n\n\n
The AI + WebStorm workflow: Best of both worlds<\/h2>\n\n\n\n
Here’s an emerging trend we\u2019re seeing more and more in 2025:<\/p>\n\n\n\n
1. AI generates the initial working code<\/strong> (fast, functional, and gets you started immediately).<\/p>\n\n\n\n2. WebStorm<\/a> refactors it into production-quality code<\/strong> (deterministic, safe, and comprehensive).<\/p>\n\n\n\nThis combination gives you:<\/p>\n\n\n\n
\n- Speed<\/strong>: AI gets you from zero to working in minutes.<\/li>\n\n\n\n
- Quality<\/strong>: WebStorm gets you from working to maintainable.<\/li>\n\n\n\n
- Confidence<\/strong>: Deterministic refactorings mean no surprises.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Why these refactorings matter more than ever<\/h2>\n\n\n\n
As AI becomes increasingly sophisticated at generating functional code, the ability to quickly and safely restructure that code becomes critical. AI excels at solving immediate problems and getting you started fast. WebStorm’s refactoring tools excel at taking that functional foundation and transforming it into code that’s maintainable, testable, and ready for long-term development.<\/p>\n\n\n\n
The future of frontend development isn’t about choosing between AI and traditional tools. It’s about AI and powerful refactoring tools like WebStorm’s working together seamlessly. Master this combination, and you’ll be building better code faster than ever before.<\/p>\n\n\n\n
Pro tip:<\/strong> When you have that feeling that “something could be better organized” with your code but you’re not sure what to refactor, try Ctrl+T\/\u2303+T <\/em>(Refactor This<\/em>). It shows all available refactoring options for your current selection, helping you discover improvement opportunities you might not have considered.<\/p>\n\n\n\nThe WebStorm team<\/em><\/p>\n","protected":false},"author":1424,"featured_media":644176,"comment_status":"closed","ping_status":"closed","template":"","categories":[601],"tags":[659],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/640546"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/users\/1424"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/comments?post=640546"}],"version-history":[{"count":10,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/640546\/revisions"}],"predecessor-version":[{"id":674823,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/640546\/revisions\/674823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/media\/644176"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/media?parent=640546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/categories?post=640546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/tags?post=640546"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/cross-post-tag?post=640546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}