JS Formatter: Beautify aur Minify Online

JS formatter se Prettier ke saath JavaScript, TypeScript aur JSX/TSX beautify ya minify karein.

Aapka code aapke browser mein Prettier aur Terser se locally format hota hai, aur kuch bhi server par upload nahi hota.

Banaya aur maintain kiya: Udit Agarwal

Styles bhi format karne hain? CSS Formatter try karein.

JS / TS Formatter ke baare mein

Yeh js formatter JavaScript, TypeScript aur JSX/TSX ko seedhe aapke browser mein beautify ya minify karta hai. Ek JavaScript beautifier ke roop mein yeh Prettier ko ek poore options panel ke saath chalata hai, jabki minifying production ke liye code chhota karne ke liye Terser use karta hai. Syntax apne aap detect karne ke liye Auto parser pick karein, ya jab aapko ek specific TypeScript formatter chahiye to JS/JSX ya TS/TSX force karein. Semicolons, quote style, tab width, print width aur trailing commas tune karein taaki aapke project ki style se match kare. Yeh un developers ke liye banaya gaya hai jo gande snippets saaf karte hain, bundled output inspect karne wale QA engineers, aur unke liye jo ek quick prettier online alternative chahte hain. Sab kuch aapke browser mein locally process hota hai, isliye aapka source code device se bahar nahi jaata aur kuch bhi server par upload nahi hota.

Features

  • JavaScript, TypeScript aur JSX/TSX ko Prettier se beautify karein
  • Production ke liye code chhota karne ke liye Terser se minify karein
  • Auto parser detection, saath hi explicit JS/JSX aur TS/TSX modes
  • Semicolons, single ya double quotes, aur tabs banaam spaces toggle karein
  • Configurable tab width (2 ya 4) aur print width (80, 100, 120)
  • Trailing commas chunein: none, es5 ya all
  • Koi bhi option adjust karte hi instant formatting
  • Poori tarah aapke browser mein chalta hai

JS / TS Formatter kaise use karein

  1. Apna JavaScript ya TypeScript input box mein paste karein.
  2. Pretty-print karne ke liye Beautify ya compress karne ke liye Minify chunein.
  3. Parser pick karein: Auto, JS / JSX ya TS / TSX.
  4. Tab width, quotes, semicolons aur trailing commas jaise options adjust karein.
  5. Result panel se formatted output copy karein.

Example

Input

const  greet=(name)=>{return 'hi '+name}

Output

const greet = (name) => {
  return 'hi ' + name;
};

Default Prettier options ke saath beautify (2-space indent, semicolons).

Common errors aur troubleshooting

  • Paste karne ke baad output khaali hai ya parse error dikhata hai. — Pakka karein ki snippet valid JavaScript ya TypeScript hai. Type annotations ke liye parser ko TS / TSX par switch karein, ya React syntax ke liye JS / JSX.
  • Auto mode TypeScript-specific syntax galat parse kar deta hai. — Auto pehle TypeScript parser try karta hai aur Babel par fall back hota hai; agar aapki file advanced type features use karti hai to TS / TSX explicitly force karein.
  • Minified output unreadable lagta hai. — Yeh expected hai. Terser production ke liye whitespace strip karta hai aur code chhota karta hai. Readable result chahiye to Beautify use karein.
  • Quotes ya semicolons jaisa aap chahte the waisa nahi hai. — Copy karne se pehle Single quotes aur Semicolons options toggle karein. Inhein badalte hi Prettier turant reformat karta hai.

Aksar pooche jaane wale sawaal

JS formatter kya hai aur kya kar sakta hai?
Yeh ek browser-based tool hai jo JavaScript, TypeScript aur JSX/TSX beautify ya minify karta hai. Beautifying Prettier ko poore style options ke saath chalata hai aur minifying production ke liye code compress karne ke liye Terser chalata hai.
JS formatter se TypeScript ya JSX kaise format karun?
Parser chunein: JS / JSX, TS / TSX ya Auto. Auto pehle TypeScript parser try karta hai aur Babel par fall back hota hai, isliye plain JavaScript, JSX aur TypeScript sab sahi format hote hain.
Kya JS formatter Prettier aur Terser use karta hai?
Haan. Beautifying Prettier use karta hai aur minifying Terser, isliye output un hi tools se match karta hai jo aap ek real build pipeline mein use karte.
JS formatter mein kaunse style options control kar sakta hoon?
Aap single banaam double quotes aur semicolons toggle kar sakte hain, tabs aur spaces ke beech switch kar sakte hain, tab width 2 ya 4 set kar sakte hain, 80, 100 ya 120 ka print width pick kar sakte hain, aur none, es5 ya all trailing commas chun sakte hain.
Kya JS formatter mera code kahin bhejta hai?
Nahi. Prettier aur Terser dono poori tarah aapke browser mein chalte hain, isliye aapka code kabhi device se bahar nahi jaata aur kuch bhi server par upload nahi hota.

Related tools

  • CSS / SCSS Formatter — CSS/SCSS/LESS beautify ya minify karein, properties sort karein aur duplicates hatayein.
  • HTML Formatter — HTML beautify ya minify karein, inline CSS/JS format karein aur result preview karein.
  • JSON Formatter — JSON ko beautify, minify aur validate karein, error ki location ke saath.
  • JSON se TypeScript — Ek JSON sample se TypeScript interfaces generate karein.
  • SQL Formatter — MySQL, PostgreSQL, SQL Server, SQLite, BigQuery aur Oracle ke liye SQL format karein.
  • GraphQL Formatter — GraphQL queries aur schemas format ya minify karein, syntax validate karein aur operations extract karein.
  • XML Formatter — XML ko beautify, minify aur validate karein, aur XML ↔ JSON convert karein.
  • cURL se Fetch — Ek curl command ko JavaScript fetch() call mein convert karein.

Code Formatters ke aur tools

  • HTML Formatter — HTML beautify ya minify karein, inline CSS/JS format karein aur result preview karein.
  • XML Formatter — XML ko beautify, minify aur validate karein, aur XML ↔ JSON convert karein.
  • SQL Formatter — MySQL, PostgreSQL, SQL Server, SQLite, BigQuery aur Oracle ke liye SQL format karein.
  • GraphQL Formatter — GraphQL queries aur schemas format ya minify karein, syntax validate karein aur operations extract karein.
  • Dockerfile Formatter — Ek Dockerfile format karein aur best-practice aur lint suggestions paayein.
  • MongoDB Query Formatter — MongoDB shell queries aur aggregation pipelines format karein.
  • Contrast Checker — Do colors ke beech WCAG contrast ratio aur AA/AAA pass hota hai ya nahi, check karein.
  • Mermaid Diagram Renderer — Mermaid diagrams (flow, sequence, gantt) ko aapke browser mein SVG mein render karein.
  • SVG Optimizer — SVG minify karein: comments, metadata aur editor cruft hatayein, aur whitespace collapse karein.
  • MongoDB Query Beautifier — MongoDB queries aur find() statements ko aapke browser mein beautify aur indent karein.
  • MongoDB Aggregation Beautifier — MongoDB aggregation pipelines ko aapke browser mein beautify aur indent karein.
  • MongoDB Explorer — MongoDB document ya collection sample explore karein aur uske field schema aur types ka anumaan lagayein.

Code Formatters ke sabhi tools dekhein (32) · Saare tools