لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

منسق شيفرة تايب سكريبت

مطور

إعلان · يزيل؟

مدخل

عملية تلقائية

انتاج

جانب العميل

إعلان · يزيل؟

مرشد

منسق شيفرة تايب سكريبت

TypeScript projects live and die by consistent formatting. Whether your team uses semicolons or skips them, prefers single quotes or double, two-space or four-space indentation — the formatter needs to apply those rules consistently across every file. This tool formats your TypeScript code client-side with configurable style options, so you can match your project’s conventions without installing anything.

Paste your .ts or .tsx code, choose your style preferences, and get formatted output instantly. Everything runs in your browser — no code is uploaded or stored.

كيف تستعمل

Paste your TypeScript code into the input area or try the built-in example. Configure your preferred style: indentation type and width, semicolons, quote style, trailing commas, and print width. The formatted output appears with your chosen conventions applied. Copy the result or download it as a .ts file.

إعلان · يزيل؟

سمات

Configurable Indentation – Choose 2 spaces, 4 spaces, or tabs to match your project style
Semicolon Control – Add or remove semicolons based on your team’s preference
نمط الاقتباس – Normalize to single or double quotes across all string literals
Trailing Comma Options – None, ES5-compatible, or all trailing commas
Print Width – Set line width to 80, 100, or 120 characters
فرز الاستيراد – Automatically alphabetize and organize import statements
Type Annotation Formatting – Consistent spacing around colons, generics, and type parameters
التحقق من بناء الجملة – Detects common errors with line number reporting
Context-Aware Parsing – Respects strings, comments, and template literals when formatting
من جانب العميل فقط – Your code never leaves your browser

متى تستخدم هذه الأداة

Use it when you need to quickly reformat TypeScript snippets before pasting into documentation, clean up code from tutorials or Stack Overflow, normalize formatting before code reviews, or apply consistent style to code that wasn’t written with your project’s conventions. It’s also handy for converting between style preferences — switching from semicolons to no-semicolons, or single quotes to double.

 التعليمات

What is the difference between TypeScript and JavaScript formatting?

TypeScript extends JavaScript with type annotations, interfaces, generics, enums, and other type-system features. A TypeScript formatter needs to handle all standard JavaScript formatting plus type-specific syntax like colons in type annotations (const x: string), angle brackets in generics (Array), interface and type alias declarations, and enum formatting. Standard JavaScript formatters may break or ignore these TypeScript-specific constructs.
Should TypeScript projects use semicolons or not?

Both approaches are valid and widely used. TypeScript (like JavaScript) has automatic semicolon insertion (ASI) that adds semicolons at parse time, so omitting them works in most cases. Teams that skip semicolons cite cleaner code and fewer keystrokes. Teams that include them cite explicitness and avoiding rare ASI edge cases. The key is consistency — pick one style and enforce it across the entire project. Most major style guides (Airbnb, Google) include semicolons, while StandardJS omits them.
Why does import order matter in TypeScript?

Consistent import ordering improves code readability and reduces merge conflicts. When imports are sorted alphabetically and grouped logically (third-party packages first, then internal modules), developers can quickly find specific imports and avoid duplicates. Unordered imports also cause unnecessary git diffs — two developers adding imports in different positions creates a merge conflict even though the actual code change is identical.
What are trailing commas and why use them in TypeScript?

Trailing commas are commas placed after the last element in arrays, objects, function parameters, and type parameters. Using trailing commas produces cleaner git diffs because adding a new item only changes one line instead of two (the new line plus adding a comma to the previous last line). They also make reordering items easier. ES5 allows trailing commas in arrays and objects; ES2017 and TypeScript allow them in function parameters as well.
What print width should TypeScript projects use?

The most common choices are 80, 100, and 120 characters. 80 characters is the traditional standard, originating from terminal width limitations, and remains the default in Prettier. 100 characters is a popular modern compromise that accommodates TypeScript's verbose type annotations without excessive wrapping. 120 characters works well on wide monitors but can hurt readability on smaller screens or in side-by-side diff views. Choose based on your team's typical screen setup and code review workflow.