WebStorm

WebStorm is a powerful but extremely compact integrated development environment (IDE). This web development tool is perfectly equipped for both client and server side users with Node.js.

The main editor code interface of WebStorm integrated development environment

As an integrated development environment working with many popular programming languages ​​such as JavaScript, HTML or CSS, WebStorm is a great choice for those who are looking for a web programming software.

Key features of WebStorm development tools

• Code editor with many powerful features.
• Analyze programming quality and automatically detect errors.
• Trace, debug and test with Karma and Mocha.
• Extremely rich integration tools like Grunt, Gulp .
• Powerful IDE customization capabilities from shortcut to theme or code editor interface .
• Works with various VCS (Version Control System).

Introducing the integrated WebStorm development environment

Everything you need in a web development tool can be found at WebStorm. A smart code editor that supports JavaScript and Node.js, advanced debugging capabilities, and more. All are present in an integrated development environment called WebStorm.

Code editor

WebStorm's intelligent code editor provides support for JavaScript, Node.js, HTML and even CSS. Not only does it support code with popular languages, users can also enjoy advanced support for popular frameworks like Meteor or AngularJS and more. The WebStorm code editor will parse and give complete syntax suggestions for all methods, functions, modules, variables and classes. ). Especially with the HTML language, users can also use bookmarks for WebStorm autocomplete or Emmet abbreviation extremely effective, which helps reduce time and increase productivity.

Very rich integration tools of WebStorm

The ability to navigate in the editor also helps you work with large files without worrying about getting tangled. Only by pressing Ctrl + Click , you can get to the definition of any method, function or variable in the editor. Finding icons, files or class names with Search Everywhere or the ability to automatically detect errors, alerts in the editor that comes with the quick-fix option are extremely helpful. .

Debugging, tracing and testing

Debugging and tracking tools written in JavaScript and Node.js built into WebStorm do not require users to perform any installation. WebStorm provides advanced debugging for client-side code for Google Chrome (objects defined only can be used in the browser), built right into the IDE so users don't have to switch between the editor and browser to debug.

The ability to debug JavaScript and Node.js of WebStorm

With WebStorm, developers can choose the Karma test tool to test client-side JavaScript code or Mocha to test Node.js code. These tools allow testing and debugging right in the IDE, displaying results in a very intuitive format.

Integrating many tools

WebStorm integrates many common command line tools for web development. These can be Grunt and Gulp tools to run tasks or code quality testing tools npm, ESLint, JSHint, Bower or Cordova to create mobile applications and run applications and many other scenarios. .

In addition, WebStorm also works with multiple Version Control Systems in the same UI, ensuring consistency for the user experience whether they use git , SVN, Mercurial or Perforce to manage and Check your source version.

WebStorm works with many popular version control systems

After considering all aspects of WebStorm, it can be said that this is really a web development tool that is worth a trial for developers. A 30-day trial allows you to use all the features of WebStorm.

New in WebStorm 2018.3

JavaScript & TypeScript

Automatically enter data in JavaScript

In JavaScript files, WebStorm can now automatically import not only for icons that are defined internally and depending on the project. This feature works when the library has a source written in the form of an ES module or a TypeScript definition file.

Parameter hint

Parameter hints are now available in the JavaScript file. They display parameter names in methods and functions, making the user's code more readable.

Multiline tool

Now users can add Todo comments to multiple todo or fixme lines, then add indentation to the next line to continue the todo command.

Overwriting method

When you override a method from the parent class or interface and select it from the completion suggestion, the IDE automatically adds parameters, calls super () and typing information.

Convert variables with Arrow Function

A new concept (Alt-Enter) helps convert a function into a variable containing the Arrow Function or class method for a field.

Better 'null' and check 'undefined'

WebStorm can now detect situations better when you type (TypeError) because the method is called on an undefined, null value, or via a function or its used attribute.

Framework

Improved Angular support

WebStorm now supports editing of Angular templates better. Finalize the code and navigate to the definition of variables, pipe, async pipe as well as template reference variables more accurately. A total of more than 50 issues have been fixed in Angular and Angular JS support.

Node.js API

Parameter information and documentation for the Node.js API are now more detailed because they use data from node.d.ts. The Go to definition will take you to Node.js sources if you want to see the actual implementation of methods.

Vuetify Support

WebStorm now provides code completion for components from Vuetify 1.1 and above.

React improvements

In React applications, code completion now suggests all component cycle methods. Unresolved variable inspection will now warn users about unknown components.

HTML and Style tables

Check the accessibility of HTML

To help users write HTML code more accessible, WebStorm adds new test elements based on suggestions from the Web Content Accessibility Guidelines (WCAG). These verification factors include 12 useful tips and quick fix suggestions when pressing Alt-Enter.

Set of rules to move and extract

With the new Extract ruleset task, available when pressing Alt-Enter, you can quickly extract the CSS declaration from a set of rules into a new, more specific one.

Move refactoring helps you move all rule sets from one CSS, SCSS, Sass, Less or Stylus file to another location.

New CSS code style options

