Angular Output/Input decorators are moved to new line
Problem
Prettier 1.14.0 Playground link [code block] Input: [code block] Output: [code block] Expected behavior: Decorators are kept on the same line. More details: When using Angular, it's recommended to follow their style guide, which specifies: > Placing the decorator on the same line usually makes for shorter code and still easily identifies the property as an input or output. Put it on the line above when doing so is clearly more readable. Angular classes are a valid (and common) use-case for Prettier, but with Prettier 1.14 (relevant PR) it deviates from the Angular style guide, causing unwanted changed for most people using Angular. Note that the above code example (input) is taken directly from the Angular style guide. The original PR to change this behavior mentions that mobx is the only library using same-line decorators, which is clearly not the case, with Angular being a (big) second one. To avoid reverting the new behavior completely, which is probably still wanted by some people - I suggest adding an option to the config to keep the old behavior, or prefer the new one (default should be discussed further).
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Add Prettier Configuration Option for Same-Line Decorators
Prettier 1.14.0 introduced a change that moves Angular decorators (such as @Input and @Output) to a new line, which deviates from the Angular style guide. This change affects the formatting of Angular components, making them less readable and not adhering to best practices.
Awaiting Verification
Be the first to verify this fix
- 1
Create a Prettier Configuration File
Create or update the .prettierrc configuration file in your project root to include a new option for same-line decorators.
json{ "sameLineDecorators": true } - 2
Modify Prettier Source Code (if necessary)
If the option does not exist in your version of Prettier, you may need to modify the Prettier source code to implement this feature. Look for the section that handles decorator formatting and add a conditional check for the new configuration option.
javascript// Example modification in Prettier source if (options.sameLineDecorators) { // Logic to keep decorators on the same line } - 3
Install a Compatible Version of Prettier
If your current version of Prettier does not support the new configuration option, consider downgrading to a version prior to 1.14.0 or upgrading to a version that includes the option.
bashnpm install prettier@1.13.0 - 4
Run Prettier on Your Codebase
After configuring Prettier, run it on your Angular codebase to apply the new formatting rules. This will ensure that decorators are formatted according to the specified configuration.
bashnpx prettier --write "src/**/*.ts" - 5
Review Changes and Validate
Check the formatted files to ensure that the decorators are now on the same line as per the Angular style guide. Make any necessary adjustments to the configuration if the behavior is not as expected.
bashgit diff
Validation
Confirm that the decorators are now formatted on the same line as their respective properties in the Angular components. Review the output of the Prettier run to ensure compliance with the Angular style guide.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep