Format, lint, and validate JavaScript and TypeScript code. Detects syntax errors, unused variables, missing semicolons, and more.
// Formatted output will appear here
Code formatting is not merely cosmetic — it is a fundamental practice that affects code readability, maintainability, collaboration, and the ability to identify bugs quickly. Consistent formatting across a codebase reduces cognitive load when reading unfamiliar code, makes diffs in version control more meaningful, and eliminates entire categories of debates in code reviews. In the JavaScript ecosystem, Prettier has become the dominant formatting standard, and this tool applies Prettier-compatible formatting rules to your code.
When multiple developers work on the same codebase, inconsistent formatting creates noisy git diffs where style changes are mixed with functional changes. This makes it difficult to understand what actually changed in a commit, slows down code review, and makes git blame less useful. By enforcing consistent formatting through automated tools, teams can focus their reviews entirely on logic and architecture rather than style preferences.
Syntax errors in JavaScript are caught immediately by the browser or Node.js runtime, but catching them before execution — in your editor or through a tool like this — saves time and prevents bugs from reaching production. Common JavaScript syntax errors include missing closing brackets or parentheses, incorrect use of const (attempting to reassign a constant), using await outside an async function, missing commas in object literals, and syntax differences between ES5, ES6+, and module syntax.
TypeScript adds static type checking on top of JavaScript, catching a whole class of errors at compile time that would otherwise only surface at runtime. Type errors — calling a method on undefined, passing the wrong type of argument to a function, accessing properties that don't exist on an object — are among the most common JavaScript bugs. TypeScript's type system makes these errors visible immediately in your editor, dramatically reducing debugging time and runtime errors in production.
For production use, integrate Prettier directly into your project with a .prettierrc configuration file. Key options include semi (add/remove semicolons), singleQuote (use single quotes), tabWidth (indentation size), trailingComma (add trailing commas), and printWidth (line length before wrapping). Add Prettier as a pre-commit hook with Husky and lint-staged to automatically format code before every commit, ensuring the repository always contains consistently formatted code.
ESLint and Prettier serve different but complementary purposes. Prettier handles all formatting decisions — indentation, quotes, semicolons, line breaks, bracket spacing. ESLint handles code quality rules — unused variables, missing return statements, accessibility violations, security issues, and enforcing coding patterns. The two tools are designed to work together: use eslint-config-prettier to disable ESLint rules that conflict with Prettier's formatting decisions.
Using var instead of const or let creates function-scoped variables that can lead to unexpected behaviour with closures and hoisting. Using == instead of === enables JavaScript's type coercion, producing surprising equality results. Modifying array or object parameters directly mutates the original data, causing hard-to-trace bugs in React and other frameworks that rely on immutability. Callback-heavy code ("callback hell") should be refactored to use Promises and async/await for readability and error handling.