WebStorm 2016.3 EAP, 163.4830: Stylelint, usages for default exports, and more

Please welcome a new WebStorm 2016.3 EAP build (163.4830)! You can download it here, or if you have the previous EAP build (163.4396) from the last week installed, you should soon get a notification in the EAP about a patch update.

Integration with Stylelint

WebStorm adds integration with Stylelint, a code quality tool for stylesheets. You can now see the errors reported by Stylelint right in the editor.

stylelint

To get started, install Stylelint globally or locally in your project via npm, add .stylelintrc file with the Stylelint configuration and then enable the integration in Preferences | Languages & Frameworks | Stylesheets | Stylelint. That’s it! Stylelint errors will be shown in the editor. Hover over the highlighted code to see the error description.

Find usages for ES6 default exports

You can now find usages for default-exported functions or classes: press Alt-Cmd-F7 on OS X or Ctrl+Alt+F7 on Windows and Linux on the export  to see usages in a popup or press Alt-F7 to see usages listed in a tool window.

find-usages-default-export

Updated Angular 2 code snippets

Angular 2 has been finally released, yay! We’ve updated the collection of the Angular 2 Live templates in WebStorm to comply with John Papa’s recommendations.

In addition, we’ve fixed some issues with duplicates in import suggestions when using Angular 2.0.

TypeScript import can be shortened

A new inspection now warns you if an import statement in the TypeScript code can be shortened. That is very useful when you re-import all classes contained in a directory in the index.ts file.

short-path-in-ts-import

For a detailed list of the issues addressed in this EAP build, please see the Release notes.

Learn more about other new features in WebStorm 2016.3:

  • WebStorm 2016.3 EAP, 163.3094: Integration with Flow; PostCSS support; Smarter Rename for TypeScript; More features in Angular CLI integration; Grouped generated files in the Project view; Option to generate an .editorconfig file; Code style option for arrow functions.
  • WebStorm 2016.3 EAP, 163.3512: Integration with Docker for Node.js apps; Bundled Fira Code font; San Francisco font is default on OS X; Flow tool window with file and project errors.
  • WebStorm 2016.3 EAP, 163.3983: ESLint autofix; Automatic detection of TypeScript version in the project; Undo commit action; Test names now available in the Go to symbol.
  • WebStorm 2016.3 EAP, 163.4396: Create new React apps with Create React App from the Welcome screen; Improvements in Angular 2 support.
  • WebStorm 2016.3 EAP, 163.5219: Better support for ES6 object destructuring.

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.

10 Responses to WebStorm 2016.3 EAP, 163.4830: Stylelint, usages for default exports, and more

  1. Dan Gamble says:

    Awesome to see Stylelint added :)

  2. Alex Van Camp says:

    Very excited about Stylelint integration! Will it also highlight the contents of tags within HTML, via stylelint-processor-html?

    • Ekaterina Prigara says:

      Haven’t heard about it before, we’ll have a look. Probably we can lint this injected CSS even without any additional Stylelint plugins.

  3. Paul Binns says:

    I had problems opening any old projects as well as creating new projects. The index would happen and then the Project window either didn’t display or was un-openable.
    Removing the old preferences from ~/Users/username/Library/Application Support fixed the issue

    This is on OSX MacOs Sierra 10.12

  4. Windows 10 x64, PhpStorm 2016.3 EAP
    Enabled Stylelint plugin in project C:\repo\myproject

    When opening file resources/less/mobile/pages/watch.less, I’m getting the following error message:
    Stylelint failed: ENOENT: no such file or directory. stat' C:\repo\myproject\watch.less'

    What am I doing wrong?

    • Ekaterina Prigara says:

      Can you please try to run Stylelint in the terminal. Does it work ok?

      • Yu says:

        I have same issue. Possible to run stylelint command through npm run which is installed in the project local node_modules

        Although WebStorm 2016.3 RC says;


        "C:\Program Files\nodejs\node.exe" C:\path\to\myProject\frontend\node_modules\stylelint\dist\cli.js -f json --stdin-filename index.@.css
        Error: ENOENT: no such file or directory, stat 'C:\path\to\myProject\frontend\frontend\index.@.css'
        at Error (native)

        Process finished with exit code 0

        And index.@.js actually exists in C:\path\to\myProject\frontend\src\nsp\Component\css\index.@.js

        I think WebStorm somehow cannot resolve path correctly.

        I hope this will be fixed soon!

Leave a Reply

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