https:\/\/youtu.be\/CZFooXiqxs8<\/p>\n
We\u2019ve been running the Early Access Preview program for WebStorm 2018.2 for the past two months. We published WebStorm EAP builds on a weekly basis, covering all the new features on this blog. Now we want to share with you the detailed release notes for the WebStorm 2018.2 update as compiled from these EAP blog posts<\/a>.<\/p>\n Here are the features and improvements grouped by the WebStorm subsystems:<\/p>\n Download WebStorm 2018.2<\/a><\/p>\n We\u2019re very excited about this feature! WebStorm can now help you create a new React component, by extracting the JSX code from the render method of an existing one.<\/p>\n Select the code you want to extract, and then select Component\u2026<\/em> from the Refactor this\u2026 <\/em>popup (Ctrl-T<\/em> on macOS or Ctrl-Alt-Shift-T<\/em> on Windows and Linux). Name the component and select whether it should be a class component or a functional component.<\/p>\n That\u2019s it! Now your new component is defined next to the existing one and used in it.<\/p>\n You can then use the Move<\/em> refactoring to move the new component and all the required imports to a separate file. (Do let us know if you\u2019d like this option to be available right on the Extract Component refactoring dialog.)<\/p>\n In this Gist<\/a> you can see the code before and after the refactoring.<\/p>\n You can modify the code templates WebStorm uses for the new components, by going to Preferences | Editor | File and Code Templates<\/em> and selecting the Code <\/em>tab. For example, you can switch from using With the new intentions, you can now convert React class components into functional components and back again \u2013 press Alt-Enter<\/em> on the component definition and select the action you need.<\/p>\n WebStorm now has a collection of code snippets for React. It has over 50 abbreviations that expand into different statements and blocks of code often used in React apps. The collection was adapted from the popular plugin<\/a> for VS Code.<\/p>\n Type the abbreviation in the editor and then press Tab to expand it. Or press Cmd\/Ctrl-J<\/em> (Insert Live Template<\/em>) and select the snippet from the list. All abbreviations are also available in the completion popup.<\/p>\n Here we use the abbreviation You can find the full list of available templates in Preferences | Editor | Live Templates – React<\/em>.<\/p>\n For the JSX tags, you can now also see the breadcrumbs and colorful highlighting for the tag tree on the editor gutter.<\/p>\n Code completion is now more precise when you use PropTypes<\/a> like And here we have completion for array methods because WebStorm now has better support for React components that have a namespace in their name. You can now get appropriate code completion and navigation to the definition for these components in JavaScript and TypeScript files.<\/p>\n Previously, when you opened your Angular project for the first time, WebStorm would spend significant time indexing the compiled JavaScript files shipped with the Angular core modules.<\/p>\n We\u2019ve decided to update the way WebStorm handles the core Angular module and modules written in TypeScript in general. Now, if the module\u2019s package.json has a As a result, we\u2019ve halved the time WebStorm needs to index a new Angular project<\/em>, with no compromises affecting the quality of code completion and resolve (which also work faster now, too!).<\/p>\n With the New… – Angular Schematic\u2026<\/em> action in the Project view, you can now generate code using schematics that are defined in libraries like @angular\/material (note that you need to use Angular 6 for this). Previously, you could only generate components, services, and other blueprints defined in the Angular CLI itself.<\/p>\n In addition, WebStorm now shows the schematic\u2019s description and provides code completion and description for available options.<\/p>\n Another new feature introduced by the Angular and Angular CLI 6 update<\/a>\u00a0in the new In WebStorm, you can now use the new Angular Dependency\u2026 <\/em>action to install libraries that support installation with In the list you can select the library you want to add. Right now it contains only the libraries that we know have In this example, we are adding Angular Material to our project: If you add a dependency to package.json that WebStorm knows supports And even if a dependency is already installed, it can still make sense to reinstall it with If you create a new Angular project using Angular CLI in the IDE, WebStorm now automatically adds run\/debug configurations that will help you start and debug the app and run Karma and Protractor tests in the IDE.<\/p>\n In Vue templates, WebStorm now provides code completion for events and event modifiers.<\/p>\n The list of events is available following `v-on:`:<\/p>\n You can also use the shorthand notation, Event modifiers can also be automatically completed:<\/p>\n If you\u2019re using Node.js on WSL, we have some good news for you: you can now run and debug Node.js apps using Node.js on WSL right in WebStorm.<\/p>\n You can select Node.js on WSL as a project\u2019s node version in Preferences | Languages & Frameworks | Node.js and <\/em>npm<\/em> or you can configure and use this node version in a Node.js Run\/Debug configuration.<\/p>\n In Preferences | Languages & Frameworks | Node.js and npm<\/em>, click \u2026<\/em> next to the field with the path to Node.js, then click +<\/em> in the opened dialog and select Add Node.js on WSL.<\/em><\/p>\n Now select the Linux distribution you\u2019re using from the drop-down menu and set the path to Node.js and click Save.<\/p>\n WebStorm will now use this Node.js version when running npm scripts or creating new Node.js run\/debug configurations.<\/p>\n If you want to use Node.js on WSL only in some specific run\/debug configuration, instead of changing the project\u2019s node version in Preferences, you can add a new Node.js WSL interpreter in the Node.js configuration. Again, click on the \u2026<\/em> button next to the path and follow the steps described above.<\/p>\n This integration is still work in progress. We are now working on support for Node.js on WSL for test runners, linters, and build tools integrated in WebStorm. Stay tuned!<\/p>\n We have added a new Reconnect automatically<\/em> option to the Attach to Node.js\/Chrome<\/em> debug configuration.<\/p>\n Thanks to this option, it is now easier to debug Node.js apps that use nodemon<\/a>. Nodemon is a utility that automatically reloads your node process when you change the code of your app.<\/p>\n Here\u2019s how you can debug such an application:<\/p>\n We have added another Node.js-related improvement in the Attach to Node.js configuration that you can use to attach WebStorm\u2019s debugger to the running node application.<\/p>\n You can now specify the remote paths for the project folders. Which is useful if the app root folder on the remote server or the Docker container have a different name to the local root folder.<\/p>\n If you\u2019re using a logging tool like morgan<\/a> in your Node.js app, and the tool writes logs to a file, you can now see these logs on the Console tab in the Node.js Run tool window. To enable this, go to the new Logs tab in the Node.js run\/debug configuration. While there, you can also enable saving the console output to a log file.<\/p>\n You can now find unused JavaScript (or TypeScript) as well as CSS code in your client-side app thanks to the new Code Coverage<\/em> feature.<\/p>\n Run your app in the browser and then see the report in WebStorm showing how much code in every file and folder was used.<\/p>\n The great thing is that the coverage will be shown for your source files and not for the compiled code that was actually run in the browser (as long as the source maps are available). The coverage report will now open in the Coverage tool window: look at the Project view for info about the coverage of files and folders. Meanwhile, if you look at the left gutter in the editor, you will see green and red markers next to some lines. Green means that the line was executed, and red means it was not. And if you click on the market, you’ll see how many times this particular block of code was executed.<\/p>\n In the example above, we see that the With File Watchers, you can run command-line tools like Prettier<\/a> automatically when you change or save a file. Before, it was only possible to configure and use a file watcher in a specific project. If you wanted to use the same watcher in a different project, you had to repeat the whole configuration. But now you can create and store File Watchers on the IDE level, and easily enable them in different projects.<\/p>\n To create a global File Watcher, open the IDE Preferences (from the project or from the Welcome screen) and go to Tools | File Watchers<\/em>, click the +<\/em> button, and select Custom <\/em>from the list. Now configure the File Watcher for the tool you want to use (for more information on how to do that, see our documentation<\/a>).<\/p>\n Once you\u2019ve saved the new File Watcher, you can decide if it\u2019s going to be available only in the current project – select Project in the right column or for all projects – then select Global.<\/p>\n Note that the global File Watchers will be available in all projects, but disabled by default. If you want to use it, go to the project\u2019s Preferences | Tools | File Watchers<\/em> and select the check-box next to it.<\/p>\n Let\u2019s create a new global File Watcher for Prettier following the steps described in the Prettier docs<\/a>. What we want to change is the path to Prettier \u2013 for every project where we want to enable this File Watcher, we want to use Prettier installed in the project\u2019s node_modules folder. To do that, we use a macro in the path: $ProjectFileDir$\/node_modules\/.bin\/prettier<\/em>.<\/p>\n Probably the most notable (and definitely the most visible) change in this week\u2019s Early Preview build is the new inspection tooltip.<\/p>\n You see these tooltips when you hover over the warning or errors in the code. As you might know, for all the warnings WebStorm will offer quick fixes that you can see if you press Alt-Enter or click on the bulb icon.<\/p>\n And to make these quick fixes more discoverable, we now show the first available fix right next to the error description. You can then press Alt-Shift-Enter<\/em> to apply the fix or Alt-Enter<\/em> to see the usual pop up with all the available quick fixes and intentions.<\/p>\n We\u2019ve added a bunch of new intentions that are available in the TypeScript and partially in JavaScript code. To use an intention, press Alt-Enter<\/em>, select it in the list and press Enter.<\/p>\n Here\u2019s what was added: The Implement interface<\/em> intention works for the TypeScript interfaces and creates a new class that implements this interface.<\/p>\n The Create derived class<\/em> intention creates a new class in the JavaScript or TypeScript file that extends another class<\/p>\n Implement interface or abstract class member<\/b><\/em><\/p>\n This TypeScript intention allows you to implement properties and members of an interface or an abstract class in classes that directly implement or extend them.<\/p>\n Generate cases for \u2018switch\u2019<\/b><\/em><\/p>\n This intention helps to generate the switch block when a switch argument is an enum.<\/p>\n In JavaScript this intention can use the information from an argument provided in the JSDoc comment:<\/p>\n Iterate with \u2018for..of\u2019<\/b><\/em><\/p>\n This intention is available for an array or symbol that you can iterate over with Convert type alias to enum<\/b><\/em><\/p>\n This intention can convert a type alias with string literals in it into an enum and is available only in TypeScript.<\/p>\n Add and remove digit separators<\/b><\/em><\/p>\n This intention uses the numeric separators<\/a> feature of JavaScript (now it\u2019s a Stage 3 proposal) which allows you to add underscores to the numeric values to improve their readability.<\/p>\n Postfix completion is a great feature for adding template code around an expression you\u2019ve just typed. The available templates are listed in Preferences | Editor | General | Postfix Completion<\/em>. They expand when you press Tab or when you select them in the code completion popup.<\/p>\n Now you can add your own templates for postfix completion!<\/p>\n Let\u2019s see how we can create a template that will expand into a class for a new React component:<\/p>\n WebStorm adds support for the following TypeScript 2.9 and 3.0 features:<\/p>\n WebStorm now shows more quick fixes provided by the TypeScript language service. Now you can use not only the quick fixes for the reported errors, but also suggestions like this one:<\/p>\n Press Alt-Enter<\/em> to see the available intentions provided by WebStorm, and those from the TypeScript language service.<\/p>\n We\u2019ve also added a new quick-fix that fixes the visibility of a method if it was inaccessible:<\/p>\n Now WebStorm uses the TypeScript Language Service for any TypeScript file, even if the project doesn\u2019t have a tsconfig.json<\/em> file. WebStorm will then use the bundled TypeScript version and the default configuration.<\/p>\n You can disable this behavior if you uncheck the \u201cAlso for projects without tsconfig.json\u201d<\/em> option in Preferences | Languages & Frameworks | TypeScript.<\/em><\/p>\n WebStorm 2018.2 now supports the JSON5<\/a> standard. By default, you can use the new syntax only in files with the .json5<\/em> extension, but you can extend it to all .json files. To do this, open Preferences | Editor | File types<\/em>, find JSON5 in the list and add *.json<\/em> to the registered pattern for it.<\/p>\n Another useful improvement in this area is the new action that allows you to copy the JSON pointer, a path-like string for the selected object.<\/p>\n For some time already, WebStorm has been able to validate JSON files and provide code completion in such files using JSON Schema, a special format for describing their structure and contents.<\/p>\n In WebStorm 2018.2, we have improved support for JSON Schema in many ways. As soon as you\u2019ve opened a file whose name is associated with one of the available schemas (for example, composer.json<\/em>), WebStorm will download and use this schema for it. You will see the name of the applied schema in the status bar.<\/p>\n If you have a custom name for a config file, you can manually select a required schema from the list on the status bar.<\/p>\n We have also updated the configuration of custom JSON Schemas that you can add to the IDE and use for specific files in your project. You can now specify the URL of the schema file. It\u2019s available in Preferences | Languages and Frameworks | Schemas and DTDs | JSON Schema Mappings<\/em>.<\/p>\n As we\u2019ve already mentioned in one of the earlier EAP updates, WebStorm can validate your JSON files using the JSON Schema<\/a>. We\u2019ve added a quick fix that allows you to add all the missing required properties to your JSON file. WebStorm now respects severity levels selected for rules enabled in the TSLint configuration file. By default, the errors will now be highlighted with a red squiggly line, while warnings will be marked with a yellow background.<\/p>\n For some time already, WebStorm has enabled you to apply the known code style rules specified in the ESLint and TSLint configuration files to the IDE JavaScript or TypeScript code style settings.<\/p>\n Now WebStorm can automatically import known rules from any configs<\/em> when you open your project for the first time, as long as you have ESLint (or TSLint) installed. (This is because WebStorm needs to run ESLint itself to transform the config into JSON that the IDE understands.)<\/p>\n Before, WebStorm did this only for simpler configs written using JSON. For configs written in JavaScript or YAML or extending some preset, WebStorm required you to use the Apply ESLint Code Style Rules<\/em>\u00a0action. Now, you still need to use the action if you\u2019ve updated your ESLint or TSLint configuration. It\u2019s available via the Find Action<\/em> popup or in the file\u2019s context menu.<\/p>\n By the way, you can now also apply code style for the TSLint configurations that have the You can now simply press Alt-Enter on a line with a breakpoint and see the breakpoint-related actions in the list, along with all the other available intentions!<\/p>\n Now you can use the Drop frame action when debugging JavaScript and Node.js. This can be helpful to re-enter a function if you missed a critical spot you would like to see again.<\/p>\n You can now debug JavaScript scratch files \u2013 temporary files that you can quickly create by using the Cmd-Shift-N<\/em> shortcut on macOS or Ctrl+Shift+Alt+Insert<\/em> on Windows and Linux.<\/p>\n Put the breakpoints anywhere in your file and then press Ctrl-Alt-D \/ Alt+Shift+F9<\/em> to start debugging it using the built-in Node.js debugger. Please keep in mind that your code will be run using node, which means it should not use any browser APIs or any syntax that is currently not supported in node.<\/p>\n There\u2019s a new Rerun Failed Tests<\/em> action available when you run tests with Karma, Jest, or Mocha in WebStorm. As the name suggests, it allows you to rerun only those tests that have failed, instead of running all tests after the fix.<\/p>\n If you are doing snapshot testing with Jest, you will notice a new icon shown on the left editor gutter when your test file is opened. Use it to navigate to the related snapshot file. Or put the caret on toMatchSnapshot<\/em> and use the Related Symbol<\/em> action.<\/p>\n If your Jest test has failed because of the mismatch in the snapshot, you can now see why using the familiar IDE side-by-side diff view. To open it, click on the link in the Run tests tool window.<\/p>\n Karma allows you to use Chrome Headless for running your tests (check out this great tutorial<\/a> in the Chrome blog). With Karma, your tests are executed in a real browser environment but without the overhead created by running a full Chrome instance.<\/p>\n WebStorm now enables you to debug Karma tests in Chrome Headless (whereas previously you could only run them there).<\/p>\n To run and debug tests in Chrome Headless using Karma, add Now, test files whose names follow common patterns like *.test.js<\/em> or *.spec.js<\/em> are now automatically added to the default Tests scope. You can select this scope in the Project view to see the test files available in the project. Or you can use it to configure the use and severity of inspections.<\/p>\n If you open a folder that is part of a Git or Mercurial repository, WebStorm now automatically enables version control integration for it. So, no more \u201cunregistered roots detected\u201d notifications when you open a project.<\/p>\n With the new Browse Repository at Revision<\/em> action, which is available from the context menu in the VCS Log or from the file history, you can now explore files in your project at any given revision without a checkout. From the special Repositories view, you can see the project structure and view the files in read-only mode.<\/p>\n\n
Development with React<\/h2>\n
Extract React component<\/h3>\n
![\"extract-react-component\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-extract-react-component.png\")
<\/p>\n![\"move-react-component\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-move-react-component.png\")
<\/p>\nComponent<\/code> to using React.Component<\/code> or PureComponent<\/code> when creating a class component. Or, change the template for functional components to using arrow function. You can also change the style of using PropTypes or remove them altogether.<\/p>\n![\"code-template-for-extract-react-component\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-code-template-for-extract-react-component.png\")
<\/p>\nConvert React class components into functional components<\/h3>\n
![\"convert-react-component\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/07\/webstorm-convert-react-component.png\")
<\/p>\nReact code snippets<\/h3>\n
rcjc<\/code> to create a class that defines a new React component:<\/p>\n![\"react-live-template\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-react-live-template.png\")
<\/p>\n![\"jsx-tree-highlighting\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-jsx-tree-highlighting.png\")
<\/p>\nBetter support for PropTypes<\/h3>\n
shape<\/code>, oneOf<\/code>, instanceOf<\/code>, or arrayOf<\/code>. Here are a couple of examples. Here in the completion we have the values listed using PropTypes.oneOf<\/code>:<\/p>\n![\"props-one-of\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-props-one-of.png\")
<\/p>\nPropTypes.arrayOf<\/code> is used:<\/p>\n![\"props-array-of\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-props-array-of.png\")
<\/p>\n<\/h3>\n
Support for React namespaced components<\/h3>\n
![\"react-namespaced-components\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-react-namespaced-components.png\")
<\/p>\nDevelopment with Angular<\/h2>\n
Faster project startup<\/h3>\n
typings<\/code> field with the path to the *.d.ts<\/em> file, then WebStorm indexes only the TypeScript files and ignores all the JavaScript files.<\/p>\nRun more Angular schematics using the Angular CLI integration<\/h3>\n
![\"generate-material-component\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-generate-material-component.png\")
<\/p>\n![\"generate-component-options\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-generate-component-options.png\")
<\/p>\nAdding new features to an Angular app with ng add<\/h3>\n
ng add<\/code> command to help add new capabilities to your app. It will install the selected dependency and then invoke the installation script to take care of all the rest.<\/p>\nng add<\/code> without using the terminal. This action is available via the Find Action<\/em> (Cmd-Shift-A\/Ctrl+Shift+A<\/em>) popup or the New\u2026<\/em> popup (Cmd-N\/Alt+Insert<\/em>) in the Project view.<\/p>\nng add<\/code> support, but you can also specify any package name you want. By the way, the list is available on GitHub<\/a> and you can send us Pull Requests to add more libraries.<\/p>\n
\n![\"webstorm-ng-add\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-webstorm-ng-add.png\")
<\/p>\nng add<\/code>, the IDE will suggest installing it with ng add<\/code>:<\/p>\n![\"webstorm-install-with-ng-add-inspection\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-webstorm-install-with-ng-add-inspection.png\")
<\/p>\nng add<\/code>. To do so, press Alt-Enter<\/em> on the package name in package.json and select Reinstall with `ng add`<\/em>:<\/p>\n![\"webstorm-reinstall-with-ng-add\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-webstorm-reinstall-with-ng-add.png\")
<\/p>\nRun configurations for new Angular projects<\/h3>\n
![\"angular-cli-project-configurations\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-angular-cli-project-configurations.png\")
<\/p>\nDevelopment with Vue.js<\/h2>\n
Completion for Vue events and event modifiers<\/h3>\n
![\"v-on-vue\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-v-on-vue.png\")
<\/p>\n@event<\/code>:<\/p>\n![\"vue-event-shorthand\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-vue-event-shorthand.png\")
<\/p>\n![\"vue-event-modifier\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-vue-event-modifier.png\")
<\/p>\nNode.js development<\/h2>\n
Support for Node.js on Windows Subsystem for Linux<\/h3>\n
![\"select-wsl-in-preferences\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-select-wsl-in-preferences.png\")
<\/p>\n![\"select-linux-and-node-on-wsl\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-select-linux-and-node-on-wsl.png\")
<\/p>\n![\"node-on-wsl-in-debug-configuration\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-node-on-wsl-in-debug-configuration.png\")
<\/p>\nReconnect\u00a0 the debugger to the running node process<\/h3>\n
![\"attach-to-node-reconnect\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-attach-to-node-reconnect.png\")
<\/p>\n\n
--inspect<\/code> flag to nodemon. You can create and run a new npm debug script<\/code> that would look like this: debug\": \"nodemon --inspect .\/app.js<\/code> (be sure to replace .\/app.js<\/em> with the path to the file that starts your app).<\/li>\n![\"debug-port-nodemon\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-debug-port-nodemon.png\")
<\/p>\n\n
Remote mappings in Attach to Node.js configuration<\/h3>\n
![\"remote-mappings-in-attach-to-node-configuration\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-remote-mappings-in-attach-to-node-configuration.png\")
<\/p>\nManage logs when running a Node.js app<\/h3>\n
![\"logs-in-node-configuration\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-logs-in-node-configuration.png\")
<\/p>\nBuilt-in tools<\/h2>\n
Find unused code in the client-side app with Code Coverage reports<\/h3>\n
\nHere\u2019s how it works:<\/p>\n\n
![\"javascript-debug-configuration\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-javascript-debug-configuration.png\")
<\/p>\n\n
![\"run-with-coverage\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-run-with-coverage.png\")
<\/p>\n\n
![\"coverage-report-with-editor\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-coverage-report-with-editor.png\")
<\/p>\ntogglePast<\/code> method is marked with red because we haven\u2019t clicked the link that shows the past events.<\/p>\nGlobal File Watchers<\/h3>\n
![\"enable-global-watcher\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-enable-global-watcher.png\")
<\/p>\n![\"global-watcher-for-prettier\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-global-watcher-for-prettier.png\")
<\/p>\nEditor<\/h2>\n
New UI for inspection tooltip<\/h3>\n
![\"new-error-tooltips\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-new-error-tooltips.png\")
<\/p>\nJavaScript and TypeScript support<\/h2>\n
New intentions in JavaScript and TypeScript<\/h3>\n
\nImplement interface and Create derived class<\/strong><\/em><\/p>\n![\"implement-interface-create-class\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-implement-interface.png\")
<\/p>\n![\"implement-members\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-implement-members.png\")
<\/p>\n![\"generate-cases-for-enum\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-generate-cases-for-enum.png\")
<\/p>\n![\"generate-cases-in-js\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-generate-cases-in-js.png\")
<\/p>\nfor..of<\/code> in the JavaScript and TypeScript files.<\/p>\n![\"iterate-with-for-of\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-iterate.png\")
<\/p>\n![\"convert-type-alias-to-enum\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-convert-type-alias-to-enum.png\")
<\/p>\n![\"add-digit-separators\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-add-digit-separators.png\")
<\/p>\n![\"remove-digit-separators\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-remove-digit-separators.png\")
<\/p>\nCustom templates for postfix completion<\/h3>\n
![\"postfix-completion\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-postfix-completion.png\")
<\/p>\n\n
rcomp<\/code><\/li>\n$EXPR$<\/code> in the places where the initial expression should appear. Add $END$<\/code> where you want the cursor to be at the end:<\/li>\n<\/ul>\nclass $EXPR$ extends Component {\r\n render() {\r\n return (\r\n <div>\r\n \r\n <\/div>\r\n );\r\n }\r\n}\r\n\r\nexport default $EXPR$;<\/pre>\n\n
![\"custom-postfix-template-in-action\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-custom-postfix-template-in-action.png\")
<\/p>\nSupport for TypeScript 2.9 and 3.0<\/h3>\n
\n
TypeScript quick fixes from the language service<\/h3>\n
![\"quick-fix-from-ts\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/07\/webstorm-quick-fix-from-ts.png\")
<\/p>\nNew quick-fix \u201cMake method protected or public\u201d in TypeScript<\/h3>\n
![\"ts-fix-method-visibility\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-ts-fix-method-visibility.png\")
<\/p>\nUse TypeScript Language Service for all projects with TypeScript files<\/h3>\n
JSON support<\/h2>\n
Support for JSON5<\/h3>\n
![\"json-five\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-json-five.png\")
<\/p>\nCopy JSON Pointer<\/h3>\n
![\"copy-json-pointer\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-copy-json-pointer.png\")
<\/p>\nImproved support for JSON Schemas<\/h3>\n
\nWebStorm can now automatically download and use schemas from the JSON Schema Store<\/a> that hosts schema files for many popular configuration files.<\/p>\n![\"json-schema-from-store\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-json-schema-from-store.png\")
<\/p>\nAdd missing required properties in JSON files<\/h3>\n
\n![\"json-add-required-properties\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-json-add-required-properties.png\")
<\/p>\nLinters integration<\/h2>\n
Different highlighting for TSLint errors and warnings<\/h3>\n
![\"tslint-severity\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-tslint-severity.png\")
<\/p>\n![\"tslint-severity-highlighting\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-tslint-severity-highlighting.png\")
<\/p>\nAutomatically apply code style rules from all types of ESLint and TSLint configuration files<\/h3>\n
![\"apply-tslint-rules\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-apply-tslint-rules.png\")
<\/p>\nextends<\/code> field. For example, if your\u00a0tslint.json<\/em> file extends the tslint-config-standard<\/em>\u00a0preset, WebStorm will automatically apply the rules related to the use of semicolons and defined in the preset to the TypeScript code style settings in the IDE.<\/p>\nDebugging<\/h2>\n
Breakpoint intentions<\/h3>\n
![\"brk-intentions\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/07\/webstorm-brk-intentions.png\")
<\/p>\nDrop frame in debugger<\/h3>\n
![\"drop-frame\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-drop-frame.png\")
<\/p>\nDebug scratch files<\/h3>\n
![\"debug-scratch-file\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-debug-scratch-file.png\")
<\/p>\nTesting<\/h2>\n
Rerun failed tests<\/h3>\n
![\"rerun-failed-tests-button\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-rerun-failed-tests-button.png\")
<\/p>\nNavigate to Jest snapshot<\/h3>\n
![\"navigate-to-jest-snapshot\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/07\/webstorm-navigate-to-jest-snapshot.png\")
<\/p>\nDiff view for Jest snapshots<\/h3>\n
![\"jest-diff\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/07\/webstorm-jest-diff.png\")
<\/p>\nDebugging Karma tests using Chrome Headless<\/h3>\n
browsers: ['ChromeHeadless']<\/code> to the karma.conf.js<\/em> file, or list it as a browser in WebStorm\u2019s Karma configuration (see the screenshot below). For more info on setting up your project to use Chrome Headless, see this tutorial<\/a>.<\/p>\n![\"karma-headless-debug-config\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/05\/webstorm-karma-headless-debug-config.png\")
<\/p>\nTest files in the Tests scope<\/h3>\n
![\"tests-scope-in-project-view\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-tests-scope-in-project-view.png\")
<\/p>\n![\"tests-scope-in-inspection-profile\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/06\/webstorm-tests-scope-in-inspection-profile.png\")
<\/p>\nVersion Control<\/h2>\n
Automatically register Git and Mercurial repos as VCS roots<\/h3>\n
New Browse Repository at Revision action<\/h3>\n