Mastering Renames

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.

rename gif Ant-Man

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 tweet Erik shared:

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


$ brew install rename


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.

coolest name ever gif

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

comments powered by Disqus