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.
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.
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.
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
Dan Gamble says:
September 23, 2016Awesome to see Stylelint added 🙂
Alex Van Camp says:
October 11, 2016Very excited about Stylelint integration! Will it also highlight the contents of tags within HTML, via stylelint-processor-html?
Ekaterina Prigara says:
October 12, 2016Haven’t heard about it before, we’ll have a look. Probably we can lint this injected CSS even without any additional Stylelint plugins.
Paul Binns says:
October 17, 2016I 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
Evgeni Dmitriev says:
November 3, 2016Windows 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, 2016Can you please try to run Stylelint in the terminal. Does it work ok?
Yu says:
November 10, 2016I 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, 2016Any 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?
Yu says:
November 16, 2016Thank you for your reply!
I just uploaded the sample asset which can reproduce the problem here.
https://dl.dropboxusercontent.com/u/461576/webstorm_sample_asset.7z
I hope this will be solved soon!
Ekaterina Prigara says:
November 16, 2016The problem is caused by changes introduced in Stylelint v7.4. We reported an issue https://github.com/stylelint/stylelint/issues/2064 and will try to work on a workaround on our side. In the meantime, please use an earlier Stylelint version.