How to Install Node.js and Use the HTML-CSS-JS Prettify Plugin in Sublime Text

Sublime Text is a lightweight, fast, and highly customizable code editor — but it doesn’t come with built-in code formatting like VS Code. That’s where the HTML-CSS-JS Prettify plugin comes in. Combined with Node.js, this plugin helps you maintain clean, consistent, and professional-looking code.

In this guide, we’ll walk you through:

  • Installing Node.js (a prerequisite for the plugin)
  • Installing and configuring HTML-CSS-JS Prettify in Sublime Text
  • Using the plugin effectively
  • Troubleshooting common issues

1. Install Node.js (Prerequisite for Prettify)

The HTML-CSS-JS Prettify plugin relies on Node.js to work. You’ll need Node.js installed before proceeding.

a. Choose Your Installation Method

  • Official Node.js Installer (Beginner-friendly)
    The simplest option — download and run the installer. It comes with Node.js and npm (Node Package Manager).
  • Node Version Manager (NVM) (Advanced users)
    Use this if you need multiple Node.js versions for different projects.

b. Install Node.js with the Official Installer

  • Download the Installer from the official Node.js website. Choose the LTS (Long-Term Support) version.
  • Run the Installer and follow the setup wizard.
  • Select npm Package Manager during installation. Other optional tools can be installed if required.
  • Windows Only (Optional): The installer may offer extra tools like Chocolatey for native modules. Install if needed.
  • Finish Installation and restart your terminal.
  • Verify Installation: Open your terminal (Command Prompt, PowerShell, or macOS/Linux Terminal) and run:

    • node -v 
npm -v

    If both commands output version numbers (for example, v22.3.0 and 10.8.1), Node.js and npm are installed successfully.

2. Install the HTML-CSS-JS Prettify Plugin

1. Check for Package Control:

  • Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
  • Search for Package Control: Install Package Control (if not already installed).

2. Install Prettify Plugin:

  • Open Command Palette again.
  • Type install → Select Package Control: Install Package.
  • Search for prettify → Select HTML-CSS-JS Prettify.

3. Configure the Plugin

If the plugin doesn’t detect Node.js automatically:

    1. Open Command Palette → Type htmlprettify → Select Set Node Path.

    2. Enter the path to your Node.js executable:

Windows:

C:/Program Files/nodejs/node.exe

macOS/Linux:

/usr/local/bin/node

4. Using the Prettify Plugin

  • Command Palette: Ctrl+Shift+P → Type htmlprettify → Select Prettify Code.

  • Keyboard Shortcut:

    • Windows/Linux:

    Ctrl+Shift+H

    macOS:

    Cmd+Shift+H

  • Right-Click Menu: Right-click → Select HTML/CSS/JS Prettify → Prettify Code.
  • Automatic Formatting:
    • Enable Beautify on Save → set format_on_save: true in settings.
    • Sublime Text 3 only: enable format_while_editing: true (experimental).

5. Benefits of Using a Code Formatter

  • Readability: Code becomes easy to scan and understand.
  • Consistency: Enforces team-wide coding standards.
  • Reduced Errors: Clean structure prevents syntax mistakes.
  • Collaboration: Makes shared projects easier to maintain.

6. Troubleshooting Common Issues

  • “Node.js not found” error: Ensure Node.js is installed and its path is correctly set.
  • Shortcut conflicts: Change key bindings under Preferences → Key Bindings - User.
  • Inconsistent formatting: Adjust plugin settings for indentation (tabs vs. spaces).
  • Beautify on Save not working: Verify format_on_save is set to true.
  • Files not formatting: Ensure the file has the correct extension (.html, .css, .js).

Conclusion

By setting up Node.js with the HTML-CSS-JS Prettify plugin, you transform Sublime Text into a powerful code editor with automatic formatting. This setup ensures clean, consistent, and professional code, helping you save time and collaborate better.

At BizzNist, we regularly share developer-friendly guides and IT solutions to boost productivity. Stay tuned for more coding tutorials and best practices!