WebStorm
Forbedre din JavaScript-kode

KJØP VIDEO

JetBrains Boxshot

WebStorm lar deg dra fullt nytte av JavaScript. Få intelligent "code completion", oppdag feil i sanntid, kraftig navigasjon innen JavaScript, TypeScript, Stylesheet språk på alla populære rammeverk.

 

 

 

DESCRIPTION

WebStorm helps you to easily create Web sites by letting you edit HTML, CSS and JavaScript, navigate through files easily and use auto completion for everything in your code. WebStorm also notifies you about code problems on the fly and easily handles complicated languages mixtures e.g. HTML markup or SQL inside a JavaScript. WebStorm tracks any changes made to your source files, protecting you from any accidental losses or modifications, even if made by other applications. At any time you can inspect the history of either a particular file or directory and rollback to any of its previous versions with WebStorm. WebStorm can also set version labels.

Webstorm Screenshot

Webstorm Screenshot

HTML/HTML5/CSS

DOM- and Schema-Based Code Completion - Based on its deep knowledge of HTML/XHTML and XML code, WebStorm is capable of completing:

  • styles
  • file references
  • tag names
  • closing tags
  • attributes
  •  In CSS, code completion works for:
  • classes
  • HTML IDs
  • keywords
  • values
  • properties

Validation and Quick-Fixes - WebStorm detects and suggests auto-fixes for such problems as:

  • invalid CSS selector format
  • invalid CSS properties
  • unused CSS class definitions
  • invalid local anchors and more...
  • missing required attributes
  • invalid attributes or illegal values
  • Wrong references to files in links
  • Duplicate attributes

Whenever you see a bulb, hit Alt+Enter to see what WebStorm suggests

Show Content - Quick Definition Lookup on a CSS ID immediately shows a popup displaying the actual styles defined for this particular ID; when invoked on an image file reference, you will see an image preview. This works both in code and in completions lists.

Zen Coding - WebStorm allows you to use the power and speed of Zen coding. All abbreviations are available for creating new content and for wrapping an existing structure. Having difficulty understanding where the styles come from for a particular tag in your page? Right-click it and choose Show Applied Styles for Tag. This command opens a tree-view of all styles that are applied to the tag by CSS, with all possible overrides.

Extract Embedded Styles - Allows you to clean your HTML code by moving styles embedded inside tags to either the current file <style> section or to a linked external .css file. Simply invoke 'Extract Embedded CSS' quick-fix, specify CSS selector and the destination for the new CSS class.

JavaScript

DOM-Based, Browser-Specific Completion - JavaScript code completion for keywords, labels, variables, parameters and functions is DOM-based and supports popular browsers specifics (IE, Firefox, etc.) The completion is available for both standard and user-defined functions in *.js files, HTML event handlers and everywhere else where appropriate.

Code Navigation and Usage Search - Numerous code navigation and usage search options:

  • Go to declaration - navigates to where the function, variable or label in question is declared with a simple hotkey or Ctrl+Click.
  • Go to symbol - navigates to any symbol in project code using search patterns, including asterisk (*) or CamelHump abbreviations.
  • Find/Highlight Usages - locates other places in your entire project where a JavaScript symbol, label or file is used, with quick preview and instant navigation to the actual usages.

JavaScript Refactoring

Refactoring capabilities provided for JavaScript allow you to easily modify the code structure as well as undo the modifications. Some refactorings available for JavaScript code and *.js files are:

  • Move/Copy
  • Safe Delete
  • Extract embedded script into file
  • Rename
  • Extract Variable/Function
  • Inline Variable/Function

Code Inspections and Quick-Fixes - To ensure better code quality, JetBrains WebStorm catches common errors in your JavaScript code on the fly and offers quick-fixes for them.

JavaScript Debugger Based on Mozilla - With JetBrains WebStorm you can debug JavaScript code utilizing the complete range of features:

  • Breakpoints in HTML and JavaScript
  • Customizable breakpoint properties: suspend mode, conditions, pass count and more
  • Frames, variables and watches views in JavaScript debugger UI
  • Runtime evaluation of JavaScript expressions

Extended Frameworks Support - The following extended JavaScript frameworks are supported: JQuery, YUI, Prototype, DoJo, MoTools, Qooxdoo, and Bindows.
Some specific features include:

  • Code completion for every framework
  • JSDoc and DoJo style type annotations support for better code completion and parameter type information
  • Quick Documentation lookup for JSDoc and DoJo style commands

More Than Code

Batch Code Analysis - No need to click through all the files or deploy to a server to spot errors and warnings. Start Code Analysis for the whole source tree, select Inspections to run, and see all results in a single view.

