{"id":520855,"date":"2024-10-28T14:06:04","date_gmt":"2024-10-28T13:06:04","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=webstorm&#038;p=520855"},"modified":"2024-10-29T16:25:41","modified_gmt":"2024-10-29T15:25:41","slug":"webstorm-2024-3-eap","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2024\/10\/webstorm-2024-3-eap","title":{"rendered":"WebStorm 2024.3 EAP Digest: Improved Navigation and Rename Refactoring for Framework Components, AI-Based Code Completion Updates, and Tailwind Color Preview for CSS Classes"},"content":{"rendered":"\n<p>It\u2019s time for the WebStorm 2024.3 EAP digest, which will walk you through the new features and improvements in the upcoming release!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"2560\" height=\"1440\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/ws-2024-3-eap-featured.png\" alt=\"\" class=\"wp-image-520896\"\/><\/figure>\n\n\n\n<p>The <a href=\"https:\/\/www.jetbrains.com\/toolbox-app\/\" target=\"_blank\" rel=\"noopener\">Toolbox App<\/a> is the easiest way to get the EAP builds and keep both your stable and EAP versions up to date. You can also manually download the EAP builds from our <a href=\"https:\/\/www.jetbrains.com\/webstorm\/nextversion\/\" target=\"_blank\" rel=\"noopener\">website<\/a>.<\/p>\n\n\n\n<p><p align=\"center\"><a class=\"jb-download-button\" href=\"https:\/\/www.jetbrains.com\/webstorm\/nextversion\" target=\"_blank\" rel=\"noopener\">DOWNLOAD WEBSTORM 2024.3 EAP<\/a><\/p><\/p>\n\n\n\n<p><strong>Important! WebStorm EAP builds are not fully tested and might be unstable.<\/strong> Please try the latest EAP build and share your feedback with us. You can do so using <a href=\"https:\/\/youtrack.jetbrains.com\/issues\/WEB\" target=\"_blank\" rel=\"noopener\">our issue tracker<\/a> or by leaving a comment on this blog post.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Key highlights<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Improved navigation and <em>Rename<\/em> refactoring for framework components<\/h3>\n\n\n\n<p>Starting from version 2024.3, the <em>Show component usages<\/em> action for Vue, Svelte, and Astro detects component usages both in imports and templates. You can also use this functionality by invoking the <em>Find Usages<\/em> action on the component file in the <em>Project <\/em>view:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-find-compoenent-usages-cover.png\" alt=\"tab-labels\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-find-compoenent-usages.gif\"><\/figure>\n\n\n\n<p>The <em>Rename<\/em> refactoring has been enhanced to include component usages renaming. When renaming a component file or explicitly defined name, the associated usages in templates will also be updated! This behavior can be disabled by toggling the <em>Search for component usages<\/em> option during the renaming process and in the <em>Find<\/em> dialog.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">AI Assistant<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Improved AI-based code completion<\/h4>\n\n\n\n<p>In 2024.3 we are significantly improving AI-driven code completion for JavaScript and TypeScript. The new approach combines fast, local full-line completion with powerful cloud-based suggestions powered by JetBrains\u2019 in-house LLMs. This hybrid approach enhances speed, accuracy, and usability while reducing the frequency of lengthy and irrelevant suggestions.<\/p>\n\n\n\n<p>Here are some of the key improvements:<\/p>\n\n\n\n<ul>\n<li>Highlighting is now applied to the suggested code, which previously was just plain gray text.<\/li>\n\n\n\n<li>Partial acceptance allows you to apply suggestions granularly, giving you more control over changes to your code:\n<ul>\n<li>Accept suggestions word by word \u2013 \u2325 \u2192 \/ <em>Alt + Right<\/em>.<\/li>\n\n\n\n<li>Accept suggestions line by line \u2013 \u2318 \u2192 \/ <em>Ctrl + Right<\/em>.<\/li>\n\n\n\n<li>As before, you can explicitly call completion with \u21e7 \u2325 \/ \/ <em>Shift + Alt<\/em>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>We\u2019ve enhanced context collection using <a href=\"https:\/\/cloud.google.com\/use-cases\/retrieval-augmented-generation\" target=\"_blank\" rel=\"noopener\">RAG<\/a> strategies.<\/li>\n<\/ul>\n\n\n\n<p>Completion suggestions are now provided in more locations, and are now triggered during typing, not only on <em>Enter<\/em> keystrokes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-ai-completion.png\" alt=\"tab-labels\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-ai-completion.gif\"><\/figure>\n\n\n\n<p>In EAP 3, support for AI-based code completion has also been extended to HTML and CSS (including .css, .less, .scss, .sass, .pcss). Please refer to this <a href=\"https:\/\/blog.jetbrains.com\/ai\/2024\/10\/complete-the-un-completable-the-state-of-ai-completion-in-jetbrains-ides\/\">blog post<\/a> for more insights.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Inline AI prompts<\/h4>\n\n\n\n<p>You can now interact with AI Assistant directly in the editor thanks to an experimental inline input feature that detects and processes your requests as you type. This lets you express your intentions in natural language, which AI Assistant instantly interprets and converts into code changes without any extra steps. This feature is currently available for JavaScript and TypeScript:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-inline-prompt-cover.png\" alt=\"tab-labels\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-inline-prompts.gif\"><\/figure>\n\n\n\n<p>The IDE leaves a purple mark in the gutter next to lines added or changed by AI Assistant so you can easily see what has been updated.<\/p>\n\n\n\n<p>If you don\u2019t like the initial suggestion, you can generate a new one by pressing <em>Tab<\/em>. You can also adjust the initial prompt by clicking on the purple block in the gutter or simply pressing <em>Ctrl + \/<\/em> (Windows\/Linux) or <em>\u2318\/<\/em> (macOS).<\/p>\n\n\n\n<p>Please note that these improvements are available only when using the <a href=\"https:\/\/www.jetbrains.com\/ai\/#ai-assistant\" target=\"_blank\" rel=\"noopener\">AI Assistant plugin<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Color preview for Tailwind CSS classes<\/h3>\n\n\n\n<p>Color previews for Tailwind CSS classes are now shown inline in the editor. We&#8217;ve added support for the textDocument\/documentColor method of the Language Server Protocol (LSP), so all LSP-based plugins now support this functionality out of the box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1600\" height=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-inlay-color-hints-tailwind.png\" alt=\"\" class=\"wp-image-520946\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bun debugger support for Windows<\/h3>\n\n\n\n<p>In EAP 2, we&#8217;ve introduced Bun debugger support for Windows. This update includes program traversal (<em>Step Into<\/em>, <em>Step Over<\/em>, and <em>Run to Cursor<\/em>), expression evaluation, and support for line breakpoints, exceptions, and conditional breakpoints.<\/p>\n\n\n\n<p>Bun debugger support is currently unavailable on WSL. If you would like to see it added, consider voting for<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-69167\" target=\"_blank\" rel=\"noopener\"> WEB-69167<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code style options for decorators<\/h3>\n\n\n\n<p>We have implemented new code style options for decorators in JavaScript and TypeScript. EAP 1 introduces four new items in the <em>Wrapping and Braces<\/em> subsection of the <em>Code Style<\/em> settings:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"2236\" height=\"1398\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-code-style-options.png\" alt=\"\" class=\"wp-image-520959\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">User experience<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Updates to <em>Find in Files<\/em><\/h3>\n\n\n\n<p>The <em>Find in Files<\/em> feature has a new search scope option: <em>Project Files Excluding Git-Ignored<\/em>. This option excludes any files ignored in <code>.gitignore<\/code>&nbsp; from your search results, helping you narrow down the search scope to the relevant parts of your project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"2000\" height=\"1000\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-exclude-ginginore-in-find.png\" alt=\"\" class=\"wp-image-520972\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Highlight occurrences of selected text<strong>&nbsp;<\/strong><\/h3>\n\n\n\n<p>By default, WebStorm will now automatically highlight all instances of the text you select within a file. You can toggle this feature in <em>Settings | Editor | General | Appearance<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"2000\" height=\"1000\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/10\/WS243-same-text-selection.png\" alt=\"\" class=\"wp-image-520984\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Other highlights<\/h2>\n\n\n\n<ul>\n<li><a href=\"https:\/\/plugins.jetbrains.com\/plugin\/10925-database-tools-and-sql-for-webstorm\" target=\"_blank\" rel=\"noopener\">The Database Tools and SQL<\/a> plugin is now bundled in the IDE, and its licensing model will be changed in the upcoming major release.<\/li>\n\n\n\n<li>WebStorm now displays the .idea directory in the <em>Project <\/em>view by default. You can use the projectView.hide.dot.idea registry option to toggle this behavior (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-68009\" target=\"_blank\" rel=\"noopener\">WEB-68009<\/a>).&nbsp;<\/li>\n\n\n\n<li>The <em>Install dependencies<\/em> notification will now automatically disappear once the required dependencies have been installed via the command line (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-65147\" target=\"_blank\" rel=\"noopener\">WEB-65147<\/a>).<\/li>\n\n\n\n<li>We have improved navigation to built-in Nuxt components (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-65589\" target=\"_blank\" rel=\"noopener\">WEB-65589<\/a>, <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-66625\/Nuxt-support-find-usages-for-files-in-the-components-directory\" target=\"_blank\" rel=\"noopener\">WEB-66625<\/a>).<\/li>\n\n\n\n<li>You can now use nx as the karma package to run unit tests in Nx projects (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-58994\" target=\"_blank\" rel=\"noopener\">WEB-58994<\/a>).<\/li>\n<\/ul>\n\n\n\n<p>That\u2019s it for today. For the full list of improvements introduced throughout the latest 2024.3 EAPs, check out the release notes.<\/p>\n\n\n\n<p><em>The WebStorm team<\/em><\/p>\n","protected":false},"author":1474,"featured_media":520896,"comment_status":"closed","ping_status":"closed","template":"","categories":[826],"tags":[8578],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/520855"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/users\/1474"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=520855"}],"version-history":[{"count":10,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/520855\/revisions"}],"predecessor-version":[{"id":521788,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/520855\/revisions\/521788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media\/520896"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=520855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=520855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=520855"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=520855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}