Suponha que seu projeto tenha uma base de código com 150 arquivos JavaScript e você precisar migrar para TypeScript alterando as extensões dos arquivos. 🤔

Como renomear a extensão do arquivo de .js para .ts ou arquivos React de .jsx para .tsx de maneira fácil e rápida?

Fazer isso manualmente é inviável! E, para nós Devs, isso pode ser automatizado.

Se você utiliza Linux ou MacOS. Basta instalar o pacote rename

Instalando o pacote rename

  • MacOS
brew install rename
  • Linux (Ubuntu a outras distros Debian-based)
sudo apt-get install rename

Renomeando extensões de arquivos

Supondo que sua base de código Front End tenha a seguinte estrutura:

.
└── src
    └── componentes
        └── Button
            ├── index.js
            └── styles.js

Acesse a pasta src e execute:

find . -type f -name "*.js" -exec rename 's/\.js$/.tsx/' '{}' \;

Essa ação vai mudar todos os arquivos com extensão .js para .tsx

Mas o arquivo styles deveria ser .ts, não .tsx

Então, logo em seguida execute:

find . -type f -name "styles.tsx" -exec rename 's/\.tsx$/.ts/' '{}' \;

Para todo arquivo styles.tsx essa ação vai renomear apenas a extensão de .tsx para .ts.

Pronto! Tudo funcionou e você já terá sua base de código com extensão em TypeScript.

.
└── src
    └── componentes
        └── Button
            ├── index.tsx
            └── styles.ts

Atenção

Esse comando é executado de maneira recursiva para cada subdiretório a partir da raiz de onde o terminal se encontra, isto é, a partir da pasta no terminal onde está sendo executado o comando. Então tome bastante cuidado e garanta que esteja na pasta correta.

Use o comando pwd para saber se está no diretório correto:

❯ pwd
/Users/tgmarinho/Developer/rename/src

Execute o comando no terminal, a partir da pasta src.

Developer/rename/src 
❯ find . -type f -name "styled.tsx" -exec rename 's/\.tsx$/.ts/' '{}' \;

Última dica

Ao serem executados, os comandos ficam no histórico do terminal. Para encontrá-los você pode vir aqui neste post novamente ou consultar no seu terminal. Para isso, digite:

history | grep rename

Quando busquei todos os comandos que possuem a palavra rename, esse foi o resultado que apareceu na minha máquina.

❯ history | grep rename
 9939  find . -type f -name "*.js" -exec rename 's/\.txt$/.tsx/' '{}' \;
 9940  find . -type f -name "*.js" -exec rename 's/\.js$/.tsx/' '{}' \;
 9941  brew install rename
 9942  find . -type f -name "*.js" -exec rename 's/\.js$/.tsx/' '{}' \;
 9943  find . -type f -name "styled.tsx" -exec rename 's/\.tsx$/.ts/' '{}' \;

E aí, o que achou desse post?

Espero que tenha curtido! 💜

O aprendizado é contínuo e sempre haverá um próximo nível! 🚀