Language Mixing/Injection - Support for any "outer" and "inner" language in your PHP code - enjoy full coding assistance for CSS, JavaScript, SQL, etc. outside of php code blocks and inside php string literals.

Spellchecker - Integrated spellchecker verifies texts in tags, code strings and comments to avoid misspellings and typos on your web pages. To ensure better code readability even variable names, CSS classes and IDs are spell-checked. To configure spellchecker specify the options for 'Spelling' inspection in Inspections settings.

Smart Environment

FTP and Remote Files Syncronization - Open files from a remote host, FTP, or a mounted network drive using simple configuration and an intuitive user interface. Edit project files locally and deploy back to a remote server using automatic synchronization on file save or on demand.

Version Control Systems Integration - WebStorm supports most popular Version Control Systems:

  • Subversion
  • Perforce
  • Git
  • CVS

All the tedious tasks (adding, removing, deleting files) are performed automatically. A built-in visual merge tool resolves all conflicts in a quick and intuitive manner. The changes made locally are highlighted as you type in the editor gutter, providing intuitive navigation and a 2-click rollback for individual changes.

The following features are available no matter what VCS you use:

  • Integrated changelists - group your changes into multiple change lists for better ogranisation
  • Shelved changes - set aside some changes to restore them later on
  • Repository Changes view - see what has been committed by other team members
  • Incoming Changes view - see the code changes not yet integrated into your local copy
  • Outdated Changes Notification - get warned that a file you are working with has been changed after your last sync.
  • Local History - WebStorm tracks any changes made to your source files, protecting you from any accidental losses or modifications, even if made by other applications. At any time you can inspect the history of either a particular file or directory and rollback to any of its previous versions. You can also set version labels.

TRY NOW

Download demo of WebStorm

Download a trial of WebStorm and evaluate the product for 30 days.  A trial license can be downloaded at https://www.jetbrains.com/products.html.

SPECIFICATIONS

System requirements

Hardware requirements

  • 1 GB RAM minimum, 2 GB RAM recommended
  • 300 MB hard disk space + at least 1 GB for caches
  • 1024x768 minimum screen resolution

Windows

  • Microsoft Windows 10/8/7/Vista/2003/XP (incl.64-bit)
  • To develop Java applications with IntelliJ IDEA, install JDK version according to your project requirements.

Mac

  • macOS 10.5 or higher.
  • Only 64-bit macOS is supported.
  • To develop Java applications with IntelliJ IDEA, install JDK version according to your project requirements.

Linux

  • OS Linux 64 bit
  • KDE, GNOME or Unity DE desktop
  • To develop Java applications with IntelliJ IDEA, install JDK version according to your project requirements.

Note that you can't use JRE bundled with IntelliJ IDEA for development, only to run the IDE itself.

RESOURCES

Here is our collection of resources for learning and getting the most of your subscription of JetBrains.

WebStorm Whitepaper

WebStorm competitive comparison

WebStorm Knowledgebase

WebStorm Online Help

JetBrains Newsletter

Open Source - Projects and support

Videos

WebStorm Overview

What is new in WebsStorm 2018.1

 

COMPARE

WebStorm Licensing Terms

JetBrains uses a subscription-based licensing model, allowing you to purchase yearly subscriptions that includes all bug fix updates. The new licensing model also includes perpetual fallback license grants. When purchasing an annual subscription, you will immediately get a perpetual fallback license for the exact version available at the time of your purchase.

Commercial Annual Subscription - for legal entities, including companies and organizations (both for-profit and non-profit), requiring the software for general commercial use. A legal entity may use the software under the Business Subscription on any computer, operating system, and by any developer within a legal entity, provided that the total number of concurrent users never exceeds the number of subscriptions purchased by that legal entity.

Commercial Annual Subscription includes:

  • Free unlimited email access to technical support and online support resources for the period of the Business Subscription
  • Free generally available bug fix upgrades, minor releases and major releases for the licensed JetBrains IntelliJ IDEA edition for the period of the Business Subscription
  • Available to any legal entity (companies and organizations, including non-profit and government)
  • The license is owned by the legal entity, not by an individual
  • Non-transferable restriction: Use of the software is restricted to the legal entity with no right to transfer. Companies and organizations can only transfer their licenses between employees and contractors
  • The licensed purpose of use is general commercial usage
  • Multi-user license - the total number of concurrent software users cannot exceed the number of purchased subscriptions
  • The license term is time-limited, based on yearly subscription payments
  • Perpetual fallback license: Your license is NOT perpetual. The new licensing model includes perpetual fallback license grants. Perpetual fallback license is a license that allows you to use a specific version of the software after your Business Subscription expires. The specific version of the software that you can fallback to use when your Business Subscription expires will be the exact version available at the time of your purchase