The code styles for CSS, SCSS, Sass, Less, Stylus are now configured for using blank lines. In addition, users can now categorize CSS properties within blocks - alphabetically or custom.

Tag Remove

The Unwrap / Remove task for HTML and JSX tags (available via Alt-Enter or Shift-Cmd-Backspace / Ctrl-Shift-Delete) now automatically updates the indent.

Check

Easier navigation for tests

The structure view now displays the names of tests and sets in the file. Start typing the test name into the list filter, then quickly navigate to the required location in the file.

If the test fails, double click on the test name (or go to Jump to Source) in the test tool window to reach the error line (if any).

Tool

Support Node.js deployment flows

WebStorm now provides code completion for the deployment flow API and allows users to debug them - using Node.js 10.12 and above and the --experimental-worker flag. You will know which thread is an important breakpoint. You can also switch between streams to see call strings and variables.

More flexibility with ESLint and TSLint

WebStorm uses strict levels from the linter configuration file, both in the editor and at code checking before validation. Now you can override important levels in the IDE and see the whole problem from linter errors or warnings.

For TSLint errors, press Alt-Enter, then, press the right arrow key to add a comment removing rule.

Complete package.json

For elements dependent on the package.json file, WebStorm now provides suggestions for the latest and greatest versions.

Run the Protractor test

Use the gutter-like icon for the editor next to the Protractor test to run or debug the test run.

Direct editing

The Live Edit feature now works without the Chrome extension.

Version control

PR GitHub

You can now view the entire Pull Request in the project on GitHub right at WebStorm. In the VCS - Git menu, select View Pull Requests to open a new tool window showing the description, stickers, delegates and the changed file. Here, you can easily see the difference or create a new internal branch.

Git sub-module

Use all the familiar features in Git such as project updates, commit changes, view differences, conflict resolution, working hours with additional Git modules.

Ignore whitespace

Now users can skip or cut spaces while merging data - the configuration is available in the drop-down menu at the top of the Merge Revisions for dialog box. By default, whitespace is removed when you use it. Annotate for a file.

Better support for pre-selected hooks

The Commit dialog box now displays and correctly handles the file changes with the selected hook (for example, when using lint-staged).

IDE

New search popup

Unified search popup makes it easier for users to find layers, icons, and files in a project. You can even use it to search IDE settings and tasks. Start with Search Everywhere (Shift-Shift) or the Go to task, then press Tab to move the search text.

High-contrast interface

To make it easier for people to access WebStorm, the developer has added a new high-contrast interface. The IDE now allows screen readers to number lines, VCS comments, breakpoints and watermark icons.

Configure the plugin

Redesigning the Plugin page in Preferences now displays the most popular features and plugins. You can search plugins by category and categorize them by download and rating.

Drag the folder to open

Drag the folder and code into the IDE's boot screen from the file manager or the desktop to open it in WebStorm.

New features in WebStorm 2016.2 version

WebStorm 2016.2 is the second update to the WebStorm JavaScript development environment this year, bringing more advanced support for TypeScript and popular framework frameworks, along with many other improvements.

Language support

• TypeScript 2.0 Language - WebStorm provides support for many of the features in TypeScript 2.0, class selections, map paths based on resolution module, and more.
• Switch to arrow functionThe IDE brings a new step forward, helping you upgrade the code to ECMAScript 6. Clicking Alt + Enter in the callback function and selecting Convert to arrow function will help switch to the arrow function.
• Replace var with let or const, you can also try templates .let and .const.

Use the let and const commands

Framework framework and library

• Integration with Angular CLI allows creation of Angular 2 projects from the IDE's Welcome screen.Angular 2 Live models also bring quick snipper codes.
• With improved React support, WebStorm can now bring complete code and handle component properties defined by propTypes.React events are also automatically added {} instead of "".Non-DOM properties are also not marked as unresolved, and the component's lifecycle method is not marked as unused.
• Improved AngularJS ui-router support with graph illustrating the relationship.
• Support importing JSPM in JavaScript projects by analyzing the SystemJS map defined by System.config ({}).

Integrate Angular CLI to easily create Angular 2 projects and use existing templates

Improvements in the IDE environment

• Support for ligature programming languages ​​fonts such as Fira Code, Monoid or Hasklig.You just need to go to Preferences> Editor> Colors and Fonts> Font .
• Improved when working with patches, makes it easier to work with VCS Patch , copy the patch to the clipboard, open WebStorm and it will automatically suggest application. Alternatively, you can also drag and drop the patch file into the IDE and use the Apply Patch Action in the VCS menu .

Automatically suggests applying patch file when copying to clipboard

Other improvements of WebStorm

• Choose free background images with Action Set Background Image.
• Drag and drop images, JavaScript or CSS into the HTML file in the editor to create SRCs, scripts or tag links.
• When using React with TypeScript, components are automatically imported.
• Improved UI with VCS log.
• Select any specific task with Grunt, gulp or npm to "Before launch task" to configure Run or Debug.
• Fix JavaScript error in Firefox 36+ with debug setting options in Firefox Remote. 

Pactimza