{"id":397086,"date":"2023-10-13T11:07:01","date_gmt":"2023-10-13T10:07:01","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=webstorm&#038;p=397086"},"modified":"2023-10-27T14:54:20","modified_gmt":"2023-10-27T13:54:20","slug":"webstorm-2023-3-eap2","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2023\/10\/webstorm-2023-3-eap2","title":{"rendered":"WebStorm 2023.3 EAP Digest #2: Improvements for Type Only Import, Angular, Svelte, and More"},"content":{"rendered":"<p>We\u2019re now halfway through the WebStorm 2023.3 Early Access Program! It\u2019s been a while since we\u2019ve updated you on the latest improvements and features we\u2019ve been working on. Here is a round-up of some of the key changes that have made it into EAP builds in the past few weeks. For more information, check out <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/tag\/webstorm-2023-3\/\">our previous blog posts<\/a>.<\/p>\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<p align=\"center\"><a class=\"jb-download-button\" href=\"https:\/\/www.jetbrains.com\/webstorm\/nextversion\" target=\"_blank\" rel=\"noopener\">DOWNLOAD WEBSTORM 2023.3 EAP<\/a><\/p>\n<p><strong>Important! WebStorm EAP builds are not fully tested and might be unstable.<\/strong><\/p>\n<p>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<ul>\n<li><strong>New features<\/strong>: <a href=\"#improvements_for_imports_with_type_modifier\">Type-only import improvements<\/a>, <a href=\"#angular_enhancements\">Angular enhancements<\/a>, <a href=\"#svelte_improvements\">Svelte improvements<\/a>, <a href=\"#all_in_one_diff_viewer\">an all-in-one diff viewer<\/a>, <a href=\"#ai_assistant_improvements\"><em>AI Assistant<\/em> improvements<\/a>, <a href=\"#speed_search_shortcut\"><em>Speed Search<\/em> shortcut<\/a>, and <a href=\"#http_client_improvements\">new HTTP Client features<\/a>.<\/li>\n<li><strong><a href=\"#other_highlights\">Other highlights<\/a><\/strong>: We\u2019ve worked on fixes for some long outstanding issues, such as type hinting for props in Vue and the <em>\u201cUse code style based on Prettier for this project\u201d<\/em> option not working, as well as some updates to improve the user experience.<\/li>\n<\/ul>\n<h2 id=\"new_features\">New Features<\/h2>\n<h3 id=\"improvements_for_imports_with_type_modifier\">Improvements for Imports with type modifier<\/h3>\n<p>We\u2019re looking at solving some of the frustrating <code>import type<\/code> issues in WebStorm 2023.3. There are also a lot of fixes for edge cases and inconsistencies with adding <code>import type<\/code> statements. We\u2019ve also added a new option to configure the usage of the TypeScript <code>import type<\/code> statement or type specifier when importing a type, which you can find in <em>Settings | Editor | Code Style | TypeScript -&gt; Imports -&gt; Use \u2018import type\u2019 when importing a type<\/em>.<\/p>\n<p><img decoding=\"async\" alt=\"Showing the new settings option use import type when using a type\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/type-only-import-settings.png\"\/><\/p>\n<h3 id=\"angular_enhancements\">Angular enhancements<\/h3>\n<h4 id=\"improved_formatting_for_angular_inspection_errors\">Improved formatting for Angular inspection errors<\/h4>\n<p>Our work on <a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2023\/07\/webstorm-2023-2#javascript_typescript_and_css\">improving how we present type errors<\/a> has made it to Angular. Now, when you see an Angular-specific inspection, the errors and warnings will be formatted in a way that makes them much more readable and easier for you to diagnose issues.<\/p>\n<p><img decoding=\"async\" alt=\"Showing the new formatting for Angular error messages\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Pretty-Angular-error-format.png\"\/><\/p>\n<h4 id=\"support_strict_template_type_checking_in_angular_templates\">Support strict template type checking in Angular templates<\/h4>\n<p>In our previous release, we made improvements to how WebStorm deals with Angular <code>strictTemplates<\/code>. In WebStorm 2023.3, we\u2019ve fixed generic params evaluation. We still have some flags that we need to support, but the overall template type checking now should work. Please try it out, and if you find any issues, please report them to our tracker.<\/p>\n<p><img decoding=\"async\" alt=\"Showing no errors with strictTemplate code\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/strictTemplate-Angular.png\"\/><\/p>\n<h4 id=\"quick_fix_to_move_standalone_components_from_declarations_to_imports_in_ngmodule\">Quick-fix to move standalone components from declarations to imports in NgModule<\/h4>\n<p>WebStorm already has an inspection that indicates if a standalone component is declared in NgModule. In WebStorm 2023.3, we\u2019ve added a quick-fix that provides the option to import standalone components for this inspection.<\/p>\n<p><img decoding=\"async\" alt=\"Using the import standalone components in NgModule\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Angular-import-standalone-QF.gif\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Angular-import-standalone-QF.png\"\/><\/p>\n<h3 id=\"svelte_improvements\">Svelte improvements<\/h3>\n<p>We\u2019ve implemented a proper auto-import mechanism for components in Svelte projects. Imports are suggested from node_modules or from other <em>.svelte<\/em> files in the project. The import suggestion works on completion, on copy-paste, and with <em>Alt+Enter<\/em>. We&#8217;ve also fixed the issue causing Svelte components with a <code>context=&quot;module&quot;<\/code> attribute not to be properly resolved in import statements.<\/p>\n<p><img decoding=\"async\" alt=\"Showing the import suggestions from other .svelte files\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Svelte-improvement.png\"\/><\/p>\n<h3 id=\"all_in_one_diff_viewer\">All-in-one diff viewer<\/h3>\n<p>WebStorm 2023.3 introduces a revamped way to review changes. Now, instead of going through each file one by one, you can see all of the modified files from a changeset in a single, scrollable frame. This new diff viewer is accessible from the <em>Git Log<\/em> tool window and currently works with JetBrains Space reviews. We&#8217;re also working on making it compatible with GitLab and GitHub.<\/p>\n<p><img decoding=\"async\" alt=\"Showing the new All-in-one diff viewer\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/IJ-AllInOne-diff.png\"\/><\/p>\n<h3 id=\"ai_assistant_improvements\">AI Assistant improvements<\/h3>\n<p>We\u2019re continuing to implement improvements to our <a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/idea\/2023\/06\/ai-assistant-in-jetbrains-ides\">AI Assistant plugin<\/a> to make it an even more powerful and useful tool. For WebStorm 2023.3, we\u2019ve added detection for state management in the project and context support in <code>package.json<\/code>.<\/p>\n<p><img decoding=\"async\" alt=\"Showing asking AI Assistant about the state management in the project.\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/AI-package-json.png\"\/><\/p>\n<h4 id=\"support_ai_name_suggestions\">Support AI name suggestions<\/h4>\n<p>The AI Assistant has much better name suggestion support \u2013 it now provides name suggestions when using refactorings like <em>Introduce Variable<\/em>.<\/p>\n<p><img decoding=\"async\" alt=\"Showing the AI suggesting useful rename options\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/AI-rename.gif\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/AI-rename.png\"\/><\/p>\n<h3 id=\"speed_search_shortcut\"><em>Speed<\/em><em> Search<\/em> shortcut<\/h3>\n<p>The <em>Speed Search<\/em> functionality, allowing you to quickly navigate within tool windows and dialogs, is now available via a shortcut. Once the focus is placed on a tree or list, you can easily invoke the search from the tool window\u2019s <em>Options<\/em> menu by pressing <em>\u2318F<\/em> on macOS, or <em>Ctrl+F<\/em> on Windows or Linux, or simply by starting to type your query.<\/p>\n<p><img decoding=\"async\" alt=\"The Speed Search option in the project tool window settings.\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Speed-Search.png\"\/><\/p>\n<p>You can also assign a custom shortcut for the <em>Speed Search<\/em> function in <em>Settings | Keymap<\/em>.<\/p>\n<h3 id=\"http_client_improvements\">HTTP Client improvements<\/h3>\n<h4 id=\"enhanced_structure_view\">Enhanced <em>Structure<\/em> view<\/h4>\n<p>We\u2019ve improved the <em>Structure<\/em> view in the HTTP Client to streamline navigation within large <em>.http<\/em> files. This update introduces color-coded labels for request types and provides a clearer listing of their contents.<\/p>\n<p><img decoding=\"async\" alt=\"Showing the new structure window formatting that makes it more readable\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Http-client-structure.png\"\/><\/p>\n<h4 id=\"support_for_in_place_variables\">Support for in-place variables<\/h4>\n<p>The HTTP Client has been updated to include support for declaring variables using <code>@<\/code>. Now, you don\u2019t need any extra environment files to reuse values between many requests, and the IDE provides code completion for these values so you can easily incorporate them in requests.<\/p>\n<p><img decoding=\"async\" alt=\"in place variables being shown in the editor\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Http-client-vars.png\"\/><\/p>\n<h4 id=\"oauth_support\">OAuth 2.0 Support<\/h4>\n<p>The HTTP Client now provides support for authentication with OAuth 2.0 password and client credential grant types. With this update, you can reference authentication data in your requests using the new syntax <code>{$auth.token(&quot;my-keycloak1&quot;)}<\/code> and navigate to the JSON file containing the authentication details.<\/p>\n<p><img decoding=\"async\" alt=\" HTTP Client now provides support for authentication showing the password\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Http-client-OAuth2.gif\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/10\/Http-client-OAuth2.png\"\/><\/p>\n<p>This change streamlines the request execution process, eliminating the need to manually retrieve tokens. The IDE now automatically includes these tokens in your requests, and also displays the login form in the interactive popup dialog displaying the IDE built-in web browser.<\/p>\n<h2 id=\"other_highlights\">Other highlights<\/h2>\n<p>Here\u2019s an overview of the key improvements for various technologies supported by WebStorm, along with some notable bug fixes.<\/p>\n<p><strong>JavaScript, TypeScript, Markup, and style sheet languages<\/strong><\/p>\n<ul>\n<li>We\u2019ve fixed the issue causing the Tailwind CSS completion not to work in Yarn PnP projects (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-61271\" target=\"_blank\" rel=\"noopener\">WEB-61271<\/a>).<\/li>\n<li>We\u2019ve fixed the issue with the <em>Color Picker<\/em> not working for RGB numbers (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-54459\" target=\"_blank\" rel=\"noopener\">WEB-54459<\/a>).<\/li>\n<\/ul>\n<p><strong>Frameworks and technologies<\/strong><\/p>\n<ul>\n<li>We\u2019ve fixed the issue with Vue where the JSdoc type for props was not working (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-60787\" target=\"_blank\" rel=\"noopener\">WEB-60787<\/a>).<\/li>\n<li>We\u2019ve fixed the issue causing the <em>Component or directive matching tr element is out of scope of the current template<\/em> on an HTML <code>&lt;tr&gt;<\/code> tag used inside an <code>&lt;ng-template&gt;<\/code> tag (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-62508\" target=\"_blank\" rel=\"noopener\">WEB-62508<\/a>).<\/li>\n<\/ul>\n<p><strong>User experience<\/strong><\/p>\n<ul>\n<li>We\u2019ve simplified the default glob patterns to make it easier to work with glob patterns in our setting for Prettier, ESLint, and Stylelint (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-63021\" target=\"_blank\" rel=\"noopener\">WEB-63021<\/a>).<\/li>\n<li>We\u2019ve updated the list of the file templates in the new file popup to make the list more logical (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-61053\" target=\"_blank\" rel=\"noopener\">WEB-61053<\/a>).<\/li>\n<\/ul>\n<p><strong>Notable fixes<\/strong><\/p>\n<ul>\n<li>We\u2019ve fixed the long-running issue causing the <em>Use code style based on Prettier for this project<\/em> option to have no effect. Part of the solution is a banner that now appears if the code style configured in the IDE doesn&#8217;t match the code style specified by the <em>.prettierrc<\/em> file. (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-41888\" target=\"_blank\" rel=\"noopener\">WEB-41888<\/a>).<\/li>\n<\/ul>\n<p>That\u2019s it for today. For the full list of improvements available in the latest EAP build, check out the <a href=\"https:\/\/youtrack.jetbrains.com\/articles\/WEB-A-233538444\/\" target=\"_blank\" rel=\"noopener\">release notes<\/a>. Stay tuned for our next EAP digest!<\/p>\n","protected":false},"author":743,"featured_media":389135,"comment_status":"closed","ping_status":"closed","template":"","categories":[826],"tags":[91,8241],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/397086"}],"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\/743"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=397086"}],"version-history":[{"count":10,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/397086\/revisions"}],"predecessor-version":[{"id":400814,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/397086\/revisions\/400814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media\/389135"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=397086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=397086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=397086"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=397086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}