Giter Club home page Giter Club logo

refactor-ts's Introduction

refactor-ts

npm version

WARNING! This package is not maintained anymore. Please don't use it!

refactor-ts is a command line tool that's automates common refactorings in a typescript project.

Why do I need this? I have an IDE.

In an ideal world, this tool would not be necessary. A lot of common refactor scenarios are already supported by most IDEs. But I personally run in many situations in which the refactor capabilities of the my IDEs or editors just aren't enough.

Installation

I would recommend installing it globally:

npm: npm i -g refactor-ts

yarn: yarn global add refactor-ts

If you don't want to install it globally, you could also use npx: npx refactor-ts <command>

What can it do?

Each use case has it's own command.

You can always run a command with --help (for example refactor-ts rename --help) to see it's options.

If you don't pass all the required options directly, you are asked about them in an interactive prompt. I would recommend the use of the interactive prompt, because it provides useful features like autocomplete.

The following commands are available right now:

  • rename Rename a file or its folder, including surrounding files and it's content.
  • change-chasing Change the casing of the included files. For example from kebab case (my-file.ts) to pascal case (MyFile.ts).

rename

I experience the common scenario, in which I have project in this concepts are grouped into multiple files.

Let's take for example a React project, in which each component is in it's own folder with multiple files:

src
|-- components
    |-- App
        |-- App.tsx
        |-- App.container.tsx
        |-- App.test.tsx
        |-- App.styles.tsx
    |-- Counter
        |-- Counter.tsx
        |-- Counter.test.tsx
        |-- Counter.container.tsx
        |-- Counter.styles.tsx

If we now want to rename the Counter component to PositiveCounter, we would have to rename each of the four files and it's directory. After that we might need to rename of names of the exported functions/types/constants in the files.

The rename command automates this task for you:

refactor-ts rename --path src/components/Counter --search Counter --replace PositiveCounter

After you run this command the new file Structure looks like this:

src
|-- components
    |-- App
        |-- App.tsx
        |-- App.container.tsx
        |-- App.test.tsx
        |-- App.styles.tsx
    |-- PositiveCounter
        |-- PositiveCounter.tsx
        |-- PositiveCounter.test.tsx
        |-- PositiveCounter.container.tsx
        |-- PositiveCounter.styles.tsx

All symbols in the files containing Counter, including all it's usages, will be replaced as well.

change-casing

Change the casing of the included files.

For example if we have the following structure with inconsistent casing:

src
|-- utils
    |-- myFunction.ts
    |-- myFunction.test.ts
|-- components
    |-- positiveCounter
        |-- PositiveCounter.tsx
        |-- positive-counter.test.tsx

We could fix it with the command:

refactor-ts change-casing --folder src --casing kebab

The result would be:

src
|-- utils
    |-- my-function.ts
    |-- my-function.test.ts
|-- components
    |-- positive-counter
        |-- positive-counter.tsx
        |-- positive-counter.test.tsx

How does it work?

Most of the work is done by ts-morph. I provides an excellent Typescript AST Api and I just clue it all together.

How can I contribute?

I you have an idea for a new command, please create an GitHub issue first. Then we can work together on the Api. If we are both happy, you can create a Pull Request with the implementation of your idea.

refactor-ts's People

Contributors

dependabot[bot] avatar tobias-walle-mw avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.