Code Beautifier Guide: Format JavaScript, HTML, CSS, and More
Master code formatting and beautification for JavaScript, HTML, CSS, JSON, XML, and other languages. Learn best practices, tools, and automation techniques for clean, readable code.
Code Beautification: Essential for Professional Development
Code beautification (or code formatting) is the process of automatically formatting source code to make it more readable and maintainable. Well-formatted code is easier to understand, debug, and collaborate on, making beautification an essential practice in modern software development. This comprehensive guide covers code beautification for JavaScript, HTML, CSS, JSON, XML, and other languages, along with tools, best practices, and automation techniques.
Why Beautify Code?- Readability: Easier to scan and understand - Consistency: Uniform style across team - Maintainability: Simpler to modify and debug - Collaboration: Reduces merge conflicts - Professionalism: Shows attention to detail
JavaScript Beautification
Formatting JavaScript for maximum readability and consistency.
JavaScript Formatting Basics
Key Formatting Rules:
Indentation:
- Use 2 or 4 spaces (consistent throughout)
- Never mix tabs and spaces
- Indent nested blocks
Semicolons:
- Use semicolons (ASI can be problematic)
- Place at end of statements
Spacing:
- Space after keywords (`if`, `for`, `while`)
- Space around operators (`+`, `=`, `===`)
- No space before function parentheses for calls
- Space before opening brace
Line Length:
- Maximum 80-120 characters
- Break long lines logically
Quotes:
- Consistent single or double quotes
- Prefer template literals for interpolation
JavaScript Beautifier Tools
Prettier (Recommended):
Opinionated code formatter with minimal configuration.
ESLint with Prettier:
Combines linting and formatting.
Manual Beautification:
Online Tools:
- js-beautify
- Prettier Playground
- JSFiddle formatter
- CodePen formatter
Advanced JavaScript Formatting
Arrow Functions:
Destructuring:
Async/Await:
Chaining:
HTML Beautification
Formatting HTML for clean, semantic markup.
HTML Formatting Basics
Key Formatting Rules:
Indentation:
- 2 or 4 spaces per level
- Indent child elements
- Block elements on new lines
- Inline elements can stay inline
Attributes:
- Quote all attribute values
- One attribute per line for many attributes
- Consistent quote style
Self-Closing Tags:
- Optional in HTML5 (`
` or `
`) - Consistent style throughout Comments: - Use for sections and complex structures - Remove before production
` or `
`) - Consistent style throughout Comments: - Use for sections and complex structures - Remove before production
HTML Beautifier Tools
Prettier for HTML:
html-beautify:
Manual HTML Formatting:
Best Practices:
- Semantic HTML5 elements
- Proper nesting
- Accessibility attributes
- Valid markup
Advanced HTML Formatting
Template Syntax:
SVG Formatting:
Meta Tags:
CSS Beautification
Formatting CSS for maintainable stylesheets.
CSS Formatting Basics
Key Formatting Rules:
Property Order:
- Position properties first
- Display and box model
- Typography
- Visual effects
- Animations
Spacing:
- Space after selector
- Space after colon
- Semicolon after each property
- Blank line between rule sets
Nesting (SCSS/Less):
- Maximum 3-4 levels deep
- Logical grouping
Comments:
- Section headers
- Complex calculations
- Browser hacks
CSS Beautifier Tools
Prettier for CSS:
Stylelint:
csscomb:
Manual CSS Formatting:
CSS Formatting Methodologies
BEM (Block Element Modifier):
SMACSS (Scalable and Modular Architecture):
CSS-in-JS:
JSON Beautification
Formatting JSON for readability.
JSON Formatting
Key Rules:
- Proper indentation (2 or 4 spaces)
- Trailing commas not allowed
- Double quotes for keys and strings
- No comments (not part of JSON spec)
Pretty Print in Code:
Minification:
Other Language Beautifiers
Formatting tools for various languages.
XML Beautification
XML Formatting:
Tools:
- xmllint
- Prettier (with plugin)
- xml-formatter
Python Beautification
Python Formatters:
Black (Opinionated):
autopep8 (PEP 8):
YAPF (Google):
SQL Beautification
SQL Formatting:
Tools:
- sql-formatter
- pg_format (PostgreSQL)
- SQLFormat.org
Markdown Beautification
Markdown Formatting:
Tools:
- Prettier
- markdownlint
- remark
Automating Code Formatting
Set up automatic code formatting in your workflow.
Pre-commit Hooks
Husky + lint-staged:
Configuration:
Benefits:
- Automatic formatting before commit
- Consistent code style
- Catch errors early
- No manual formatting needed
Editor Integration
VS Code:
WebStorm/IntelliJ:
- Settings → Code Style
- Enable "Reformat on save"
- Configure per language
Sublime Text:
- Install Prettier plugin
- Configure keybindings
Vim:
CI/CD Integration
GitHub Actions:
GitLab CI:
Benefits:
- Enforce formatting in pipeline
- Automatic PR comments
- Block unformatted code
- Consistent across contributors
Code Formatting Best Practices
Team Standards:
1. Document Style Guide:
- Create team style guide
- Include examples
- Explain rationale
- Keep updated
2. Use Configuration Files:
- `.prettierrc`
- `.eslintrc`
- `.editorconfig`
- Check into version control
3. Automate Everything:
- Editor formatting on save
- Pre-commit hooks
- CI/CD checks
- Automated fixes where possible
4. Consistency Over Preference:
- Agree on one style
- Use tools to enforce
- Don't argue about tabs vs spaces
- Let tools decide
5. Gradual Adoption:
- Format new files immediately
- Refactor old files gradually
- Use `.prettierignore` for legacy code
- Migrate incrementally
General Principles:
Readability:
- Code is read more than written
- Optimize for comprehension
- Use whitespace effectively
- Break up long lines
Consistency:
- Same style throughout codebase
- Automated enforcement
- Reduces cognitive load
- Easier collaboration
Maintainability:
- Clear structure
- Logical organization
- Easy to modify
- Self-documenting
Performance:
- Minify for production
- Keep source readable
- Separate concerns
- Use build tools
Common Configurations:
JavaScript/TypeScript:
- 2-space indentation
- Single quotes
- Trailing commas
- Semicolons
- 80-100 char line length
HTML:
- 2-space indentation
- Lowercase tags
- Quoted attributes
- Semantic elements
CSS:
- 2-space indentation
- Alphabetical or logical property order
- Lowercase selectors
- Hex colors in lowercase
JSON:
- 2-space indentation
- Double quotes
- No trailing commas
- Valid JSON format
Code Minification
Minification for production deployment.
Why Minify?
Benefits:
- Reduced file size (50-90% smaller)
- Faster download times
- Lower bandwidth costs
- Improved page load speed
- Better performance
What Gets Removed:
- Whitespace and indentation
- Comments
- Line breaks
- Unnecessary characters
- Variable name shortening (mangling)
Trade-offs:
- Harder to debug (use source maps)
- Not human-readable
- Build step required
JavaScript Minification
Terser (Modern):
UglifyJS (Legacy):
Webpack:
Source Maps:
CSS Minification
cssnano:
clean-css:
PostCSS:
HTML Minification
html-minifier:
Minification Options:
- Remove comments
- Collapse whitespace
- Remove optional tags
- Minify inline CSS/JS
- Remove redundant attributes
Troubleshooting
Common Issues:
1. Formatting Conflicts:
Problem: Prettier and ESLint fight
Solution: Use eslint-config-prettier to disable conflicting rules
2. Large Files:
Problem: Slow formatting
Solution: Use `.prettierignore`, split files
3. Legacy Code:
Problem: Formatting breaks functionality
Solution: Format gradually, test thoroughly
4. Team Adoption:
Problem: Team resistance to formatter
Solution: Demo benefits, automate, enforce gradually
5. Merge Conflicts:
Problem: Reformatting causes conflicts
Solution: Format entire codebase once, then maintain
6. Editor Issues:
Problem: Format on save not working
Solution: Check editor settings, restart, verify extensions
7. CI Failures:
Problem: Local passes, CI fails
Solution: Ensure same version of tools, check config files
8. Performance:
Problem: Slow editor with formatter
Solution: Exclude node_modules, limit file size, update tools
Tools Comparison
JavaScript:
| Tool | Type | Opinionated | Configurable | Speed |
|------|------|-------------|--------------|-------|
| Prettier | Formatter | Yes | Minimal | Fast |
| ESLint | Linter + Formatter | No | Highly | Medium |
| StandardJS | Linter + Formatter | Yes | No | Fast |
| Beautify | Formatter | No | Highly | Medium |
CSS:
| Tool | Type | Features | Configuration |
|------|------|----------|---------------|
| Prettier | Formatter | Basic | Minimal |
| Stylelint | Linter + Formatter | Extensive | Flexible |
| csscomb | Formatter | Property ordering | Detailed |
| cssnano | Minifier | Optimization | Moderate |
HTML:
| Tool | Purpose | Speed | Features |
|------|---------|-------|----------|
| Prettier | Format | Fast | Modern |
| Beautify | Format | Fast | Configurable |
| HTMLHint | Lint | Fast | Error detection |
| html-minifier | Minify | Fast | Production ready |
Recommendations:
For Most Projects:
- Prettier + ESLint (JavaScript)
- Prettier (HTML/CSS)
- Husky + lint-staged (automation)
For Large Teams:
- Add Stylelint for CSS
- Use strict configurations
- Enforce via CI/CD
For Solo Projects:
- Prettier alone is sufficient
- Format on save
- Keep it simple