🎉 Today we’re announcing WebStorm 2018.1! 🎉
With this big spring update, WebStorm brings integration with Prettier, lots of improvements in support for JavaScript, TypeScript, and CSS, and so much more!
Explore the new features and download WebStorm 2018.1 on our website.
Here are the key highlights of WebStorm 2018.1 that you can’t miss:
- Format your code with Prettier with a shortcut, Alt-Shift-Cmd/Ctrl-P.
- Commit to Git or add to a changelist only selected changes from a file.
- Enjoy the new, more compact and lightweight documentation popup for JavaScript, TypeScript, and other languages.
- Create new Vue projects from the IDE’s Welcome screen using Vue CLI, and create new components using the Extract Vue Component refactoring.
- Configure Yarn or npm as a package manager used in the project, in the Node.js and npm preferences.
- Debug React Native apps that use Expo, as well as those already built and launched on a device.
WebStorm Team
Hi there,
Nicely done! Though, would you like to add code editor gutter icons for running code block, like shown in other EAP’s of related Jetbrains projects?
That would be great! Thank you!
Hello Denis,
What product was that? Can you please send a link?
Thanks!
I saw that with PHPStorm (https://blog.jetbrains.com/phpstorm/2018/03/testing-improvements-in-phpstorm-2018-1/) and also with Clion, which I use for my C/C++ projects. They have that gutter icon for running classes, functions etc.
In WebStorm you can also run tests using the gutter icons – it works for Karma, Mocha and Jest tests.
I have to look into that. But can’t you just have the gutter icons on the gutter without having to use one of the above?
Can you please explain what do you want these icons to do? Run the selected code, block or file with Node.js? Run this code in the browser console?
If you want to run a file with Node.js, you can do it pretty easily right now – right-click on the file and select Run.
I thought you can do something like that https://ibb.co/jgHuc7 with a plain JavaScript function or class, but maybe that’s something with CMake and Clion. Do Karma, Mocha and Jest tests provide you with this gutter icon on the gutter?
P.S. Can’t reply to the below ones. Don’t know why.
Yes, there’s a gutter icon for every Mocha, Karma and Jest test.
Okay, I’ll have to see how those work. Thank you for your time!
Great Release, love those improvements. So far, so good.
But I found one problem with the find/replace dialog. When I try to replace something in the code, the confirmation dialog stays behind the find/replace dialog after I click the rename all button.
Thank you!
That’s a known issue, we are now working on a fix and you can follow the progress here: https://youtrack.jetbrains.com/issue/IDEA-187452
Sorry for the inconvenience!
Great update, thanks!
It’s great that Webstorm now has support for Prettier. Is there also an easy way to run it when saving a file? Easier and more integrated than using file watchers, I mean.
No, sorry, the only way to run Prettier on save now is using the file watcher. By the way, we have updated the docs on configuring the file watcher – it should work smoother now: https://prettier.io/docs/en/webstorm.html
Partial git commits are a first step in the right direction. I would love to see full support for all command line features, especially partial _adds_ (of new files) and line-wise commits.
Thank you for your efforts, Webstorm’s the best web IDE by far!
Thank you for using WebStorm!
Please follow this request for the line-wise commits: https://youtrack.jetbrains.com/issue/IDEA-186988
Since updating to 2018.1 all methods in my React components are marked as ‘unused’ even though they are either default methods (render, componentWillMount, etc..) or are used inside the render method (but since marked as unused,….).
How can I fix this or roll back to 2017 which was working like a charm 5 minutes ago!
I tried to invalidate my cache and restarted but it doesn’t do anything.
Help?
Hello Julian,
Any chance you can send us the code sample (we are interested how the component is defined)? So far we were not able to reproduce the problem?
In the meantime, you can download WebStorm 2017.3 here: https://www.jetbrains.com/webstorm/download/previous.html
Sorry for the inconvenience.
I deleted the .idea folder inside the project, then hit ‘Invalidate Cache -> Restart’. After that, React code is highlighted correct again. Yay!
There is only one problem left: The file search :D
When typing, not all files are shown (see picture below):
https://imgur.com/a/WTrJL
Only one file is shown, while you can clearly see that 3 files are starting with “Connect”.
Has the indexing already finished? If yes, can you please still send us the IDE logs? It seems that something is wrong with the project indices – maybe some error occurred when they were built :( Thanks!
I’ve submitted a request (#1311368) and got the response that some scss file inside ‘node_modules/sass-spec…’ is causing the issue.
However, using
find . -type d -name '*sass*'I’m unable to find that folder though. :DHello Julian,/node_modules/node-sass/node_modules/sass-spec when the error occurred and it caused it (you can also see that in the log file). Probably node-sass adds this package when you run some specific command and then it was removed when you’ve updated the dependencies.
We see that this file was under the path
Also “Comment with Line Comment” and “Comment with Block” comment is not working in JSX files anymore. Even the menu options are hidden, once inside a React component (Code > Comment with ….”
Will this feature be reintroduced in a later patch for WebStorm 2018?
Hm, strange…Had to restart WebStorm because I was unable to write Braces in my code. This fixed my issue being unable to toggle line comments.
I’ll keep you updated regarding my other issue.
That’s weird. Can you please send us the content of the IDE log folder (menu Help – Show Logs) to our tech support: https://intellij-support.jetbrains.com/hc/en-us/requests/new
The new git commit one-liner is a long-awaited and awesome feature, thanks!
Running scripts directly from npm package is a nice to have feature as well.
PyCharm pro is advertised to also have the same features as WebStorm and DataGrip bundled, however I can not find Prettier support in PyCharm 2018.1 Pro.
That’s right. Though, some of the plugins that are bundled with WebStorm and not bundled with PyCharm (but they all are available). You can install the Prettier plugin in PyCharm via Preferences | Plugins.
Thank you!
Can you provide a react native expo debug tutorial or guide? I’ve tried several times while nothing correct happed.
Thanks
Hello,
Please check the steps described here in the “Debugging React Native apps that use Expo” section or in our docs under “To debug a React Native application that uses Expo”.
Thanks for your help, and yes I’ve already these docs but setting break point didn’t work.
Is there a way to configure the prettier formatter? For example we format with single quotes rather than double.
Ideally, we actually run through ts-lint and tsling-plugin-prettier – so our prettier format rules are actually contained within our tslint.json (under rules.prettier).
Good work btw :+1:
You can add a Prettier configuration file to your project or add configuration options to the package.json file: https://prettier.io/docs/en/configuration.html
Tried using the package.json option but the settings are not picked up. Any idea how can I make the editor pick up the settings?
> Any idea how can I make the editor pick up the settings?
So do you want to configure the behaviour of the built-in formatter or Prettier (when you run it using the Reformat with Prettier action)?
The latter should work fine with the config in package.json. Can you please check if it picks up the config if you run prettier from the command line?
How do you use partial git commits?
I see in Intellij that there are checkboxes, but not in Webstorm. Do I have to enable this anywhere?
It should work the same way in WebStorm. What WebStorm version do you use?
I believe I’m on the latest? I’m on version 2017.3.4
Partial commits were added in WebStorm 2018.1. One of the ways to download it is from our website: https://www.jetbrains.com/webstorm/whatsnew/
My WebStorm version is 2018.2.4 but I can not sea they checkboxes?
How can i use partial git commits?
You can select the specific chunks of code you want to commit in the Commit dialog. You can find a detailed instruction in our docs: https://www.jetbrains.com/help/webstorm/commit-and-push-changes.html