Comparison Commercial and Personal License

SUPPORT

Support

In the subscription following Support and Maintenance with JetBrains is included

  • Unlimited access to technical support via e-mail
  • Free upgrades to all minor and major releases including bug fixes

Contact Jetbrains support


We recommend the following JetBrains support- and resource pages:

WebStorm Knowledgebase

JetBrains Newsletter


Alfasoft offer first line support to our JetBrains customers

Please click here for first line support! (Link to alfasoft.com support form)

Please explain your problem in detail when contacting us. Please remember to enter your version number, and which operating system you are running.

 

NEWS

WebStorm Updates in 2018.1

  • New documentation UI - WebStorm 2018.1 now inlcude a new, more compact, lightweight documentation popup. It uses a more clear and consistent format to present the available information about the method’s parameters, their type and their return type in JavaScript and TypeScript. It also renders Markdown used in the JSDoc comments.
  • TypeScript improvements - In addition to the support for the latest TypeScript 2.7 features, this update improves the Implement Members action and adds the new Surround with type guard quick-fix for unresolved properties. WebStorm now also recognizes TypeScript configuration files with names other than tsconfig.json.
  • Rename class and file together - Now if you run Refactor - Rename for a class, WebStorm will also suggest renaming the file and its usages if it has the same name as the class. And if you press Alt-Enter on the name of the class, interface or type, you will see a new intention that suggests renaming the file to this name.
  • Reformat with Prettier - With the new Reformat with Prettier action (Alt-Shift-Cmd/Ctrl-P), you can format the selected code, a file or a whole directory using Prettier.
  • Create a new Vue project - You can now create new Vue projects in WebStorm using Vue CLI.
  • Extract a Vue component - Create a new Vue component from an existing one, without any copy and paste - select the part of the template and use Refactor - Extract or press Alt-Enter and select Extract Vue Component. WebStorm will create a new single-file component, add an import for it, and pass all the data and methods to it with props.
  • Debugging React Native apps - With the updated React Native configuration, WebStorm now supports more run and debug scenarios: you can now separately configure how the bundler is started and also attach the debugger to an app that is already built and launched on a device. Moreover, you can now debug apps that use Expo right in the IDE.
  • Configuring package manager - It has been made easier to configure package managers in WebStorm - in the Node.js and npm preferences, you can select between npm and Yarn and then use it to install dependencies and run scripts. And if you open a new project with yarn.lock file, WebStorm will use Yarn in it if it’s installed.
  • New Node.js Debugger Console - Node.js debugger now has two console tabs - the Console tab that shows the output of the node process itself and the new Debugger Console where you can execute JavaScript, see the console.log messages, and jump to the location where console.log was called.
  • Partial commits in Git - With the support for partial Git commits you can now commit only selected changes from the file. Use checkboxes in the diff view of the Commit Changes dialog to select chunks of code you want to commit. You can also add changed lines of code to a new changelist using actions on the editor gutter and then commit the changelist.
  • More Git improvements - In the commit details, you can now click on the commit hash to jump to this commit in the Log. When you’re doing a rebase, there are now new Abort Rebase, Continue Rebase, and Skip Commit actions available in the Git Branches popup.
  • Completion and go to definition for classes - Cmd/Ctrl-click on the class name in HTML will now suggest navigating not only to its declaration in the compiled CSS file linked in this HTML file, but also to the Sass, SCSS or Less source. In HTML, code completion will suggest classes and id from all style sheets if there are no matching symbols in the linked CSS file.
  • Other improvements:
    • If you're migrating to webpack 4, WebStorm can now check and provide completion for option names in the webpack configuration file.
    • Similar to tests, you can now run npm scripts using icons right in the editor.
    • When you copy the HTML code to JSX files, WebStorm will automatically replace class and on-event handlers with React-specific attributes.
    • New inspection in package.json will warn you if an installed version of the package doesn’t match the specified range.
    • Better code completion for SVG properties and values in CSS files.
    • You can now synchronize the IDE settings across multiple machines using your JetBrains account.
    • Support for the ECMAScript proposals: escape sequences in template strings, RegExp lookbehind assertions and named capture groups, and class fields.
    • Improved code completion and go to definition for the dynamic imports with import().

What is new in WebsStorm 2018.1 Video

TRAINING & EVENTS

Currently Alfasoft does not offer JetBrains trainings.

For a first insight about WebStorm, please watch following video:

https://www.youtube.com/watch?v=3FCUZDcTcHY