JavaScript Formatter
Format and beautify JavaScript, TypeScript, JSX and TSX with configurable indentation, quotes, semicolons and code style directly in your browser.
Format JavaScript, TypeScript, JSX or TSX
Beautify source code with configurable indentation, quotes, semicolons, trailing commas and line width.
Choose the parser that matches the source code.
Influences when Prettier wraps long expressions and statements.
Language
JavaScript
Indentation
2 Spaces
Print Width
100
Quotes
Single Quotes
Semicolons
Enabled
Trailing Commas
All
Shortcut: Ctrl/Cmd + Enter to format
Code Overview
Lightweight indicators calculated from the source without executing the code.
Functions
—
Arrow Functions
—
Classes
—
Nesting Depth
—
Module & Async Usage
Imports
—
Exports
—
Async
—
Await
—
Console Calls
—
Control Flow Statistics
Return
—
If
—
For
—
While
—
Switch
—
Try
—
Comments
—
Maximum Brace Depth
—
Source Size
Input
0
Lines
0
Characters
0
Bytes
Output
0
Lines
0
Characters
0
Bytes
JavaScript, TypeScript, JSX & TSX
JavaScript
Standard JavaScript source for browsers, Node.js and other runtimes.
TypeScript
JavaScript extended with static type syntax.
JSX
JavaScript containing XML-like component markup commonly used with React.
TSX
TypeScript containing JSX component syntax.
JavaScript Formatting Example
Compact
const users=[{id:1,name:'Ada'},{id:2,name:'Linus'}];const active=users.filter(user=>user.id>0);console.log(active);
Formatted
const users = [
{ id: 1, name: 'Ada' },
{ id: 2, name: 'Linus' },
];
const active = users.filter((user) => user.id > 0);
console.log(active);
Async / Await Example
async function loadUsers() {
const response = await fetch('/api/users');
if (!response.ok) {
throw new Error('Unable to load users');
}
return response.json();
}
Formatting Is Different from Linting
Prettier focuses primarily on code presentation: indentation, line wrapping, quotation style, semicolons and similar formatting choices.
A linter such as ESLint can additionally detect configurable correctness, maintainability and coding-pattern issues.
Formatting Does Not Perform TypeScript Type Checking
TypeScript code can be syntactically formatted without proving that its types are correct.
Type checking is performed by the TypeScript compiler or compatible tooling, not by Prettier.
Source Code Is Not Executed
The formatter passes source text to Prettier for parsing and formatting. It does not intentionally execute the pasted JavaScript or TypeScript.
This makes the tool useful for inspecting unfamiliar snippets without running them as application code.
Choose the Correct Language
TypeScript and JSX introduce syntax that ordinary JavaScript does not always accept through the same parser.
Select JavaScript, TypeScript, JSX or TSX according to the source you are formatting.
Private Browser-Based Code Formatting
JavaScript, TypeScript, JSX and TSX formatting happens directly inside your browser during normal interactive use.
- No source-file upload is required.
- Source code does not need to be sent to SwiftVecto's server.
- Formatting uses Prettier locally.
- Code statistics are calculated locally from the source.
- The JavaScript formatter module itself is lazy-loaded only when this tool is opened.
Continue with These Tools
Finished using JavaScript Formatter? Here are some related tools that people commonly use next to complete their workflow faster.
HTML Formatter
Format and beautify HTML with configurable indentation, print width and structured document statistics directly in your browser.
CSS Formatter
Format and beautify CSS, SCSS and Less with configurable indentation, print width and quote style directly in your browser.
JSON Formatter & Validator
Format, beautify, minify and validate JSON online instantly. Detect invalid JSON, organise nested data and create clean, readable JSON directly in your browser.
Laravel Blade Formatter
Format and beautify Laravel Blade templates with support for Blade directives, components, echo expressions and HTML directly in your browser.
Regex Tester
Test JavaScript regular expressions online with live match highlighting, capturing groups, named groups, flags and replacement previews directly in your browser.
How to Format JavaScript, TypeScript, JSX and TSX
Use the SwiftVecto JavaScript Formatter to turn compact or inconsistently styled JavaScript, TypeScript, JSX and TSX into clean, readable code. Choose the language and formatting preferences, then copy the result directly from your browser.
Overview
JavaScript is one of the core programming languages of the web, while TypeScript extends JavaScript with static type syntax. JSX and TSX add XML-like component syntax commonly used with React and similar frontend frameworks. As code grows, inconsistent indentation, quotation styles, semicolon usage, long expressions and deeply nested callbacks can make source files difficult to read. The SwiftVecto JavaScript Formatter uses Prettier directly in the browser so formatting is based on a real language parser rather than regular-expression replacements. The tool supports JavaScript, TypeScript, JSX and TSX and can normalize indentation, quote style, semicolons, trailing commas, bracket spacing, arrow-function parentheses and line wrapping.
Benefits
How It Works
Paste or type source code into the input editor.
Choose JavaScript, TypeScript, JSX or TSX.
Choose the preferred indentation style.
Choose the preferred print width.
Choose single or double quotes.
Choose whether semicolons should be emitted.
Choose trailing comma behaviour.
Choose bracket-spacing and arrow-parenthesis preferences.
Run the formatter.
The browser passes the source to Prettier using the parser for the selected language.
Prettier parses the source before generating consistently formatted output.
Lightweight source statistics are calculated separately.
The resulting code can be copied directly.
How to Use This Tool
-
1Paste JavaScript, TypeScript, JSX or TSX into the input area.
-
2Choose the language that matches the source.
-
3Choose two spaces, four spaces or tabs.
-
4Set the preferred print width.
-
5Choose the quote style.
-
6Choose whether semicolons should be used.
-
7Choose the trailing-comma preference.
-
8Run Format Code.
-
9Review the resulting source code.
-
10Inspect code statistics if useful.
-
11Copy the formatted output.
-
12Use Load Sample to test the formatter quickly.
-
13Use Clear before starting another source file.
Helpful Tips
- Choose JavaScript for ordinary .js files.
- Choose TypeScript for .ts files containing TypeScript syntax.
- Choose JSX for JavaScript containing JSX markup.
- Choose TSX for TypeScript containing JSX markup.
- Formatting changes code presentation rather than intended behaviour.
- A formatter is not a complete JavaScript or TypeScript validator.
- Prettier may reject syntactically invalid code.
- Use the correct parser when JSX or TypeScript syntax is present.
- A smaller print width produces more line wrapping.
- A larger print width keeps more expressions on one line.
- Semicolon preferences should match the conventions used by the project.
- Trailing commas can make multi-line diffs cleaner in version control.
- Formatting does not run or execute pasted JavaScript.
- Formatting does not test runtime behaviour.
- Formatting does not detect all logical bugs.
- Formatting does not replace ESLint or TypeScript type checking.
- Do not paste secrets, API keys or credentials into code unnecessarily.
- Review production code before replacing an existing source file.
Common Uses
Format compressed JavaScript.
Beautify a JavaScript function copied from a minified-looking snippet.
Format TypeScript interfaces.
Format React JSX components.
Format React TSX components.
Format async functions.
Format Promise chains.
Format object literals.
Format array operations.
Format imports and exports.
Format JavaScript copied from browser developer tools.
Format frontend utility functions.
Normalize quotation style across code.
Normalize semicolon usage.
Worked Examples
The following examples demonstrate how this tool can be used in realistic scenarios.
Formatting a Function
The compact source function add(a,b){return a+b} can be reformatted with consistent spacing, indentation and semicolon behaviour.
Formatting an Arrow Function
Arrow functions with long parameter lists or nested expressions can be wrapped according to the selected print width.
Formatting an Object
A compact object literal containing nested properties and arrays can be expanded into a readable structure.
Formatting JSX
React component markup can be formatted alongside JavaScript expressions when JSX is selected.
Formatting TypeScript
Type annotations, interfaces, generics and typed functions can be formatted when the TypeScript parser is selected.
Formatting Async Code
Async functions containing multiple await expressions can be reformatted into a consistent control-flow layout.
Common Mistakes
Avoid these common mistakes to achieve the most accurate results.
- Using the JavaScript parser for TypeScript-only syntax.
- Using the JavaScript parser for JSX.
- Using the TypeScript parser for TSX source containing JSX when TSX should be selected.
- Assuming formatted code is automatically correct code.
- Expecting the formatter to detect logical bugs.
- Expecting the formatter to run unit tests.
- Expecting the formatter to perform TypeScript type checking.
- Confusing formatting with linting.
- Confusing formatting with minification.
- Confusing formatting with transpilation.
- Assuming semicolon removal is safe in every manually edited context without understanding JavaScript automatic semicolon insertion.
- Changing production code after formatting without reviewing it.
- Expecting Prettier to preserve every original line break.
- Expecting formatting to improve runtime performance.
- Pasting secrets or private credentials into source unnecessarily.
Glossary
Definitions of the most important terms used by this tool.
JavaScript
A programming language widely used for web browsers, servers and application development.
TypeScript
A language that extends JavaScript with static type syntax and related development features.
JSX
A JavaScript syntax extension that allows XML-like component markup inside JavaScript source.
TSX
TypeScript source that also contains JSX-style component markup.
ECMAScript
The standardized specification on which modern JavaScript implementations are based.
Arrow Function
A concise JavaScript function syntax using the => operator.
Async Function
A function declared with async that can use await to work with asynchronous operations.
Import
An ECMAScript module statement used to bring exported values from another module into the current file.
Export
An ECMAScript module statement used to expose values for use by other modules.
Semicolon
A statement terminator commonly used in JavaScript and TypeScript source code.
Trailing Comma
A comma placed after the final item in a multiline array, object, parameter list or similar structure where supported.
Bracket Spacing
The formatting preference controlling spaces inside object literal braces, such as { value } versus {value}.
Print Width
A formatter preference describing the approximate line length at which Prettier may wrap expressions.
Parser
Software that reads source-code syntax and converts it into a structured representation that a formatter can understand.
Formatter
A tool that rewrites source code using consistent presentation rules without intentionally changing its behaviour.
Linter
A tool that analyzes source code for stylistic, correctness and maintainability problems according to configurable rules.
Prettier
An opinionated code formatter supporting JavaScript, TypeScript, JSX, TSX and many other languages.
Frequently Asked Questions
What is a JavaScript formatter?
A JavaScript formatter parses source code and rewrites it using consistent indentation, whitespace, line wrapping and style rules.
Can this tool format TypeScript?
Yes. Select TypeScript when the source contains TypeScript-specific syntax.
Can this tool format JSX?
Yes. Select JSX for JavaScript containing JSX component markup.
Can this tool format TSX?
Yes. Select TSX for TypeScript source that also contains JSX markup.
Does formatting change what JavaScript does?
Formatting is intended to change source presentation rather than program behaviour. Important code should still be reviewed after formatting.
Does this tool execute my JavaScript?
No. The formatter parses and reformats source text without intentionally executing the pasted program.
Does this tool validate JavaScript?
Prettier may reject syntactically malformed source, but the tool is primarily a formatter rather than a complete validator or static analyzer.
Does this replace ESLint?
No. Prettier focuses primarily on formatting, while ESLint can analyze JavaScript for configurable code-quality and correctness rules.
Does this replace TypeScript type checking?
No. Formatting does not perform the same type analysis as the TypeScript compiler.
Can the formatter add semicolons?
Yes. Semicolon output can be enabled as a formatting preference.
Can the formatter remove semicolons?
Yes. Prettier supports a no-semicolon style while still adding semicolons where required to avoid problematic JavaScript parsing.
Can I choose single quotes?
Yes. The formatter can prefer single quotes where Prettier considers that representation appropriate.
Can I choose double quotes?
Yes. Double quotes can remain the preferred style.
What does trailing comma mean?
A trailing comma is a comma after the final item in certain multiline structures. It can improve source-control diffs when additional items are later added.
What print width should I use?
Around 80 to 120 characters is common. Print width is a formatting preference rather than a strict maximum line length.
Should JavaScript use tabs or spaces?
Either can work. Consistency with the surrounding project is generally more important than the specific indentation style.
Can formatting fix JavaScript bugs?
No. Formatting can make bugs easier to inspect, but it does not intentionally repair application logic.
Can formatting make JavaScript faster?
No meaningful runtime performance improvement normally comes from pretty formatting. Bundling, minification and application design are separate concerns.
Can I format a React component?
Yes. Select JSX or TSX depending on whether the component uses JavaScript or TypeScript.
Does SwiftVecto upload my source code?
The interactive JavaScript Formatter is designed to perform normal formatting directly inside your browser.
Is the JavaScript Formatter free?
Yes. SwiftVecto provides this developer utility for formatting JavaScript, TypeScript, JSX and TSX.
Things to Know
- The browser implementation uses the installed Prettier package.
- JavaScript, TypeScript, JSX and TSX require appropriate Prettier parsers.
- The selected language should match the source syntax.
- Formatting is browser-first and does not require a server request.
- The JavaScript tool module should export init() so SwiftVecto can lazy-load it only when required.
- The tool is a formatter rather than a complete JavaScript validator.
- The tool does not execute pasted source as part of normal formatting.
- Print width is a formatting preference rather than a strict maximum.
- Code statistics are lightweight lexical indicators and are separate from the Prettier parser.
Disclaimer
Successful formatting does not guarantee that code is logically correct.
Formatting does not replace testing, linting, static analysis or TypeScript type checking.
Formatting does not guarantee browser or runtime compatibility.
Prettier may normalize presentation differently from the original source.
Users should review important production code after formatting.
Official References
The following official resources were used when developing this tool and are useful for further reading.