{"id":77399,"date":"2020-09-23T14:58:16","date_gmt":"2020-09-23T14:58:16","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=webstorm&#038;p=77399"},"modified":"2020-09-23T16:57:49","modified_gmt":"2020-09-23T16:57:49","slug":"webstorm-2020-3-eap-1","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/09\/webstorm-2020-3-eap-1","title":{"rendered":"WebStorm 2020.3 Early Access Program Is Now Open"},"content":{"rendered":"<p>Hi everyone! Today we\u2019re starting the Early Access Program (EAP) for <a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/08\/webstorm-2020-3-roadmap\">WebStorm 2020.3<\/a>. Although it\u2019s just the beginning, you can already find quite a few exciting improvements in the first EAP build<!--more-->, including the new <em>Welcome<\/em> screen, the ability to sync the current theme with your OS settings, and full pnpm support. Read on to learn more!<\/p>\n<\/p>\n<p><img decoding=\"async\" alt=\"blog-eap-webstorm-2020-3\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/blog-2x-1.png\"><\/p>\n<p>As usual, we encourage you not only to read the EAP blog posts but also to <strong>try the latest builds and share your feedback with us<\/strong>. If you\u2019re wondering why you might do the latter, check out <a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/09\/webstorm-eap\">this<\/a> blog post where we explain what the EAP is about and share some reasons why to take part in it (spoiler: you could get a free WebStorm license).<\/p>\n<p><strong>Important! WebStorm EAP builds are not fully tested and might be unstable.<\/strong><\/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 2020.3 EAP<\/a><\/p>\n<p>Please share your feedback in the comments below and report any issues you encounter to our <a href=\"https:\/\/youtrack.jetbrains.com\/issues\/WEB\" target=\"_blank\" rel=\"noopener\">issue tracker<\/a><a href=\"https:\/\/youtrack.jetbrains.com\/issues\/WEB\" target=\"_blank\" rel=\"noopener\">.<\/a><\/p>\n<p>The full list of the latest enhancements available in WebStorm 2020.3 EAP #1 (build 203.3645.36) can be found in the <a href=\"https:\/\/confluence.jetbrains.com\/display\/WI\/WebStorm+203.3645.36+Release+Notes\" target=\"_blank\" rel=\"noopener\">release notes<\/a>. Below you can find some of the main highlights:<\/p>\n<ul>\n<li>\n<strong><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/09\/webstorm-2020-3-eap-1#reworked_welcome_screen_and_faster_initial_setup\">Look and feel<\/a><\/strong>: reworked <em>Welcome<\/em> screen, automatic syncing of the IDE theme with the macOS and Windows settings, the ability to split the editor with a drag and drop, and a new way of presenting <em>Search Everywhere<\/em> results.\n<\/li>\n<li>\n<strong><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/09\/webstorm-2020-3-eap-1#create_a_react_component_from_its_usage\">JavaScript and related technologies<\/a><\/strong>: the ability to create a React component from its usage and full support for pnpm.\n<\/li>\n<\/ul>\n<h2 id=\"reworked_welcome_screen_and_faster_initial_setup\">Reworked Welcome screen and faster initial setup<\/h2>\n<p>We\u2019re continuing to improve WebStorm\u2019s look and feel. This time, we\u2019re happy to introduce the updated version of the <em>Welcome<\/em> screen. The main goals behind this change were to simplify the initial setup of the IDE and make it easier to manage some of the key settings. Let\u2019s see what\u2019s changed.<\/p>\n<p>When you start WebStorm for the very first time, you will no longer see the configuration wizard \u2014 only the <em>Privacy Policy<\/em> and <em>License<\/em> dialogs will be shown. All the initial configuration can now be done from the new <em>Welcome<\/em> screen.<\/p>\n<p><img decoding=\"async\" alt=\"initial-setup-ws-2020-3-welcome-screen\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/initial-setup-ws-2020-3-welcome-screen.png\"><\/p>\n<p>As soon as you open your projects, they will be displayed on the right, with the <em>New Project<\/em>, <em>Open<\/em>, and <em>Get from VCS<\/em> buttons shown in the top right corner.<\/p>\n<p><img decoding=\"async\" alt=\"welcome-screen-2020-3-ws-search\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/welcome-screen-2020-3-ws-search.png\"><\/p>\n<p>On the left side of the <em>Welcome<\/em> screen, you\u2019ll find the <em>Customize<\/em> and <em>Plugins<\/em> tabs. The <em>Customize<\/em> tab lets you tweak the most commonly used settings like IDE themes and fonts. The <em>Plugins <\/em>tab provides quick access to the list of available plugins and allows you to install them right from there.<\/p>\n<p><img decoding=\"async\" alt=\"welcome-screen-2020-3-customize\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/welcome-screen-2020-3-customize.png\"><\/p>\n<p>Lastly, there\u2019s the <em>Help<\/em> menu in the bottom left corner of the <em>Welcome<\/em> screen. You can use it to quickly access tutorial videos about WebStorm and other resources to help you get started.<\/p>\n<h2 id=\"sync_your_ide_theme_with_os_settings\">Sync your IDE theme with OS settings<\/h2>\n<p>Another improvement around look and feel is the ability to sync your IDE theme with the OS settings. For now, this improvement is <strong>available only for macOS and Windows users<\/strong> but we plan to implement it for Linux users later, too.<\/p>\n<p>To try out the new functionality, go to <em>Preferences\/Settings | Appearance &amp; Behavior | Appearance | Theme<\/em> and select the <em>Sync with OS<\/em> option there. Click on the gear icon next to the<em> Theme<\/em> drop-down menu to choose the preferred light and dark themes. The IDE will automatically switch to those themes whenever you change the theme globally on your machine.<\/p>\n<p><img decoding=\"async\" alt=\"sync-with-os-theme\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/sync-with-os-theme.png\"><\/p>\n<h2 id=\"split_the_editor_with_drag_and_drop\">Split the editor with drag and drop<\/h2>\n<p>With v2020.3, reorganizing your editor workspace by splitting the editor has become even simpler. Now, you can start editing files side by side by dragging the desired file tab to the editor area where you want it to be and dropping it there. The split actions within the tab\u2019s context menu are still available, too.<\/p>\n<p><img decoding=\"async\" alt=\"split-tabs-with-drag-drop\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/split-tabs-with-drag-drop.gif\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/split-tabs-with-drag-drop.png\"><\/p>\n<h2 id=\"a_new_way_of_presenting_search_everywhere_results\">A new way of presenting Search Everywhere results<\/h2>\n<p>Starting with v2020.3, all the findings in the <em>Search Everywhere<\/em> popup (<em>Shift+Shift<\/em>) will be shown in a slightly different way. Specifically, the search results are no longer grouped by type. Instead, they are grouped based on their relevance to the search query.<\/p>\n<p><img decoding=\"async\" alt=\"mixed-results-search-everywhere-webstorm\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/mixed-results-search-everywhere-webstorm.png\"><\/p>\n<p>If the old way the search results were presented worked better for you, you can switch back to it by unticking the <em>search.everywhere.mixed.results<\/em> option in the <em>Experimental Features<\/em> dialog. To access it, use <em>Search Everywhere<\/em>.<\/p>\n<h2 id=\"create_a_react_component_from_its_usage\">Create a React component from its usage<\/h2>\n<p>Let\u2019s move on to improvements around JavaScript and related technologies. One of them is the ability to create a React component from an unresolved reference. <\/p>\n<p>As you might know, WebStorm constantly checks that referenced variables and fields are valid. When they aren\u2019t, in many cases it can suggest creating the relevant code construct for you. Now it can do this for React components, too. Place the caret at an unresolved component, then press <em>Alt+Enter<\/em> and select the corresponding inspection. That\u2019s it!<\/p>\n<p><img decoding=\"async\" alt=\"create-react-component-from-usage\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/create-react-component-from-usage.gif\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/create-react-component-from-usage.png\"><\/p>\n<h2 id=\"full_support_for_pnpm\">Full support for pnpm<\/h2>\n<p>Last but not least, WebStorm now fully supports the <a href=\"https:\/\/pnpm.js.org\/\" target=\"_blank\" rel=\"noopener\">pnpm<\/a> package manager, along with npm and yarn. Over the last year, we\u2019ve been gradually adding improvements around pnpm support and fixing the <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-32460\" target=\"_blank\" rel=\"noopener\">related issues<\/a>. With v2020.3, we\u2019ve put the finishing touches to it.<\/p>\n<p>For example, if you open a project with a pnpm-lock file and have pnpm installed on your machine, WebStorm will automatically change the package manager for this project to pnpm. Also, there\u2019s now a dedicated <em>pnpm<\/em> option in the list of package managers under <em>Preferences\/Settings | Languages and Frameworks | Node.js and NPM<\/em>.<\/p>\n<p><img decoding=\"async\" alt=\"pnpm-package-manager-in-preferences\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/09\/pnpm-package-manager-in-preferences.png\"><\/p>\n<p>Other things like the ability to run and debug scripts or the <em>Run \u2018pnpm install\u2019 <\/em>warning are already available in v2020.2.<\/p>\n<p>That\u2019s it in terms of the biggest highlights. This build also comes with some smaller, but still important, changes, such as:<\/p>\n<ul>\n<li>\nUsages of the symbol under caret are now highlighted faster, as soon as the caret is placed at that symbol.\n<\/li>\n<li>\nWe\u2019ve changed the name of the <em>VCS<\/em> group in the main menu. It\u2019s now named after the version control system that you\u2019re currently using, e.g. Git. We made this change as terms like Git are used more commonly than VCS and should be clearer for more people. We\u2019ve also rearranged the items under <em>Git<\/em> in the main menu to make the most common Git operations easier to access.\n<\/li>\n<\/ul>\n<p><em>The WebStorm team<\/em><\/p>\n","protected":false},"author":989,"featured_media":77400,"comment_status":"closed","ping_status":"closed","template":"","categories":[826],"tags":[91,6305,1290,6260],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/77399"}],"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\/989"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=77399"}],"version-history":[{"count":4,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/77399\/revisions"}],"predecessor-version":[{"id":89486,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/77399\/revisions\/89486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media\/77400"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=77399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=77399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=77399"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=77399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}