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