JavaScript formatting applies consistent indentation, spacing, and line breaks to source code. The logic of the code does not change; only its appearance does. Formatted code is significantly easier to read, review, and debug than code with inconsistent or missing formatting.
JavaScript Formatting Conventions
Most JavaScript teams use Prettier for automatic formatting. Prettier has few configuration options by design: it makes choices for you and applies them consistently. The resulting code may not match your personal preference in every detail, but it is consistent across the entire codebase, which is more valuable than any individual style choice.
Common conventions include two or four spaces of indentation (two is Prettier's default), single or double quotes for strings (Prettier defaults to double), semicolons at statement ends (Prettier includes them by default), trailing commas in multi-line structures (Prettier adds them in es5 mode), and lines wrapped at 80 or 100 characters.
When Manual Formatting Is Needed
You need to format JavaScript manually (or use a tool) when you receive minified or obfuscated code and need to read it, when a third-party library does not include readable source, when reviewing auto-generated code, or when teaching and demonstrating code.
Using the DevHexLab JS Formatter
Open the tool at /tools/javascript/js-formatter. Paste the JavaScript. The tool applies Prettier-compatible formatting and shows the result. Copy the formatted code. This is useful for reading minified code from external sources and for one-off formatting tasks.
Frequently Asked Questions
What is the difference between formatting and linting?
Formatting changes only whitespace and style (no functional change). Linting checks for potential bugs, anti-patterns, and style violations and reports them as warnings or errors. ESLint is the standard JavaScript linter; Prettier is the standard formatter. Run both.
Format once and maintain consistently.