{"id":23160,"date":"2018-11-20T17:01:16","date_gmt":"2018-11-20T17:01:16","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=10036"},"modified":"2018-11-22T16:06:27","modified_gmt":"2018-11-22T16:06:27","slug":"webstorm-2018-3","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2018\/11\/webstorm-2018-3","title":{"rendered":"WebStorm 2018.3: improved Angular support, better autoimports, GitHub Pull Requests, and more"},"content":{"rendered":"<p>\u2b50\ufe0f<strong>WebStorm 2018.3 is now here!<\/strong>\u2b50\ufe0f<\/p>\n<p>WebStorm 2018.3 brings lots of exciting new features and enhancements across the board. Much-improved Angular support, GitHub Pull Requests, debug for Node.js worker threads, and lots more await!<\/p>\n<p><a href=\"https:\/\/www.jetbrains.com\/webstorm\/whatsnew\/\" target=\"_blank\" rel=\"noopener\">Explore the top new features and download WebStorm 2018.3 on our website.<\/a><\/p>\n<p>In this blog post we would like to share with you the detailed release notes for the WebStorm 2018.3 update. They are compiled from the <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/tag\/webstorm-2018-3\/\">EAP blog posts<\/a> that we&#8217;ve been publishing here for the past two months.<\/p>\n<p>Here are the features and improvements grouped by the WebStorm subsystems:<\/p>\n<ul>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#javascript_and_typescript_support\">JavaScript and TypeScript support<\/a>: autoimports in JavaScript for symbols from the project&#8217;s dependencies, parameter hints in JavaScript, convert to a variable with arrow function, better &#8216;null&#8217; and &#8216;undefined&#8217; checks, suggestions for variable names, and TypeScript 3.1.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#html_and_json_support\">HTML and JSON support<\/a>: accessibility inspections for HTML, improved Remove action for HTML and JSX tags, and improvements in JSON support.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#css_support\">Style sheets<\/a>: Extract ruleset and move it to another file, new code style options, and updated inspection for CSS shorthand properties.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#development_with_angular\">Development with Angular<\/a>: major improvements in the Angular templates support and fixes in AngularJS support.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#development_with_react\">Development with React<\/a>: completion for lifecycle methods and new inspection for the undefined components.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#development_with_vue\">Development with Vue.js<\/a>: support for Vuetify.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#node_js_development\">Node.js development<\/a>: completion for previous package versions in package.json and debugging Node.js worker threads.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#editor\">Editor<\/a>: multiline Todos, indent size in the status bar, and disabling code formatting for specific files and folders.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#accessibility\">Accessibility<\/a>: new high-contrast UI theme and screen reader support for gutter icons.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#version_control\">Version Control<\/a>: Git submodules, tool window for GitHub Pull Requests, and better support for precommit hooks.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#linters\">Linters integrations<\/a>: suppress comments for TSLint rules, linting TypeScript files with ESLint, and an option to override severity from ESLint or TSLint config.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#debugger\">Debugging<\/a>: Live Edit without Chrome extension, and adding multiple variables to debugger&#8217;s watches.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#testing\">Testing<\/a>: Structure view for test files, Go to failure for tests, and running a single Protractor test or suite.<\/li>\n<li><a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2018\/11\/webstorm-2018-3\/#other_ide_improvements\">Other IDE improvements<\/a>: unified Search popup, a new plugin configuration, and drag folder to Welcome screen to open it.<\/li>\n<\/ul>\n<p align=\"center\"><a class=\"jb-download-button\" href=\"https:\/\/www.jetbrains.com\/webstorm\/download\" target=\"_blank\" rel=\"noopener\">Download WebStorm 2018.3<\/a><\/p>\n<h2 id=\"javascript_and_typescript_support\">JavaScript and TypeScript support<\/h2>\n<h3 id=\"auto_import_symbols_from_the_project_s_dependencies\">Autoimport symbols from the project\u2019s dependencies<\/h3>\n<p>We have extended the autoimports in JavaScript files to symbols defined in the project\u2019s dependencies. This will work if there\u2019s a TypeScript definition file present inside the package (like in <a href=\"https:\/\/www.npmjs.com\/package\/moment\" target=\"_blank\" rel=\"noopener\">moment<\/a> or <a href=\"https:\/\/www.npmjs.com\/package\/redux\" target=\"_blank\" rel=\"noopener\">redux<\/a>) or if the package contains sources written as ES modules.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9857\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-auto-import-from-node-modules.png\" alt=\"auto-import-from-node-modules\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-auto-import-from-node-modules.gif\" \/><\/p>\n<p>And of course, autoimports in JavaScript work for symbols exported in the ES modules in your project.<!--more--><\/p>\n<h3 id=\"parameter_hints_in_javascript\">Parameter hints in JavaScript<\/h3>\n<p>If you work with TypeScript files in WebStorm, you should be familiar with the parameter hints that show you the names of a method\u2019s parameters. Now, we have enabled similar parameter hints in JavaScript files as well!<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9859\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-parameter-hints-in-js.png\" alt=\"parameter-hints-in-js\" width=\"600\" \/><\/p>\n<p>You can configure their behavior or disable them completely in <em>Preferences | Editor | General | Appearance \u2013 Show parameter name hints<\/em>. Let us know what you think about this feature!<\/p>\n<h3 id=\"convert_function_to_variable_holding_arrow_function\">Convert a function to a variable holding arrow function<\/h3>\n<p>You can now very easily convert a function to a variable that holds an arrow function. Press <em>Alt-Enter<\/em> on the name in the function definition and select the corresponding intention!<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9916\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-convert-to-var-and-arrow-function.png\" alt=\"convert-to-var-and-arrow-function\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-convert-to-var-and-arrow-function.gif\" \/><\/p>\n<p>The new intention also works for methods in classes. Here\u2019s an example with a React component: substitute an arrow function for the event handler with the field, and you can now remove the binding in the constructor.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9917\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-convert-to-field-with-arrow-function.png\" alt=\"convert-to-field-with-arrow-function\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-convert-to-field-with-arrow-function.gif\" \/><\/p>\n<h3 id=\"better_null_and_undefined_check\">Better \u2018null\u2019 and \u2018undefined\u2019 check<\/h3>\n<p>With the new inspection called <em>Object in \u2018null\u2019 or \u2018undefined\u2019<\/em>, WebStorm can now better detect situations when you will get a TypeError because a method is invoked on a value that is <code>undefined<\/code> or <code>null<\/code>, or it is passed to a function, or its property is used.<!--more--><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9918\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-is-null-or-undefined.png\" alt=\"is-null-or-undefined\" width=\"600\" \/><\/p>\n<p>We have also improved the Unsound type guard inspection, which validates the conditions with <code>typeof<\/code>. Now it can warn you if the <code>== null<\/code> or <code>!= null<\/code> check is always true or always false.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9919\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-null-check-is-always-false.png\" alt=\"null-check-is-always-false\" width=\"600\" \/><\/p>\n<h3 id=\"completion_for_overrides_adds_method_body\">Completion for overrides adds method body<\/h3>\n<p>Now, when you want to override a method from the parent class or interface and select it from the completion suggestions, WebStorm will automatically add parameters, super() call and, if possible, the type info. Here\u2019s an example of the generated method:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9944\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-override-completion-adds-method-body.png\" alt=\"Generated method after using code completion for override\" width=\"600\" \/><\/p>\n<p>You can disable this behavior in <em>Preferences | Languages and Frameworks | JavaScript &#8211; Expand method bodies in completion for overrides<\/em>.<\/p>\n<h3 id=\"suggestions_for_variable_names\">Suggestions for variable names<\/h3>\n<p>Among the IDE JavaScript preferences, you can find a new option called <em>Suggest variable names<\/em>. This feature comes from IntelliJ IDEA\u2019s support for Kotlin, where it first appeared and is on by default.<\/p>\n<p>This new option provides suggestions for variable names based on the names of classes, types, and interfaces defined in the project, and the libraries you use and those found in standard APIs.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9943\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-suggestions-for-variable-names.png\" alt=\"Suggestions for variable names\" width=\"600\" \/><\/p>\n<h3 id=\"typescript_3.1\">TypeScript 3.1<\/h3>\n<p>TypeScript 3.1 has been released and WebStorm now supports its new features: mappable tuple and array types, and new property assignments.<br \/>\nWe have updated WebStorm\u2019s bundled TypeScript to version 3.1 which was released just recently. You can select this version in <em>Preferences | Languages and Frameworks | TypeScript<\/em>.<\/p>\n<p>The new intention to convert Promises to async functions, which was added in TypeScript 3.1, works in TypeScript files in WebStorm as well. Note that the compilation target in your tsconfig.json file should be set to <code>\u201ces6\u201d<\/code>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9920\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-typescript-3-1-async.png\" alt=\"typescript-3-1-async\" width=\"600\" \/><\/p>\n<h3>Other improvements<\/h3>\n<ul>\n<li>We have sped up the <em>Redundant local variable inspection<\/em> in JavaScript and TypeScript making code analysis faster. In case of the TypeScript sources that we use for performance testing, the project-wide code analysis (via Inspect code) now runs 30% faster than before.<\/li>\n<li>In the JavaScript and TypeScript code style settings, there\u2019s now a new option <em>Spaces within array brackets.<\/em><\/li>\n<\/ul>\n<h2 id=\"html_and_json_support\">HTML and JSON support<\/h2>\n<h3 id=\"accessibility_inspections_for_html\">Accessibility inspections for HTML<\/h3>\n<p>To help you to write more accessible HTML code, we\u2019ve added a bunch of new inspections that are based on recommendations from the <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/\" target=\"_blank\" rel=\"noopener\">Web Content Accessibility Guidelines 2.0 (WCAG)<\/a> developed by W3C. Even though these inspections can\u2019t guarantee that the resulting website is going to be 100% accessible, we still think that they can help and have a lot of value.<\/p>\n<p>You can find the new inspections under the group HTML &#8211; Accessibility in <em>Preferences | Editor | Inspections<\/em>. We have enabled most of them by default, with the exception of one inspection that suggests adding a title attribute for the link tags (technique <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H33.html\" target=\"_blank\" rel=\"noopener\">H33 in WCAG<\/a>), as this should be used with caution, and another one that suggests adding a summary attribute to a table (<a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H73.html\" target=\"_blank\" rel=\"noopener\">H73 in WCAG<\/a>) which is recommended only for tables with a complex structure.<\/p>\n<p>All these inspections have quick fixes that you can see and apply if you press <em>Alt-Enter<\/em>.<\/p>\n<p>In addition to the inspections that warn you about missing lang attributes for the <em>html<\/em> tag, we\u2019ve added completion for <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_ISO_639-1_codes\" target=\"_blank\" rel=\"noopener\">language two-letter codes<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9961\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-completion-for-language-codes.png\" alt=\"Completion for language two-letter codes\" width=\"600\" \/><\/p>\n<p>Here are examples of other inspections in this group.<\/p>\n<p>Add an <code>alt<\/code> attribute for the image:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9962\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-insect-alt-attribute-for-image-tag.png\" alt=\"Add an alt attribute for the image\" width=\"600\" \/><\/p>\n<p>Add a label for <code>input<\/code> and <code>textarea<\/code> elements:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9963\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-add-label-for-input.png\" alt=\"Add a label for input and textarea elements\" width=\"600\" \/><\/p>\n<h3 id=\"improved_remove_action_for_html_and_jsx\">Improved Remove action for HTML and JSX tags<\/h3>\n<p>The <em>Unwrap\/Remove action<\/em> for tags (which, as the name suggests, removes the opening and closing tag) now automatically updates the indents, so you no longer need to run Reformat code or fix them manually.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9870\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-remove-tag.png\" alt=\"remove-tag\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-remove-tag.gif\" \/><\/p>\n<p>You can run this action with <em>Shift-Cmd-Backspace<\/em> on macOS and <em>Ctrl-Shift-Delete<\/em> on Windows and Linux, or by using the Find Action popup.<\/p>\n<p>Now it is also available as an intention, which means you can just press <em>Alt-Enter<\/em> on the tag and select <em>Remove tag<\/em> from the list.<\/p>\n<p>In other good news, the <em>Remove tag<\/em>\u00a0action now also works in JSX code.<\/p>\n<h3 id=\"improvements_in_json_support\">Improvements in JSON support<\/h3>\n<p>We\u2019ve made some improvements to make editing JSON files easier. First, WebStorm will add or remove commas when you move lines in JSON with the Move statement up or down actions (<em>Cmd\/Ctrl-Shift-Up\/Down<\/em>).<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9989\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-move-up-down-in-json.gif\" alt=\"Mov line up and down in JSON\" width=\"600\" \/><\/p>\n<p>Second, now when you add a new line inside an object, the IDE will add a comma.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9990\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-json-add-comma.gif\" alt=\"Add comma in JSON\" width=\"600\" \/><\/p>\n<p>Third, you can now use the <em>Surround with<\/em> action (<em>Alt-Cmd\/Ctrl-T<\/em>) in JSON to surround items with quotes, curly or square braces.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9991\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-surround-with-in-json.png\" alt=\"Surround with in JSON\" width=\"600\" \/><\/p>\n<p>Last but not least, now when you paste a key or a value in JSON, WebStorm will automatically escape symbols.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9992\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-paste-quoted-value-in-json.png\" alt=\"Escape symbols on paste in JSON\" width=\"600\" \/><\/p>\n<h2 id=\"css_support\">Improved support for style sheets<\/h2>\n<h3 id=\"extract_ruleset\">Extract ruleset and move ruleset to another file<\/h3>\n<p>With the new <em>Extract ruleset<\/em> intention, you can move selected properties to a new block and then modify its selector.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9941\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-extract-ruleset.gif\" alt=\"Extract ruleset intention\" width=\"600\" \/><\/p>\n<p>Want to move a set of rulesets from one style sheet file to another? Now you can use the Move refactoring for that \u2013\u00a0select one or several rulesets in a CSS, SCSS, Sass, or Less file, then press <em>F6<\/em> or select <em>Move<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9988\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-move-css-ruleset.png\" alt=\"move-css-ruleset\" width=\"600\" \/><\/p>\n<h3 id=\"extract_ruleset_and_replace_var_with_its_fallback_value\">Extract ruleset and move ruleset to another file replace var() with its fallback value<\/h3>\n<h3>Replace var() with its fallback value<\/h3>\n<p>The new intention <em>Replace var() with its fallback value<\/em> allows you to quickly remove CSS custom properties\/variables from the code:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9940\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-replace-css-var-with-fallback-value.png\" alt=\"Replace CSS var() with the fallback value intention\" width=\"600\" \/><\/p>\n<h3 id=\"new_code_style_options_for_style_sheets\">New code style options for style sheets<\/h3>\n<p>We have updated the code style options for style sheet languages. First, each language now has its own configuration with a full set of options. Before, most of the options were inherited from the CSS code style and only indents could be configured for each language.<!--more--><\/p>\n<p>Second, we\u2019ve made the use of blank lines in the files more configurable. There are 3 new options located on the Blank lines tab for each language under <em>Preferences | Editor | Code Style | Style Sheets<\/em>.<\/p>\n<p><em>Keep Maximum Blank Lines in Code<\/em> will remove extra empty lines when you reformat the code (Alt-Cmd-L \/ &lt;&gt;). In this example, with the option set to 2, WebStorm will remove one extra empty line. Note that this option doesn\u2019t add any lines but only removes extra (the resulting code is on the right):<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9937\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-reformatted-code-with-max-blank-lines-two.png\" alt=\"Code before and after the Reformat code action with Max blank lines code style option set to 2\" width=\"500\" \/><\/p>\n<p><em>Minimum Blank Lines Around Top-level Block and Around Nested Selector<\/em> will, on the contrary, add empty lines. Here both options are set to 1:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9938\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-reformatted-code-with-min-blank-lines-around-blocks.png\" alt=\"Code before and after the Reformat code action with Minimum blank lines code style options set to 1\" width=\"500\" \/><\/p>\n<p>In addition, CSS code style configurations now have the new Arrangement tab. Use it to enable and configure sorting for the properties inside rulesets. Once enabled, you can use the Rearrange code action to sort the properties. In the advanced formatting dialog (<em>Shift-Alt-Cmd-L<\/em>), you can enable running Rearrange code every time you reformat the code.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9939\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-advanced-formatting-dialog-enabale-rearrange.png\" alt=\"Advanced formatting dialog with Rearrange code check box enabled\" width=\"400\" \/><\/p>\n<h3 id=\"updated_css_inspection_for_shorthand_properties\">Updated CSS inspection for shorthand properties<\/h3>\n<p>For a long time, WebStorm had an inspection that checked that a set of properties could be replaced with one shorthand property. Unfortunately, that suggested changes that were too aggressive in some cases (e.g. for background-* properties), which changed the code semantics.<\/p>\n<p>We decided to replace the old inspection with two new ones. The first one, <em>Properties may be safely replaced with shorthand, <\/em>shows a weak warning when there&#8217;s a full set of longhand properties and switching to the shorthand one is 100% safe. The second one, <em>Properties may probably be replaced with shorthand<\/em>, doesn\u2019t highlight the code but provides a quick-fix (<em>Alt-Enter<\/em>) for cases when the conversion might change the code.<\/p>\n<p>Here are a couple of examples:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9861\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-replace-with-shorthand-safe.png\" alt=\"replace-with-shorthand-safe\" width=\"600\" \/><br \/>\nThe warning is reported because the properties can be safely replaced with the shorthand.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9862\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-replace-with-shorthand-unsave.png\" alt=\"replace-with-shorthand-unsave\" width=\"600\" \/><br \/>\nHere we only have an intention when you press Alt-Enter that would result in the following:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9863\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-replace-with-shorthand-result.png\" alt=\"replace-with-shorthand-result\" width=\"600\" \/><\/p>\n<h2 id=\"development_with_angular\">Developing with Angular<\/h2>\n<h3>Major improvements in Angular support<\/h3>\n<p>For the past few weeks, we\u2019ve been completely re-implementing support for the Angular template language. We\u2019ve written a new parser and lexer, and improved the way metadata available in the Angular sources is used for coding assistance for pipes and type evaluation.<\/p>\n<p>As a result of these changes, we\u2019ve been able to enhance the overall experience of working with templates (both inline templates in the TypeScript files and external templates in the HTML files) and fixed tons of known issues.<\/p>\n<p>Here are some of the improvements that are already available:<\/p>\n<ul>\n<li>Code completion and the resolve for variables inside HTML templates have become much more accurate. This also includes a fix for the problem where some variables were being marked as unused (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-33907\" target=\"_blank\" rel=\"noopener\">WEB-33907<\/a> and <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-34522\" target=\"_blank\" rel=\"noopener\">WEB-34522<\/a>), and another one where private properties created in the constructor were marked as unresolved in the templates (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-23606\" target=\"_blank\" rel=\"noopener\">WEB-23606<\/a>).<\/li>\n<li>In general, code completion in expressions inside templates is now more type-accurate. For example, here WebStorm knows about the variable\u2019s type and can provide better suggestions for its properties:<img decoding=\"async\" class=\"alignnone size-full wp-image-9896\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-type-aware-completion-in-templates.png\" alt=\"type-aware-completion-in-templates\" width=\"600\" \/><\/li>\n<li>Completion and resolve for template reference variables also works better now. The unused variable inspection is more accurate, and the Rename refactoring works correctly:<img decoding=\"async\" class=\"alignnone size-full wp-image-9899\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-templare-reference-vars.png\" alt=\"templare-reference-vars\" width=\"600\" \/><\/li>\n<li>Much better code assistance is provided when using pipes and async pipes (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-34352\" target=\"_blank\" rel=\"noopener\">WEB-34352<\/a>, <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-27239\" target=\"_blank\" rel=\"noopener\">WEB-27239<\/a>, and more). For example, WebStorm will suggest the available pipes:<img decoding=\"async\" class=\"alignnone size-full wp-image-9897\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-completion-for-pipes.png\" alt=\"completion-for-pipes\" width=\"600\" \/><\/li>\n<li>Improved coding assistance for the <code>*ngFor<\/code> microsyntax and in the <code>*ngFor<\/code> context:<img decoding=\"async\" class=\"alignnone size-full wp-image-9898\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-ngfor-context-completion.png\" alt=\"ngfor-context-completion\" width=\"600\" \/><\/li>\n<li>Performance has also been improved, thanks to better caching that WebStorm can perform with the new implementation.<\/li>\n<\/ul>\n<p>In our <a href=\"https:\/\/youtrack.jetbrains.com\/releasenotes\/WEB?q=Fix%20versions:%202018.3%20%23Angular\" target=\"_blank\" rel=\"noopener\">tracker<\/a>, you can file a list of over 50 issues related to Angular support that have been fixed.<\/p>\n<h3 id=\"angularjs_improvements\">AngularJS improvements<\/h3>\n<p>We know that many people still use AngularJS. This is why we\u2019ve fixed the top-voted problem affecting AngularJS support in WebStorm: completion and resolve for <code>$ctrl<\/code>, or for the name defined using the <code>controllerAs<\/code> property in the template.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9987\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-controlleras.png\" alt=\"controlleras\" width=\"600\" \/><\/p>\n<h2 id=\"development_with_react\">Development with React<\/h2>\n<h3>Completion for lifecycle methods<\/h3>\n<p>In React apps, code completion now suggests all component lifecycle methods.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-10040\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/11\/webstorm-react-lifecycle-methods.png\" alt=\"react-lifecycle-methods\" width=\"600\" \/><\/p>\n<h3>Detect undefined React components<\/h3>\n<p>We have enabled the <em>Unresolved variable<\/em> inspection for React components \u2013 this means that WebStorm will now warn you about the possibly undefined components.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-10041\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/11\/webstorm-unresolved-react-component.png\" alt=\"unresolved-react-component\" width=\"600\" \/><\/p>\n<h2 id=\"development_with_vue\">Development with Vue.js<\/h2>\n<h3 id=\"support_for_vuetify\">Support for Vuetify<\/h3>\n<p>WebStorm now provides code completion for components from <a href=\"https:\/\/vuetifyjs.com\/\" target=\"_blank\" rel=\"noopener\">Vuetify<\/a> version 1.1 or above. Type the name of a component in the template section of the .vue file, or press <em>Ctrl-Space<\/em> to see the list of all components and then select the one you need.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9986\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-vuetify-components.png\" alt=\"vuetify-components\" width=\"600\" \/><\/p>\n<h2 id=\"node_js_development\">Node.js development<\/h2>\n<h3 id=\"completion_for_previous_package_versions_in_package_json\">Completion for previous package versions in package.json<\/h3>\n<p>For the dependencies in a package.json, WebStorm now provides more suggestions for the available versions. After you add the name of the dependency, you will first see suggestions for the latest versions for each tag.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9901\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-package-json-version-latest.png\" alt=\"package-json-version-latest\" width=\"600\" \/><\/p>\n<p>Then, if you press <em>Ctrl-Space<\/em> or start typing a different version number, WebStorm will provide suggestions of all the previous versions of the package.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9902\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-package-json-all-versions.png\" alt=\"package-json-all-versions\" width=\"600\" \/><\/p>\n<h3 id=\"debugging_node_js_worker_threads\">Debugging Node.js worker threads<\/h3>\n<p>Node.js 10.5 introduced a new experimental feature \u2013 worker threads, which can be used for CPU-intensive tasks (check out this <a href=\"https:\/\/medium.com\/dailyjs\/threads-in-node-10-5-0-a-practical-intro-3b85a0a3c953\" target=\"_blank\" rel=\"noopener\">blog post<\/a> for a great overview of the feature).<\/p>\n<p>WebStorm now provides code completion for the <a href=\"https:\/\/nodejs.org\/api\/worker_threads.html\" target=\"_blank\" rel=\"noopener\">worker threads API<\/a> and allows you to debug workers. Debugging workers is available in <a href=\"https:\/\/nodejs.org\/en\/blog\/release\/v10.12.0\/\" target=\"_blank\" rel=\"noopener\">Node.js 10.12<\/a> that was released today. You also need to pass the <em>&#8211;experimental-worker<\/em> flag to the node.<\/p>\n<p>When debugging workers in WebStorm, you will see in what thread the breakpoint was hit and you will be able to switch between threads to see the call stack and variables.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9942\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-debugging-node-workers.png\" alt=\"Debugger tool window when debugging node workers\" width=\"600\" \/><\/p>\n<h3>NODE_OPTIONS environment variable<\/h3>\n<p>When debugging a Node.js app, WebStorm now uses the <a href=\"https:\/\/medium.com\/the-node-js-collection\/node-options-has-landed-in-8-x-5fba57af703d\" target=\"_blank\" rel=\"noopener\">NODE_OPTIONS environment variable<\/a> that has landed in Node.js 8 to pass the debug flags. Thanks to this, you no longer need to explicitly pass the <em>&#8211;inspect<\/em> flag to the <a href=\"https:\/\/nodejs.org\/api\/child_process.html#child_process_child_process_fork_modulepath_args_options\" target=\"_blank\" rel=\"noopener\">forked<\/a> processes.<\/p>\n<h2 id=\"editor\">Editor<\/h2>\n<h3 id=\"multiline_todos\">Multiline TODOs<\/h3>\n<p>As you may know, you can leave reminders in code comments, which you can then see in the TODO tool window. The comment should start with `Todo`, `Fixme`, or any other custom pattern that you add to <em>Preferences | Editor | Todo<\/em>.<\/p>\n<p>Now WebStorm also supports multiline TODO comments in JavaScript and TypeScript files as well as in HTML, CSS, Sass, SCSS, and Less!<\/p>\n<p>Start a TODO comment with the usual <em>`Todo`<\/em> and then add extra indents on the next lines to continue the TODO. If you remove the indentation, WebStorm will treat it as a normal comment.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9885\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-multiline-todo.png\" alt=\"multiline-todo\" width=\"600\" \/><\/p>\n<h3 id=\"indent_size_in_the_status_bar\">Indent size in the status bar<\/h3>\n<p>We know that the indents used by WebStorm can sometimes not be what you expected. There could be an <em>.editorconfig<\/em> file in the project root that overrides the IDE code style settings, or WebStorm may detect and follow the currently used indentation in a file.<\/p>\n<p>That\u2019s why we\u2019ve decided to show the size of the indent directly in the status bar. This indent will be applied to the current file when you start editing the code or if you decide to reformat it.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9964\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-indent-info.png\" alt=\"Indent info in status bar\" width=\"600\" \/><\/p>\n<p>Hover over the value to see why it was applied.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9965\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-indent-info-detected.png\" alt=\"Indent info: detected\" width=\"600\" \/><\/p>\n<p>If you click on the value, you\u2019ll see the different options available for adjusting the indent style:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9966\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-configure-indentation.png\" alt=\"Configure indentation\" width=\"600\" \/><\/p>\n<h3 id=\"disabling_code_formatting_for_specific_files_and_folders\">Disabling code formatting for specific files and folders<\/h3>\n<p>You can now disable the Reformat code, Optimize imports, and Rearrange code actions in a specific set of files. For that, go to <em>Preferences | Editor | Code Style<\/em>, and open the <em>Formatter Control<\/em> where you can now configure and select the scope in which the code formatting will be disabled.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9900\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-formatter-control.png\" alt=\"formatter-control\" width=\"600\" \/><\/p>\n<h3 id=\"multiline_code_snippets_in_find_and_replace\">Multiline code snippets in Find and Replace<\/h3>\n<p>The Find and Replace in Path dialogs now have better support for multiline code snippets. Paste the code you want to search for or type the query. Then, when you need to add a new line, click the icon on the right-hand side of the input field or press <em>Cmd\/Ctrl-Shift-Enter<\/em>. Please note that search is indent-sensitive.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9909\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-multiline-replace.png\" alt=\"multiline-replace\" width=\"600\" \/><\/p>\n<h2 id=\"accessibility\">Accessibility<\/h2>\n<h2 id=\"high_contrast_theme_and_accessibility_improvements\">High-contrast theme and accessibility improvements<\/h2>\n<p>The big feature from IntelliJ Platform that has landed in this update is the new high-contrast theme. It is part of our long-term commitment to make the IDE more accessible to everyone, and we plan to keep adding to this effort.<\/p>\n<p>You can enable the new theme in <em>IDE Preferences | Appearance and Behavior | Appearance<\/em>. Or, use the <em>Ctrl-`<\/em> shortcut and select <em>Look and Feel &#8211; High Contrast<\/em>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9946\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-high-contrast-theme.png\" alt=\"High contrast theme in WebStorm\" width=\"800\" \/><\/p>\n<p>In addition, WebStorm now allows a screen reader to read the line numbers, VCS annotations, breakpoints, and other gutter icons. To enable screen reader support, please follow the instructions in our <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/accessibility.html#screen_reader\" target=\"_blank\" rel=\"noopener\">docs<\/a>. Then, use the screen reader by following these steps:<\/p>\n<ul>\n<li>Use the [<em>Alt + Shift + 6] + F<\/em> key combination to focus on the gutter.<\/li>\n<li>Move between the lines and gutter elements using the arrow keys.<\/li>\n<li>When the focus is on the gutter icon, press [<em>Alt + Shift + 6] + T<\/em> for the screen reader to read a tooltip on the icon.<\/li>\n<li>To get back to the editor, press <em>Esc<\/em>.<\/li>\n<\/ul>\n<p>What&#8217;s more, with valuable help from our contributor Mohammed Laachir, it is now possible for screen readers to access the tables in the dialog.<\/p>\n<h2 id=\"version_control\">Version Control<\/h2>\n<h3 id=\"git_submodules\">Git Submodules<\/h3>\n<p>WebStorm 2018.3 now supports working with Git submodules!<\/p>\n<p>When you clone a repository that has submodules, WebStorm will clone the root repo and all its submodules. Moreover, when you update your project, all the submodules will now be correctly updated according to their state. The Diff, History, and Conflict resolution now all work for submodule folders too.<\/p>\n<h3 id=\"github_pull_requests\">GitHub Pull Requests<\/h3>\n<p>WebStorm 2018.3 brings with it an exciting new feature \u2013 GitHub Pull Requests. In the menu VCS &#8211; Git, select View Pull Requests to open a new tool window with the list of all pull requests in your project. You can see the description, assignee, labels, and changed files from the pull request. Right click the pull request to create a new local branch from it.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9960\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-github-pull-requests.png\" alt=\"View GitHub Pull Requests\" width=\"600\" \/><\/p>\n<h3>Better support for precommit hooks<\/h3>\n<p>The Commit dialog now correctly shows and handles changes made to files with the precommit hook (for example, when you\u2019re using <a href=\"https:\/\/www.npmjs.com\/package\/lint-staged\" target=\"_blank\" rel=\"noopener\">lint-staged<\/a>).<\/p>\n<h3>Ignore whitespaces<\/h3>\n<p>You can now ignore or trim whitespaces while merging. The configuration is available in the new drop-down on top of the <em>Merge Revisions for\u2026<\/em> dialog. Whitespaces are also ignored by default when you use <em>Annotate<\/em> for a file.<\/p>\n<h2 id=\"linters\">Linters integrations<\/h2>\n<h3 id=\"add_comments_to_disable_tslint_rules\">Add comments to disable TSLint rules<\/h3>\n<p>If you press Alt-Enter on a warning or error reported by TSLint, and then press the right arrow, you now have an option to add a special TSLint disable comment for this rule. Disable comments follow this format:<br \/>\n<code>\/\/ tslint:disable-next-line:<\/code> or <code>\/* tslint:disable:quotemark *\/<\/code><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9864\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-add-tslint-disable-comment.png\" alt=\"add-tslint-disable-comment\" width=\"600\" \/><\/p>\n<h3 id=\"linting typescript files with eslint\">Linting TypeScript files with ESLint<\/h3>\n<p>If you\u2019re using ESLint to check your TypeScript files, we have some good news for you: now it\u2019s possible to see ESLint errors and warnings in .ts files in WebStorm. To get this working, you\u2019ll need to have <code>\"parser\":\"babel-eslint\"<\/code>, <code>\"parser\":\"typescript-eslint-parser\"<\/code> or <code>\u201ceslint-plugin-typescript\u201d<\/code> in your ESLint configuration.<\/p>\n<p>If you use these parsers or the plugin but don\u2019t want to lint TypeScript files with ESLint, add <em>*.ts<\/em> to <em>.eslintignore<\/em>.<\/p>\n<h3 id=\"override_severity_from_eslint_or_tslint_config\">Override severity from ESLint or TSLint config<\/h3>\n<p>By default, WebStorm uses the severity levels from the ESLint or TSLint configuration files, to highlight errors and warnings from these linters in the editor. Based on your requests, we have made it possible to ignore the severity levels in the config file and show everything reported by the linter as errors, warnings, or in custom color.<\/p>\n<p>To use this, go to Preferences | Editor | Inspections &#8211; TSLint or ESLint and clear the checkbox \u201cUse rule severity from the configuration file\u201d. Then select the new severity level you want to use in the drop-down above the checkbox.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9945\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-override-severity-from-linter-config.png\" alt=\"Disable using severity levels from linter config file\" width=\"600\" \/><\/p>\n<h2 id=\"debugger\">Debugging<\/h2>\n<h3 id=\"live_edit_without_chrome_extension\">Live Edit without Chrome extension<\/h3>\n<p>For a while now, WebStorm has included a feature called <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/live-editing.html\" target=\"_blank\" rel=\"noopener\">Live Edit<\/a> that worked during the JavaScript debug session. Live Edit helps you see the changes you make in your HTML and CSS files \u2013 immediately in the browser. To use it, WebStorm previously required you to install a Chrome extension called \u201cJetBrains IDE Support\u201d.<\/p>\n<p>Starting with WebStorm 2018.3, you can use the Live Edit feature without installing the plugin! Open the HTML file you want to \u201clive edit\u201d, and in its context menu select Debug. This will start a JavaScript debugger in WebStorm and open your file in a new instance of Chrome. As you start editing your HTML code or the linked CSS file, you will see the changes you make in the browser, without ever having to reload the page.<!--more--><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9907\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-live-edit.png\" alt=\"live-edit\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-live-edit.gif\" \/><\/p>\n<p>In <em>Preferences | Build, Execution, Deployment | Debugger | Live Edit<\/em>, you can configure how quickly the browser reacts to the changes you make. You can also enable the Live Edit feature for the client-side JavaScript code (that doesn\u2019t require compilation) and Node.js.<\/p>\n<h3 id=\"add_multiple_variables_to_debugger_s_watches\">Add multiple variables to debugger\u2019s watches<\/h3>\n<p>You can now select several variables in the debugger\u2019s Variables view and add them all to Watches. This is a small but hopefully useful improvement.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9865\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-add-to-watches.png\" alt=\"add-to-watches\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-add-to-watches.gif\" \/><\/p>\n<h3 id=\"debugging_linked_modules\">Debugging linked modules<\/h3>\n<p>If your project uses modules linked with <a href=\"https:\/\/docs.npmjs.com\/cli\/link\" target=\"_blank\" rel=\"noopener\">npm link<\/a>, you can now put breakpoints in these linked files when debugging your app in WebStorm. Stepping into these files should work fine as well.<\/p>\n<h2 id=\"testing\">Testing<\/h2>\n<h3 id=\"structure_view_for_test_files\">Structure view for test files<\/h3>\n<p>The Structure view now works for test files! It shows the names of the tests and suites, as well as other symbols defined in this file. Use it to quickly navigate through the file.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9860\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-structure-view-for-tests.png\" alt=\"structure-view-for-tests\" width=\"600\" \/><\/p>\n<p>You can jump to the Structure view tool window located next to the editor by pressing <em>Cmd-7<\/em> on macOS or Alt-7 on Windows and Linux. Alternatively, you can use it in the editor, as a popup; the shortcut for this is <em>Cmd\/Ctrl-F12<\/em>.<\/p>\n<h3 id=\"jump_to_failure_for_tests\">Jump to failure for tests<\/h3>\n<p>For failed tests, <em>Jump to source<\/em> (<em>Cmd-Down<\/em> on macOS or <em>F4<\/em> on Windows and Linux) in the test tool window will now take you to the failure line in the test from the stack trace.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9886\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-jump-to-failure.png\" alt=\"jump-to-failure\" width=\"600\" \/><\/p>\n<p>This works for Jest, Karma, and Mocha tests.<\/p>\n<p>If the exact line is not in the stack trace, you will be taken to the test definition.<\/p>\n<h3 id=\"running_single_protractor_test_or_suite\">Running single Protractor test or suite<\/h3>\n<p>You can now run a single <a href=\"https:\/\/www.protractortest.org\/#\/\" target=\"_blank\" rel=\"noopener\">Protractor<\/a> test from the editor \u2013 click on the icon next to the test in the editor and select run or debug.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9967\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-run-single-protractor-test.png\" alt=\"Run a single Protractor test\" width=\"600\" \/><\/p>\n<p>In the Protractor run\/debug configuration, you can now select if you want to run all tests, a test file, or a single specific test.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9968\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-protractor-run-debug-configuration.png\" alt=\"Protractor run\/debug configuration\" width=\"600\" \/><\/p>\n<p>If you have suites defined in the Protractor configuration file, you can also run them with the gutter icon \u2013\u00a0the suite name will be passed to Protractor with the <code>--suite=suite_name<\/code> option.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/10\/webstorm-run-protractor-suite-from-config.png\" alt=\"Run Protractor suite from config\" width=\"600\" \/><\/p>\n<p>By the way, you can add additional command line options to the new Protractor options field in the run\/debug configuration.<\/p>\n<h2 id=\"other_ide_improvements\">Other IDE improvements<\/h2>\n<h3 id=\"new_search_everywhere_popup\">New unified Search popup<\/h3>\n<p>A big new feature that has landed in the whole IntelliJ Platform is the new Search Everywhere popup. Actually, it\u2019s much more than just Search Everywhere (<em>Shift-Shift<\/em>): now it incorporates the Find Action (<em>Cmd\/Ctrl-Shift-A<\/em>), Go to class (<em>Cmd-O\/Ctrl-N<\/em>), Go to file (<em>Shift-Cmd-O\/Ctrl-Shift-N<\/em>), and Go to symbol (<em>Alt-Cmd-O\/Ctrl-Alt-Shift-N<\/em>) actions!<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9867\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-new-search-everywhere.png\" alt=\"new-search-everywhere\" width=\"600\" \/><\/p>\n<p>One of the main reasons we\u2019ve decided to completely redesign and reimplement the popup was to tackle and confront dozens of different problems and bugs that kept cropping up in this old dialog. The new <em>Search Everywhere<\/em> doesn\u2019t lose focus, the size of the dialog doesn\u2019t depend on the contents, and its size doesn\u2019t change unexpectedly. There are many more fixes that have come about as a result, including <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/IDEA-170407\" target=\"_blank\" rel=\"noopener\">IDEA-170407<\/a>, <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/IDEA-117031\" target=\"_blank\" rel=\"noopener\">IDEA-117031<\/a>, <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/IDEA-130670\" target=\"_blank\" rel=\"noopener\">IDEA-130670<\/a>, and <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/IDEA-142909\" target=\"_blank\" rel=\"noopener\">IDEA-142909<\/a>. We hope you\u2019ll like the new popup!<\/p>\n<h3 id=\"new_plugins_configuration\">New Plugins configuration<\/h3>\n<p>Another big change in the platform is the redesigned Plugins pages in Preferences. We wanted to make it easier to manage the existing plugins and to search for and install new ones. You can now search plugins by categories, and you can sort the search results by the number of downloads, the rating, or the update date.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9868\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-new-plugins-page.png\" alt=\"new-plugins-page\" width=\"600\" \/><\/p>\n<p>You can also view all the new and updated plugins, the top downloaded plugins, and the top-rated plugins.<\/p>\n<p>The IDE now shows all the downloaded and bundled plugins separately in the Installed tab. To see the plugins that need to be updated, use the Updates tab.<\/p>\n<h3 id=\"drag_folder_to_welcome_screen_to_open_it\">Drag folder to Welcome screen to open it<\/h3>\n<p>If you want to open a new project in WebStorm, you can now simply drag its folder to the IDE\u2019s Welcome Screen from the file manager or the desktop.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9887\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/09\/webstorm-drag-folder-to-open.gif\" alt=\"drag-folder-to-open\" width=\"600\" \/><\/p>\n<p align=\"center\"><a class=\"jb-download-button\" href=\"https:\/\/www.jetbrains.com\/webstorm\/download\" target=\"_blank\" rel=\"noopener\">Download WebStorm 2018.3<\/a><\/p>\n<p><em>Your WebStorm Team<\/em><\/p>\n","protected":false},"author":221,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","categories":[907],"tags":[2822,264,2812,285,69,197,91,365,1290,2835,193,2844,2856],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/23160"}],"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\/221"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=23160"}],"version-history":[{"count":0,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/23160\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=23160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=23160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=23160"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=23160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}