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:
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.
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/' '{}' \; Links Aprofundando no comando rename — em inglês Terminal com Oh My Zsh, Spaceship, Dracula e mais Ambiente de Desenvolvimento JavaScript Porque migramos para o Linux? - PR #15 E aí, o que achou desse post?
Espero que tenha curtido! 💜
O aprendizado é contínuo e sempre haverá