Choosing the Ideal Line Length: 100‑Char Width for Cleaner Angular Code

Introduction

The author set out to discuss code formatting and soon realized it is an art, especially for front‑end single‑page applications. Code quality involves both logic and visual form; good formatting improves readability and inspection, though no universal standard exists, so the article shares personal recommendations.

Line Length Debate

While PEP8 and Prettier default to 80 characters per line, the author finds this limit too restrictive for Angular/TypeScript code because of brackets, long class or interface names, and chained calls. Screenshots compare an 80‑character formatted snippet with a 100‑character version, showing fewer line breaks and better visual continuity. The author concludes that among common widths (80, 100, 120), 100 characters offers the best compromise.

Template Formatting

HTML template formatting greatly influences code clarity. The default Prettier style places closing brackets on separate lines and puts each attribute on its own line, producing a loose layout. The author prefers a compact style where attributes align and tags remain clear, illustrated by a screenshot of the preferred output.

To achieve this in VS Code, use the built‑in HTML formatter and set the Wrap Attributes option to preserve-aligned, which keeps multiple attributes on one line while aligning them. Prettier currently cannot replicate this behavior.

Attribute Ordering and Recommendations

Although optional, a consistent attribute order aids readability, similar to CSS property ordering. The author follows a five‑category order: Positioning, Box model, Typographic, Visual, Misc.

For Angular templates, the suggested order (based on the Code Guide) is: template reference variables, class, structural directives, attribute directives, two‑way binding, property binding, and event binding.

Keep five or fewer attributes on a single line without forced line breaks.

Group related attributes together, e.g., ngModel, name, label, value.

Align element tags (except for single‑line elements).

Break long interpolation expressions onto multiple lines.

Place type -related attributes first.

Function Formatting

Templates resemble functions; long parameter lists cause similar line‑break problems. The author wishes Prettier supported a preserve-aligned mode for function parameters, but VS Code lacks this capability. Google’s clang-format is suggested, though the author found its results unsatisfactory.

Conclusion

Code beautification does not change program logic, but well‑formatted code can speed development and improve overall quality. The author invites readers to share their own formatting suggestions.