Plugin for Prettier that enforces a consistent order of properties inside Angular decorators like @Component and @Directive. It works by reordering the decorator object according to a user defined list of property names.

This plugin is written in TypeScript and tested via GitHub Actions. Tagged releases are automatically published to npm.

• For prettier 2.x.x use version 1.x.x of this plugin.
• For prettier 3.x.x use version 2.x.x of this plugin.

Install the plugin in your project:

npm install -D prettier-plugin-organize-angular-decorators

Then configure it in .prettierrc, prettierrc.js or your preferred Prettier configuration file.

{
  "plugins": ["prettier-plugin-organize-angular-decorators"],
  "componentDecoratorOrder": [
    "standalone",
    "selector",
    "templateUrl",
    "styleUrls",
    "changeDetection",
    "providers"
  ],
  "directiveDecoratorOrder": [
    "selector",
    "providers"
  ],
  "pipeDecoratorOrder": [
    "name",
    "pure"
  ],
  "injectableDecoratorOrder": [
    "providedIn",
    "deps"
  ],
  "moduleDecoratorOrder": [
    "imports",
    "declarations"
  ]
}

If you want to run the plugin only in some directories, configure angularOrganizePatterns:

{
  "plugins": ["prettier-plugin-organize-angular-decorators"],
  "componentDecoratorOrder": [
    "standalone",
    "selector",
    "templateUrl",
    "styleUrls",
    "changeDetection",
    "providers"
  ],
  "angularOrganizePatterns": [
    "./src/shared/**/*",
    "./src/modules/**/shared/**/*"
  ]
}

• componentDecoratorOrder – array that defines the desired order of properties in @Component decorators.
• directiveDecoratorOrder – array that defines the desired order of properties in @Directive decorators.
• pipeDecoratorOrder – array that defines the desired order of properties in @Pipe decorators.
• injectableDecoratorOrder – array that defines the desired order of properties in @Injectable decorators.
• moduleDecoratorOrder – array that defines the desired order of properties in @NgModule decorators.
• angularOrganizePatterns – optional list of glob patterns. The plugin only runs on files matching these patterns. If the array is empty the plugin runs for all files.

Use the special value $SPREAD$ inside an order array to specify where object spread elements (...) should appear in the resulting decorator.

npm test

The project uses GitHub Actions. Every pull request and push to main runs the test suite. Pushing a tag that starts with v triggers a publish workflow that builds the project and publishes the package to npm.