AppCode
CLion
DataGrip
GoLand
IntelliJ IDEA
MPS
PhpStorm
PyCharm
Rider
RubyMine
WebStorm
Toolbox App
.NET Tools
ReSharper C++
Space
TeamCity
Upsource
YouTrack
HubWebStorm 2018.1: Prettier, partial Git commits, new documentation UI, and more
Posted on by
🎉 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.
https://youtu.be/EVwJzxLPU3A
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
Comments below can no longer be edited.
Denis Marinov says:
March 26, 2018Hi 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!
Ekaterina Prigara says:
March 26, 2018Hello Denis,
What product was that? Can you please send a link?
Thanks!
Denis Marinov says:
March 26, 2018I 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.
Ekaterina Prigara says:
March 26, 2018In WebStorm you can also run tests using the gutter icons – it works for Karma, Mocha and Jest tests.
dsmjet says:
March 26, 2018I 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?
Ekaterina Prigara says:
March 27, 2018Can 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.
Denis Marinov says:
March 28, 2018I 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.
Ekaterina Prigara says:
March 29, 2018Yes, there’s a gutter icon for every Mocha, Karma and Jest test.
Denis Marinov says:
March 30, 2018Okay, I’ll have to see how those work. Thank you for your time!
Helmuth Saatkamp says:
March 26, 2018Great 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.
Ekaterina Prigara says:
March 28, 2018Thank 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!
Kyle Palko says:
March 26, 2018Great update, thanks!
Bogdan Zaharia says:
March 26, 2018It’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.
Ekaterina Prigara says:
March 28, 2018No, 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
Rob says:
March 27, 2018Partial 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!
Ekaterina Prigara says:
March 28, 2018Thank you for using WebStorm!
Please follow this request for the line-wise commits: https://youtrack.jetbrains.com/issue/IDEA-186988
Julian Müller says:
March 27, 2018Since 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?
Ekaterina Prigara says:
March 28, 2018Hello 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.
Julian Müller says:
March 28, 2018I 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 😀
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”.
Ekaterina Prigara says:
March 28, 2018Has 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!
Julian Müller says:
March 29, 2018I’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. 😀Ekaterina Prigara says:
March 29, 2018Hello 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
Julian Müller says:
March 27, 2018Also “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?
Julian Müller says:
March 27, 2018Hm, 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.
Ekaterina Prigara says:
March 28, 2018That’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
Vadorequest says:
March 27, 2018The 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.
Ismael Venegas Castelló says:
March 28, 2018PyCharm 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.
Ekaterina Prigara says:
March 29, 2018That’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.
Ismael Venegas Castelló says:
March 29, 2018Thank you!
spaceoi says:
March 29, 2018Can you provide a react native expo debug tutorial or guide? I’ve tried several times while nothing correct happed.
Thanks
Ekaterina Prigara says:
March 29, 2018Hello,
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”.
Zhaoyu Zhang says:
March 31, 2018Thanks for your help, and yes I’ve already these docs but setting break point didn’t work.
Bhish says:
April 9, 2018Is 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:
Ekaterina Prigara says:
April 9, 2018You 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
Atul says:
April 12, 2018Tried using the package.json option but the settings are not picked up. Any idea how can I make the editor pick up the settings?
Ekaterina Prigara says:
April 13, 2018> 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?
Mille says:
May 24, 2018How 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?
Ekaterina Prigara says:
May 25, 2018It should work the same way in WebStorm. What WebStorm version do you use?
Mille says:
May 27, 2018I believe I’m on the latest? I’m on version 2017.3.4
Ekaterina Prigara says:
May 28, 2018Partial commits were added in WebStorm 2018.1. One of the ways to download it is from our website: https://www.jetbrains.com/webstorm/whatsnew/
finelay says:
October 22, 2018My WebStorm version is 2018.2.4 but I can not sea they checkboxes?
How can i use partial git commits?
Ekaterina Prigara says:
October 22, 2018You 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