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 *
⚡https://t.co/La6P7SPhOK pic.twitter.com/wEmCBYdSCZ

— Devhints.io (@devhints) March 24, 2018

While the tweet mentions its’ ability to change extensions, rename can do much more, and it’s open source of course.

Installation

$ brew install rename

Usage

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