What is JavaScript formatting and why use a formatter?

JavaScript formatting (beautification) reformats minified or inconsistently styled JS code into readable, properly indented source code. It restores whitespace, newlines, and consistent quote style that minification removes. A formatter makes code readable for debugging, code review, and learning from third-party libraries. For development teams, formatters enforce consistent style automatically — eliminating style debates and keeping diffs clean.

What is Prettier and how does it differ from ESLint?

Prettier is an opinionated code formatter — it rewrites your code's whitespace, indentation, and line length, but does not check for logic errors. ESLint is a linter — it checks for code quality issues (unused variables, missing semicolons, potential bugs) but in its default configuration does not reformat code. Most teams use both: Prettier handles formatting automatically, ESLint catches bugs. eslint-config-prettier disables ESLint's formatting rules to avoid conflicts.

Does JS formatting change what the code does?

No — formatting only changes whitespace, which JavaScript ignores when parsing. However, there are edge cases: automatic semicolon insertion (ASI) can cause bugs if you intentionally write without semicolons in certain patterns (e.g. a function expression starting with ( on a new line). A formatter that adds semicolons actually improves safety. Also, minification may change variable names (mangling) which formatting cannot reverse — only the original source can.

How do I auto-format JavaScript on save in VS Code?

Add to your VS Code settings.json: { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }. Install the Prettier extension from the VS Code marketplace. Create a .prettierrc file in your project root to configure options: { "singleQuote": true, "semi": false, "tabWidth": 2 }. For team projects, commit .prettierrc and .editorconfig to enforce the same style for all contributors.

JavaScript ফরম্যাটার

কনফিগারেশন

ইনডেন্টেশন
মিনিফাই
ফাঁকা স্থান ও মন্তব্য সরান
বন্ধ

ইনপুট JavaScript

Loading editor...

আউটপুট JavaScript

Loading editor...

প্রযুক্তিগত বিবরণ

JavaScript ফরম্যাটার কীভাবে কাজ করে

টুলটি কী করে

JavaScript ফরম্যাটার JavaScript কোডকে সুন্দরভাবে সাজায় (beautify) এবং ইন্ডেন্ট করে, ফলে এটি আরও পাঠযোগ্য ও রক্ষণাবেক্ষণ করা সহজ হয়। এই টুলটি সঠিক ইন্ডেন্টেশন, লাইন ব্রেক এবং একরূপ স্পেসিং যোগ করে JavaScript ফরম্যাট করে। যখন আপনাকে format javascript online করতে হয়, এই টুলটি JavaScript কোড পার্স করে এবং একরূপ ফরম্যাটিংসহ পুনর্গঠন করে। টুলটি বিভিন্ন ইন্ডেন্টেশন অপশন (২ স্পেস, ৪ স্পেস, ট্যাব) সাপোর্ট করে এবং অপ্রয়োজনীয় হোয়াইটস্পেস সরিয়ে JavaScript মিনিফাইও করতে পারে। javascript formatter ডেভেলপারদের এলোমেলো কোড পরিষ্কার করতে, কোডের পাঠযোগ্যতা বাড়াতে, এবং প্রোডাকশনের জন্য JavaScript প্রস্তুত করতে সাহায্য করে। টুলটি JavaScript-এর কাঠামো ও কার্যকারিতা বজায় রেখে এটিকে আরও রক্ষণাবেক্ষণযোগ্য করে তোলে।

ডেভেলপারদের সাধারণ ব্যবহারক্ষেত্র

ডেভেলপাররা মিনিফাইড সোর্স, API, বা লিগ্যাসি কোডবেস থেকে কোড পরিষ্কার করার সময় JavaScript ফরম্যাটার ব্যবহার করেন। প্রজেক্টজুড়ে JavaScript ফরম্যাটিং স্ট্যান্ডার্ডাইজ করা, কোড রিভিউ সহজ করা, এবং কোডের রক্ষণাবেক্ষণযোগ্যতা বাড়ানোর জন্য এই টুলটি মূল্যবান। অনেক ডেভেলপার এমন টুল বা ফ্রেমওয়ার্ক-জেনারেটেড কোড নিয়ে কাজ করার সময় JavaScript ফরম্যাটার ব্যবহার করেন যা আনফরম্যাটেড আউটপুট দেয়। JavaScript স্ট্রাকচার ডিবাগ করার সময়ও এটি সাহায্য করে, কারণ সঠিকভাবে ফরম্যাট করা কোড পড়া ও বোঝা সহজ। ডকুমেন্টেশনের জন্য কোড প্রস্তুত করা বা বিভিন্ন JavaScript ফরম্যাটের মধ্যে রূপান্তরের সময়ও JavaScript ফরম্যাটার উপকারী। ডেটাবেস বা API থেকে আসা JavaScript নিয়ে কাজ করার সময়, ফরম্যাটার কোড পরিষ্কার ও স্ট্যান্ডার্ডাইজ করা সহজ করে।

ডেটা ফরম্যাট, টাইপ বা ভ্যারিয়েন্ট

এই JavaScript ফরম্যাটারটি ফাংশন, অবজেক্ট, অ্যারে, ক্লাস এবং আধুনিক ES6+ ফিচারসহ স্ট্যান্ডার্ড JavaScript (ES5+) সিনট্যাক্স সমর্থন করে। টুলটি JavaScript স্টেটমেন্ট, এক্সপ্রেশন, কমেন্ট এবং সব স্ট্যান্ডার্ড JavaScript ফিচার হ্যান্ডেল করে। এটি বিভিন্ন ইন্ডেন্টেশন স্টাইল সমর্থন করে এবং প্রোডাকশন ব্যবহারের জন্য JavaScript মিনিফাই করতে পারে। ফরম্যাটারটি পাঠযোগ্যতা বাড়ানোর পাশাপাশি JavaScript-এর সেমান্টিক কাঠামো অক্ষুণ্ণ রাখে। উদাহরণস্বরূপ, এটি এমন JavaScript ফরম্যাট করবে:

function greet(name){return "Hello, "+name+"!";}const user={name:"John",age:30};

সঠিকভাবে ইন্ডেন্ট করা এবং ফরম্যাট করা JavaScript-এ:

function greet(name) {
        return "Hello, " + name + "!";
      }
      
      const user = {
        name: "John",
        age: 30
      };

সাধারণ ভুল ও এজ কেস

একটি সীমাবদ্ধতা হলো, ফরম্যাটারটি সব মূল ফরম্যাটিং পছন্দ সংরক্ষণ নাও করতে পারে—যেমন নির্দিষ্ট স্পেসিং বা লাইন ব্রেকের পছন্দ। জটিল এক্সপ্রেশন বা নেস্টেড স্ট্রাকচারযুক্ত JavaScript ফরম্যাট করার পর ম্যানুয়াল সমন্বয় লাগতে পারে। কিছু JavaScript মিনিফায়ার এমন হোয়াইটস্পেস সরিয়ে দিতে পারে যা কোডের পাঠযোগ্যতাকে প্রভাবিত করে। এমবেডেড HTML বা বিশেষ সিনট্যাক্সযুক্ত JavaScript-এর ক্ষেত্রে সর্বোত্তম ফলাফলের জন্য আলাদা ফরম্যাটিং টুল লাগতে পারে। ফরম্যাটারটি স্ট্যান্ডার্ড JavaScript সিনট্যাক্স হ্যান্ডেল করে, কিন্তু JSX বা TypeScript-এর মতো এজ কেস সঠিকভাবে ফরম্যাট নাও হতে পারে। বিশেষ ক্যারেক্টার বা এনকোডিং সমস্যাযুক্ত JavaScript সঠিকভাবে ফরম্যাট নাও হতে পারে।

কোডের বদলে কখন এই টুল ব্যবহার করবেন

দ্রুত ফরম্যাটিং কাজ, একবারের কোড ক্লিনআপ, বা আপনার ডেভেলপমেন্ট এনভায়রনমেন্টের বাইরে কাজ করার সময় এই JavaScript ফরম্যাটারটি ব্যবহার করুন। API থেকে আসা JavaScript, মিনিফাইড সোর্স, বা লিগ্যাসি কোড ফরম্যাট করার জন্য এটি আদর্শ। প্রোডাকশন ডেভেলপমেন্টের জন্য Prettier বা ESLint-এর auto-fix-এর মতো টুল ব্যবহার করে আপনার বিল্ড প্রক্রিয়ায় JavaScript ফরম্যাটিং ইন্টিগ্রেট করুন। ব্রাউজার টুল দ্রুত ফরম্যাটিং ও শেখার ক্ষেত্রে দারুণ, আর বিল্ড টুল অটোমেশন, সামঞ্জস্য এবং CI/CD পাইপলাইনের সাথে ইন্টিগ্রেশন দেয়।