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 ให้สวยงาม ทำให้อ่านง่ายและดูแลรักษาง่ายขึ้น เครื่องมือนี้จัดรูปแบบ JavaScript โดยเพิ่มการเยื้อง การขึ้นบรรทัดใหม่ และการเว้นวรรคที่สม่ำเสมอ เมื่อคุณต้องการ format javascript online เครื่องมือนี้จะพาร์สโค้ด JavaScript และจัดโครงสร้างใหม่ด้วยรูปแบบที่สอดคล้องกัน เครื่องมือรองรับตัวเลือกการเยื้องหลายแบบ (2 ช่องว่าง, 4 ช่องว่าง, แท็บ) และยังสามารถย่อขนาด (minify) JavaScript ได้โดยลบช่องว่างที่ไม่จำเป็น ตัวจัดรูปแบบ JavaScript ช่วยให้นักพัฒนาทำความสะอาดโค้ดที่รก เพิ่มความอ่านง่ายของโค้ด และเตรียม JavaScript สำหรับใช้งานในโปรดักชัน เครื่องมือนี้คงโครงสร้างและการทำงานของ JavaScript ไว้ ขณะเดียวกันก็ทำให้ดูแลรักษาได้ง่ายขึ้น

กรณีการใช้งานทั่วไปของนักพัฒนา

นักพัฒนาใช้ตัวจัดรูปแบบ JavaScript เมื่อทำความสะอาดโค้ดจากแหล่งที่ถูกย่อขนาด (minified) API หรือโค้ดเบสเก่า เครื่องมือนี้มีประโยชน์สำหรับการทำให้รูปแบบ JavaScript เป็นมาตรฐานในหลายโปรเจกต์ ทำให้การรีวิวโค้ดง่ายขึ้น และเพิ่มความสามารถในการดูแลรักษา นักพัฒนาจำนวนมากใช้ตัวจัดรูปแบบ JavaScript เมื่อทำงานกับโค้ดที่ถูกสร้างโดยเครื่องมือหรือเฟรมเวิร์กซึ่งให้ผลลัพธ์ที่ไม่จัดรูปแบบ เครื่องมือนี้ช่วยเมื่อดีบักโครงสร้าง JavaScript เพราะโค้ดที่จัดรูปแบบดีจะอ่านและเข้าใจได้ง่ายกว่า ตัวจัดรูปแบบ JavaScript ยังมีประโยชน์เมื่อเตรียมโค้ดสำหรับเอกสารประกอบ หรือเมื่อแปลงระหว่างรูปแบบ JavaScript ที่ต่างกัน เมื่อทำงานกับ JavaScript จากฐานข้อมูลหรือ API ตัวจัดรูปแบบช่วยให้ทำความสะอาดและทำให้โค้ดเป็นมาตรฐานได้ง่าย

รูปแบบข้อมูล ชนิด หรือรูปแบบย่อย

ตัวจัดรูปแบบ JavaScript นี้รองรับไวยากรณ์ JavaScript มาตรฐาน (ES5+) รวมถึงฟังก์ชัน อ็อบเจ็กต์ อาร์เรย์ คลาส และฟีเจอร์สมัยใหม่ของ ES6+ เครื่องมือนี้จัดการคำสั่ง นิพจน์ คอมเมนต์ และฟีเจอร์มาตรฐานทั้งหมดของ JavaScript รองรับรูปแบบการเยื้องหลายแบบ และสามารถย่อขนาด (minify) 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 บางตัวอาจลบช่องว่างที่ส่งผลต่อความสามารถในการอ่านโค้ด JavaScript ที่ฝัง HTML หรือมีไวยากรณ์พิเศษอาจต้องใช้เครื่องมือจัดรูปแบบแยกต่างหากเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด ตัวจัดรูปแบบรองรับไวยากรณ์ JavaScript มาตรฐาน แต่กรณีขอบอย่าง JSX หรือ TypeScript อาจจัดรูปแบบได้ไม่ถูกต้อง JavaScript ที่มีอักขระพิเศษหรือปัญหาเรื่องการเข้ารหัสอาจจัดรูปแบบได้ไม่ถูกต้อง

เมื่อใดควรใช้เครื่องมือนี้แทนการเขียนโค้ด

ใช้ตัวจัดรูปแบบ JavaScript นี้สำหรับงานจัดรูปแบบแบบรวดเร็ว การทำความสะอาดโค้ดแบบครั้งเดียว หรือเมื่อทำงานนอกสภาพแวดล้อมการพัฒนาของคุณ เหมาะสำหรับจัดรูปแบบ JavaScript จาก API แหล่งที่ถูก minify หรือโค้ดเก่า (legacy) สำหรับการพัฒนาในโปรดักชัน ให้ผสานการจัดรูปแบบ JavaScript เข้ากับกระบวนการบิลด์ด้วยเครื่องมืออย่าง Prettier หรือ ESLint พร้อม auto-fix เครื่องมือบนเบราว์เซอร์เด่นเรื่องความรวดเร็วและการเรียนรู้ ขณะที่เครื่องมือในขั้นตอนบิลด์ให้การทำงานอัตโนมัติ ความสม่ำเสมอ และการผสานเข้ากับไปป์ไลน์ CI/CD