When working with HTML files, it's common to end up with code that is difficult to read due to improper indentation, mixed use of tabs and spaces, or simply because the code has been edited by multiple people with different formatting styles. Sublime Text 2, a popular text and code editor, offers several tools and techniques to help reformat and tidy up HTML code to enhance its readability and maintainability. Here’s how you can reformat HTML code using Sublime Text 2 efficiently.

Preparing Sublime Text 2

Before diving into the actual reformating, ensure that Sublime Text 2 is set up properly:

1. Install Sublime Text 2: If not already installed, download and install Sublime Text 2 from the official website.
2. Package Control: Make sure Package Control is installed. It allows you to easily install plugins which can aid in reformating HTML. Press Ctrl+Shift+P (Win, Linux) or Cmd+Shift+P (Mac) and type "Install Package Control", then hit Enter.

Installing Useful Plugins

Sublime Text 2 becomes even more powerful with plugins. Here are a couple of plugins you can install for HTML formatting:

• HTMLTidy: An excellent tool for cleaning up HTML code.
• HTML-CSS-JS Prettify: A plugin that formats HTML, CSS, and JavaScript.

To install these plugins:

1. Open the command palette with Ctrl+Shift+P or Cmd+Shift+P.
2. Type “Install Package”, then select “Package Control: Install Package”.
3. Type the name of the plugin (e.g., “HTML-CSS-JS Prettify”) and select it to install.

Using HTMLTidy to Format HTML

Once HTMLTidy is installed:

1. Open your HTML file in Sublime Text 2.
2. Access the command palette (Ctrl+Shift+P or Cmd+Shift+P).
3. Type “Tidy” and select “TidyHTML” to tidy your document.

Using HTML-CSS-JS Prettify

For using HTML-CSS-JS Prettify:

1. After installation, open your HTML document.
2. From the menu, select Tools -> Command Palette or use the shortcut (Ctrl+Shift+P or Cmd+Shift+P).
3. Type “Prettify” and select “HTML-CSS-JS Prettify: Prettify Code”.

This plugin will automatically adjust the indentation, spacing, and structure of your HTML code making it cleaner and more readable.

Key Commands & Shortcuts

Sublime Text 2 offers several key commands that are useful for formatting:

Additional Tips for Maintaining a Neat HTML Code

• Consistency: Stick to a consistent style of indentation (tabs or spaces).
• Use a Linter: HTML linting tools can help identify issues with the code that may not be directly related to formatting but are crucial for clean code.
• Settings Configuration: Configure your Sublime Text 2 settings to automatically match your preferred style, such as tab size, whether to insert spaces instead of tabs, etc.

Conclusion

By using the built-in features of Sublime Text 2 along with powerful plugins like HTMLTidy and HTML-CSS-JS Prettify, you can greatly enhance the clarity and quality of HTML code. Consistent use of these tools and adherence to a set coding standard can make your development process more efficient and your projects more maintainable.