I was recently working on a ReactJS component which I called “Input”. Not anything fancy, an input field with two inner icons and a tailor-made CSS design.
I was ready to merge it when our designer brought to my notice that the proper
term was actually “Filter”.
At that point, making the change included renaming multiple .jsx files, as well as .scss and .js.
My first thought was to write a simple bash for loop with a mv command in its body. But it
seemed unlikely that a single command for the task doesn’t exist and TBH, I was kinda lazy.
In a perfect timing I came across a handy devhints.io tweet Erik shared:
“CLI: change extensions easily using
rename: $ rename -s .jpg .jpeg *”
While the tweet mentions its’ ability to change extensions, rename can do much more, and it’s open
source of course.
Installation
$ brew install renameUsage
To solve my task with style all I needed was to type:
$ rename s/filter/input/gi *I basically used a global (g), case insensitive(i) regex on all the files in my current dir.
There are many alternatives for this type of change with rename, and various use cases for this awesome command.
rename supports options like text substitute (-s), --camelcase, --trim, remove extension (-x), append (-a) and more.
Pro Tip
Always use the -n flag which performs a dry-run, meaning it will only print a preview of the
outcome:
'BPFilter.jsx' would be renamed to 'BPinput.jsx'
'BPFilter.test.jsx' would be renamed to 'BPinput.test.jsx'
'bp_filter.scss' would be renamed to 'bp_input.scss'For more info checkout the rename website