WebStorm 12 EAP, 144.4199: CSS Custom Properties, and fixes

Welcome a new WebStorm 12 EAP build (144.4199)!

As always, you can download it here or, if you have a previous EAP build (144.3891) installed, you should soon get a notification in the IDE about a patch update.

Support for CSS Custom Properties

WebStorm adds support for CSS Custom Properties based on the W3C recommendations.

You can get code completion for variable names:

completion-for-css-vars

From a variable you can jump to its definition with the Cmd-Click (Ctrl-Click), see its quick definition or find its usages.

WebStorm would also validate the default value and parameter info.

css-prop-warning

Coding assistance for classes and ids in CSS

Now when you type a selector in a CSS file, WebStorm will suggest you classes and ids used in your HTML and CSS files. That also works for Sass, SCSS and Less.

completion-for-selectors

Install missing module from npm

WebStorm will now suggest you to install a module in the import statement, if it’s available on npm and add it to the package.json.

install-dependency

More improvements in Angular 2 support

You can now enjoy smarter coding assistance for directives inside Angular 2 inline templates.

ng-directive

Trailing commas in function parameter lists and calls

This ES7 feature proposal is now supported in WebStorm when JavaScript language version is set to ECMAScript 6.

trailing-comma

The full list of issues addressed in this EAP build is available in the Release notes.

Read about the features and improvements added in previous WebStorm 12 EAP builds:

  • WebStorm 12 EAP, 144.3891: Debugging Web workers, improvements in Dart support.
  • WebStorm 12 EAP, 144.3600: Support for Git worktrees, updated look and feel of the Git Log, Missing import statement inspection for JavaScript.
  • WebStorm 12 EAP, 144.3357: SSH Console, Extract field refactoring in TypeScript, support for debugging Node.js apps built with Webpack, and more.
  • WebStorm 12 EAP, 144.3143: Unused imports warning, code assistance intsconfig.json.babelrc and .eslintrc, remote run and debug for Node.js apps, Vagrant integration, debugging Electron apps, and further improvement in Angular 2 support.
  • WebStorm 12 EAP, 144.2925: Inline rename, smarter auto-imports and Optimize imports action for TypeScript, debugging async client-side code, and improvements in Angular 2 support.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates

– JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , , . Bookmark the permalink.

16 Responses to WebStorm 12 EAP, 144.4199: CSS Custom Properties, and fixes

  1. Dan Gamble says:

    Awesome! Will the custom CSS properties work when you work with Sass files as well? (I currently have all my CSS files set to Sass filetype as i use PostCSS and that helps with the syntax errors)

  2. Vladimir Varankin says:

    > Trailing commas in function parameter lists and calls
    > This ES7 feature proposal is now supported in WebStorm when JavaScript language version is set to ECMAScript 6.

    I really don’t understand how this proposed feature is connected to ES6. Why don’t you add a separate ES7 language preset to the Settings?
    IMHO, although all this proposals are fun, such improvement to the IDE’s behaviour leads to unexpected syntax errors in the code. I can’t write stuff for Node.js 5.x (that supports ES6 features) and be sure that my code doesn’t have syntax errors, because WebStorm says that everything is ES6-fine.

    • egoroof says:

      Absolutely agree about “add a separate ES7 language preset to the Settings”!

    • Thomas says:

      I agree with that.

    • Ekaterina Prigara says:

      You can enable Experimental language features inspection in Preferences – Inspections – JavaScript. That will report any language features used that are not in the ES6 standard and it was enabled by default, but then we got negative feedback from users who said that it confuses them and is useless since they intentionally used these experimental features.
      You can file a feature request about adding a new language level on our issue tracker: https://youtrack.jetbrains.com/issues/WEB
      Thank you!

  3. edeniz says:

    Add “Coding assistance for classes” for jade and stylus please.

  4. Wael Jammal says:

    I keep seeing new features, but the abysmal large project support never gets any love.

    We have a pretty large TS project and I have to restart webstorm every hour or so because it crawls my top of the line macbook pro to a halt. It really hates typescript..

  5. Umed says:

    Please provide better type inference support for Typescript. Code intelligence and hinting almost always does not work properly, and does not know what my function returns when it should know. Code intelligence and hinting works only in trivial cases and only if you provide explicit types for your variables and function returns.

  6. Chris says:

    Hi, upfront I would like to say that i really like your software. Its the best out there IMO. But few things are really not getting enough love :)

    Jade and angular 2, you cant write this without syntax errors:
    img(
    [src]=’imagePath’,
    (mouseover)=”log(‘mouseover’)”
    )
    input((blur)=”log(‘blur’)”)
    ul.messages
    li(*ngfor=’#msg of messages’) {{msg}}

    Stylus:
    .my-div
    ma|
    padding: 0

    Imagine that instead of pipe you have caret here and autosuggesiton, if you press TAB, you will end up with:

    .my-div
    max-width: |padding: 0

    I think I saw this kind of bugs also in CoffeeScript and Jade, but Im not sure and I cant find example of that right now.

    Also if you open CoffeeScript source files, Webstorm throws many syntax errors(for sure in lexer.coffee), while it is valid CoffeeScript.

    I hope this will help you. I think this is really basic stuff that should have high priority, but thats just my opinion.
    Anyway great product, keep going :)

Leave a Reply

Your email address will not be published. Required fields are marked *