NG Refactor

Bring joy to your angular vscode experience.

Table of contents

• Goals
• Features
  • Toggle inline HTML
  • Toggle inline CSS
    • Known limitations
  • Rename component (todo)
  • Move component (todo)
  • Extract component from current selection (todo)
  • Ng generate explorer integrations (todo)
• Contributing
  • Hacking on NG Refactor

Goals

I have struggled way too many hours refactoring components by hand, it's enough and I thought this could make a few of you guys happier developpers.

Features

Toggle inline HTML

Allow to toggle between inline template and external template file.

Available as :

• Command in component typescript file
  • CTRL+SHIFT P Toggle inline HTML
• Code action on template: or templateUrl:

Toggle inline CSS

Allow to toggle between inline styles and external style sheet.

Available as :

• Command when in component typescript file
  • CTRL+SHIFT P Toggle inline CSS
• Code action on styles: or styleUrls:

Known limitations

As of know this doesn't take into account your configuration and will create and try to read from scss files.
This is planned for a future release.

Rename component (todo)

Allow to rename a component and its usage.

Move component (todo)

Allow to move a component from one folder to another.

Extract component from current selection (todo)

Allow to create a new component from the current html selection.

Ng generate explorer integrations (todo)

Allow you to call ng generate via the explorer.

Contributing

Don't hesitate to file an issue if you found a bug or want to see a feature implemented !
Pull requests are welcome too !

Hacking on NG Refactor

NG refactor is developped in typescript and uses jest for testing, it has currently no dependencies.
Run the following command in a terminal to install and launch:

git clone https://github.com/MonsieurMan/ng-refactor.git
cd ng-refactor
yarn | npm i
# Launch typescript compiler in watch mode
yarn start | npm run start

Once the typescript compiler is watching, simply press F5 to open the Extension Development Host and you're good to go.
If you're new to extension in vscode as I am check out the horrible documentation