Feature request: Change css values up and down
In Chrome Devtools (Sources tab), you can put the cursor on top of a CSS value and press ALT + ARROW-UP or ALT + ARROW-DOWN to change the value by 1 in the chosen direction, for example:
width: 4px;
If I put the cursor on top of 4px and press ALT+ARROW-UP, it'll become:
width: 5px;
This would be interesting to have in WebStorm.
Could be done for other values as well, like in javascript if a variable is a static number and you want to quickly change it.
It'd be nice to have this on PHPStorm and other products as well.
Please sign in to leave a comment.
You can assign preferred shortcut to Settings | Keymap | Plug-ins | LiveEdit | Adjust value: once called, it shows a slider you can use to increment/decrement CSS property value:
I'd also suggest looking at the third-party Shifter plugin (https://plugins.jetbrains.com/plugin/6149-shifter)
Oh, I didn't have Live Edit enabled. Thank you. I'll look into Shifter.
I don't have the option "Adjust value" available in Settings | Keymap | Plug-ins | LiveEdit. There is only one option "Reload in Browser". What am I doing wrong?
It would be cool to have this feature without any plugins. As I never use LiveEdit but Webpack's HMR. And LiveEdit isn't working with PHP-Servers. So why including this feature there?
You can use Shifter plugin -- it does a lot of things for many languages (including CSS) and allows customizing/creating your own shifting lists
Thanks! I tried the plugin out yesterday, but the default shortcuts didn't work then. But now they do 🤔
Though you have to select the exact number in order to get it work properly. For example:
I have to select only the number "3" otherwise it shifts "all" or the seconds behind the number or nothing at all (when I select/mark ".3s" as whole).
Is there maybe an order setting?
Looks like it recognizes only "px" and other related values after numbers and not meant to work with time in transition ("s").
Check and file feature request with plugin's author: https://github.com/kstenschke/shifter-plugin/issues
Ah, thanx! Yes, it works with px and rem as expected - that's enough for me :D As mostly I adjust these values
https://github.com/kstenschke/shifter-plugin/issues/28 -- request something like that for time values.
done
Tip: it's much better to create new issue for that than just commenting some old & already implemented/closed issue.
Ok, thanx :D I'm not very experienced with Github's "Issue" rules
After working a while with the shifter plugin, I'm not very happy with it, as it's not so easy to use as frontend devs are used to with Chrome DevTools. I think there should be the same behaviour in PhpStorm. But what is even worse, the plugin adjusts randomly the values across the whole project and as it seems to me you can't limit it to CSS only. So I've now multiple times changed some values in my project accidentally WITHOUT notice it. So the plugin is quite dangerous...
Please implement the Chromes behaviour only for CSS / LESS / SASS 🙏
>But what is even worse, the plugin adjusts randomly the values across the whole project and as it seems to me you can't limit it to CSS only. So I've now multiple times changed some values in my project accidentally WITHOUT notice it. So the plugin is quite dangerous...
Never had such issues myself and I'm using it every day (rarely for CSS values though; mainly for other stuff like true|false, private|protected, yes|no and similar).
But yes, maybe devs will implement something native for CSS stuff one day...