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

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

Ekaterina Prigara

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

#Angular2 #stylelint #typescript #WebStorm 2016.3
Comments below can no longer be edited.

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

  1. Dan Gamble says:

    September 23, 2016

    Awesome to see Stylelint added 🙂

  2. Alex Van Camp says:

    October 11, 2016

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

    • Ekaterina Prigara says:

      October 12, 2016

      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:

    October 17, 2016

    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. Evgeni Dmitriev says:

    November 3, 2016

    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:

      November 4, 2016

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

      • Yu says:

        November 10, 2016

        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!

        • Ekaterina Prigara says:

          November 11, 2016

          Any chance you can provide more information about your project structure and these index.@.js/css files? Or send a link to a similar project? We were not any to reproduce the issue so far. What Stylelint version do you have?

Latest Tweets

Related posts