{"id":92385,"date":"2020-11-05T16:00:21","date_gmt":"2020-11-05T15:00:21","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=webstorm&#038;p=92385"},"modified":"2020-11-09T18:07:06","modified_gmt":"2020-11-09T17:07:06","slug":"webstorm-2020-3-eap-7","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/11\/webstorm-2020-3-eap-7","title":{"rendered":"WebStorm 2020.3 EAP #7: Tailwind CSS Support, Multi-File Templates, and More"},"content":{"rendered":"<p>WebStorm 2020.3 EAP build #7 is now available with a lot of enhancements! Please try them out and <a href=\"https:\/\/youtrack.jetbrains.com\/issues\/WEB\" target=\"_blank\" rel=\"noopener\">share your feedback<\/a> with us so we can make v2020.3 better for you.<!--more--><\/p>\n<\/p>\n<p>If you\u2019re unfamiliar with our Early Access Program, 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 why you should take part in it (spoiler: you could get a free WebStorm license). To catch up on all the new features, check out our <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/tag\/webstorm-2020-3\/\">previous EAP 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. Or you can 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><strong>Important! WebStorm EAP builds are not fully tested and might be unstable.<\/strong><\/p>\n<p>Here are some of the highlights of WebStorm 2020.3 EAP #7. For the full list of issues fixed in this update, see the <a href=\"https:\/\/confluence.jetbrains.com\/display\/WI\/WebStorm+203.5600.36+Release+Notes\" target=\"_blank\" rel=\"noopener\">release notes<\/a>.<\/p>\n<ul>\n<li><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/11\/webstorm-2020-3-eap-7#tailwind_css_support\">Tailwind CSS support<\/a><\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/11\/webstorm-2020-3-eap-7#better_formatting_for_template_literals_with_css_and_html\">Better formatting for template literals with CSS and HTML<\/a><\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/11\/webstorm-2020-3-eap-7#custom_multi_file_templates\">Custom multi-file templates<\/a><\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/11\/webstorm-2020-3-eap-7#a_new_mode_for_reading_project_files\">A new mode for reading project files<\/a><\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/11\/webstorm-2020-3-eap-7#improvements_to_lightedit_mode\">Improvements to LightEdit mode<\/a><\/li>\n<\/ul>\n<h2 id=\"tailwind_css_support\">Tailwind CSS support<\/h2>\n<p>One of the most long-awaited improvements, support for Tailwind CSS, has finally landed in WebStorm 2020.3! Let\u2019s see how this can help you work with this popular framework more efficiently.<\/p>\n<p>First, you can now expect WebStorm to autocomplete Tailwind classes in your HTML files and after the <code>@apply<\/code> directive.<\/p>\n<p><img decoding=\"async\" alt=\"tailwind-completion-after-apply\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/tailwind-completion-after-apply.png\"\/><\/p>\n<p>You\u2019ll also see completion suggestions for pseudo-class variants.<\/p>\n<p><img decoding=\"async\" alt=\"tailwind-completion-for-pseudo-class-variants\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/tailwind-completion-for-pseudo-class-variants.png\"\/><\/p>\n<p>If you hover over a class in your HTML and CSS files, the IDE will show you the preview of the resulting CSS. You can also see this preview when autocompleting your code with the help of the <em>Documentation<\/em> popup (<em>F1<\/em><em>\/Ctrl+Q<\/em>).<\/p>\n<p><img decoding=\"async\" alt=\"tailwind-class-declaration-preview-from-doc-popup\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/tailwind-class-declaration-preview-from-doc-popup.png\"\/><\/p>\n<p>Besides that, WebStorm now supports the customizations you make using <em>tailwind.config.js<\/em> files. The IDE analyzes those files and provides completion based on your customizations. If you define a custom theme with new colors, for example, you\u2019ll see newly generated classes with the name of the custom color in the completion popup.<\/p>\n<p><img decoding=\"async\" alt=\"tailwind-customization-support\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/tailwind-customization-support.png\"\/><\/p>\n<p>Lastly, Tailwind CSS support is provided through the <a href=\"https:\/\/plugins.jetbrains.com\/plugin\/15321-tailwind-css\" target=\"_blank\" rel=\"noopener\">corresponding plugin<\/a> bundled with WebStorm. If you\u2019re using any other JetBrains IDE and want to take advantage of the new functionality, you can install the plugin from <em>Preferences\/Settings | Plugins<\/em>.<\/p>\n<p>That\u2019s all for now about Tailwind CSS support. Please try the existing features and <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-42792\" target=\"_blank\" rel=\"noopener\"><strong>share your feedback<\/strong><\/a><strong> with us<\/strong>! We plan to improve this support further.<\/p>\n<h2 id=\"better_formatting_for_template_literals_with_css_and_html\">Better formatting for template literals with CSS and HTML<\/h2>\n<p>With libraries like styled-components and lit-html becoming more popular, quite a lot of CSS and HTML code is now written inside JavaScript template literals. These blocks in JavaScript code can also have expression interpolations with JavaScript in them.<\/p>\n<p>Starting with v2020.3, WebStorm will properly support code formatting in JavaScript for multiline CSS and HTML blocks with JavaScript inside them. The IDE will indent correctly when you add code in these more complex template literals or reformat your code.<\/p>\n<p><img decoding=\"async\" alt=\"better-formatting-for-css-html-template-literals\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/better-formatting-for-css-html-template-literals.gif\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/better-formatting-for-css-html-template-literals.png\"\/><\/p>\n<h2 id=\"custom_multi_file_templates\">Custom multi-file templates<\/h2>\n<p>We\u2019ve implemented the ability to add custom <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/using-file-and-code-templates.html\" target=\"_blank\" rel=\"noopener\">file templates<\/a> that create several files at once. This can be handy when, for example, you need to add a <em>.js<\/em> file along with a test file for it.<\/p>\n<p>To give this new functionality a try, go to <em>Preferences\/Settings | Editor | File and Code Templates<\/em>, click <em>+<\/em> to create a new template, and then click the <em>Create Child Template File<\/em> icon next to <em>+<\/em>. You\u2019ll see a new node appear under the parent file.<\/p>\n<p>In the <em>File name<\/em> field, you can specify a pattern for generating a file name and a path to it using the <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/using-file-and-code-templates.html#syntax\" target=\"_blank\" rel=\"noopener\">supported syntax<\/a>.<\/p>\n<p><img decoding=\"async\" alt=\"create-js-multi-file-template\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/create-js-multi-file-template.gif\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/create-js-multi-file-template.png\"\/><\/p>\n<p>Once you\u2019ve saved the new template, you can start using it as usual.<\/p>\n<p><img decoding=\"async\" alt=\"multi-file-js-template-in-action\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/multi-file-js-template-in-action.gif\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/multi-file-js-template-in-action.png\"\/><\/p>\n<h2 id=\"a_new_mode_for_reading_project_files\">A new mode for reading project files<\/h2>\n<p>Going through huge library files or other large project files can be a cumbersome process because of the multiple comments they contain. To make it a bit easier, we\u2019ve implemented a new <em>Reader<\/em> mode.<\/p>\n<p>This new mode is available for library and read-only files. To try it out, open the file you need and click on the book icon located in the top right-hand corner of the IDE. To exit <em>Reader<\/em> mode, click on that icon again.<\/p>\n<p><img decoding=\"async\" alt=\"reader-mode-webstorm\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/reader-mode-webstorm.png\"\/><\/p>\n<p>If you\u2019d like to turn this feature on by default or tweak some other settings for it, go to <em>Preferences\/Settings | Editor | Reader Mode<\/em>.<\/p>\n<h2 id=\"improvements_to_lightedit_mode\">Improvements to LightEdit mode<\/h2>\n<p>WebStorm 2020.3 also comes with several usability improvements to <em>LightEdit<\/em> mode, a feature for quick file editing that we <a href=\"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2020\/04\/webstorm-2020-1#lightedit-mode\">introduced in v2020.1<\/a>.<\/p>\n<p>First, you can now use <em>LightEdit <\/em>mode in parallel with an already launched instance of the IDE. Previously, if WebStorm was running, the file would open up there instead of in the new quick editing mode. To try this out, type the name of your <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/working-with-the-ide-features-from-command-line.html\" target=\"_blank\" rel=\"noopener\">launcher script<\/a> in the command line, followed by <em>-e <\/em>and a file name. The IDE will also let you create a new file \u2013 simply add the name of the file you want to create after <em>-e<\/em>.<\/p>\n<p><img decoding=\"async\" alt=\"open-lightedit-ws2020-3\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/open-lightedit-ws2020-3.png\"\/><\/p>\n<p>Without <em>-e<\/em>, WebStorm will open the file in a temporary project that lets you use all the IDE features.<\/p>\n<p>We\u2019ve also added the status bar to the <em>LightEdit<\/em> mode window. It provides quick access to the full set of IDE features and makes it easier to distinguish that the file is open in a special mode.<\/p>\n<p><img decoding=\"async\" alt=\"lightedit-mode-status-bar-ws\" width=\"600\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/11\/lightedit-mode-status-bar-ws.png\"\/><\/p>\n<p>Here are some other important improvements:<\/p>\n<ul>\n<li>\nWe\u2019ve implemented support for the  <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/IDEA-236965\" target=\"_blank\" rel=\"noopener\"><em>-w (&#8211;wait)<\/em> option<\/a>.\n<\/li>\n<li>\nFiles opened in <em>LightEdit<\/em> mode are reloaded automatically every time you focus on the editor. You can now do a forced refresh \u2013 use the new <em>Reload from Disk<\/em> action available under <em>File<\/em> in the main menu.\n<\/li>\n<li>\nIt\u2019s no longer possible to open a file in <em>LightEdit<\/em> mode from the <em>Welcome<\/em> screen. If you try to open a file in this way, WebStorm will create a temporary project for it. This was the default behavior before we introduced <em>LightEdit<\/em> mode. We\u2019re bringing it back because the new way of doing things proved to be less intuitive.\n<\/li>\n<\/ul>\n<p>That\u2019s it for the biggest highlights. Please report any issues you encounter to our <a href=\"https:\/\/youtrack.jetbrains.com\/issues\/WEB\" target=\"_blank\" rel=\"noopener\">issue tracker<\/a>, and stay tuned for next week\u2019s update!<\/p>\n<p><em>The WebStorm team<\/em><\/p>\n","protected":false},"author":989,"featured_media":92542,"comment_status":"closed","ping_status":"closed","template":"","categories":[826],"tags":[91,6356,6260],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/92385"}],"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=92385"}],"version-history":[{"count":3,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/92385\/revisions"}],"predecessor-version":[{"id":94009,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/92385\/revisions\/94009"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media\/92542"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=92385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=92385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=92385"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=92385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}