Name it Choose Browser.sublime-build. Sublime Text should be smart enough to put it in the right place for you, but if it doesn't, save it to the following locations: Mac OS X: /Library/Application Support/Sublime Text 2/Packages/User; Windows: Restart Sublime Text. Oct 03, 2019 Launch Sublime Text. JSC is a command-line Javascript runner, cooked directly into Mac OS X. Because most Macs already contains everything you need to run the script, creating the build system in Sublime Text is incredibly easy. If you have a Windows computer, see the directions for Node.js below. Now since you have saved the build system as 'Chrome.sublime-build' in the Build Systems directory, it will now show up in 'Build System', select it: Okay, you're all done here now. Just open any HTML file or write and save a new file as HTML and press 'CTRL+B' or go to 'Tools' 'Build' and it will open the HTML file in Google Chrome. The flexibility of packages enables users to change the code interface and environment as preferences. Sublime Text 3.0 Build 3130 Full is an elegant text codes editor software for Mac OSX users.Sublime 3 For Mac Download is a unique text coding editor program that. Build systems support an optional 'target' setting, which defaults to 'exec'. This specifies the command that will be run when the build system is triggered; Fixed the selector field in.sublime-build files not being interpreted correctly; Corrected the fileregex in Make.sublime-build.

The Question :

I’ve got some poorly-formatted HTML code that I’d like to reformat. Is there a command that will automatically reformat HTML code in Sublime Text 2 so it looks better and is easier to read?

• See also stackoverflow.com/questions/9495007/…
• Also if you use Vintage mode you can simply use gg=G in normal mode.
• You can waste your time reading through this whole page, or you can just get github.com/akalongman/sublimetext-codeformatter and get back to work.

The Answer 1

You don’t need any plugins to do this.Just select all lines (Ctrl A) and then from the menu select Edit → Line → Reindent.This will work if your file is saved with an extension that contains HTML like .html or .php.

If you do this often, you may find this key mapping useful:

If your file is not saved (e.g. you just pasted in a snippet to a new window), you can manually set the language for indentation by selecting the menu View → Syntax → language of choice before selecting the reindent option.

The Answer 2

There are half a dozen or so ways to format HTML in Sublime. I’ve tested each of the most popular plugins (see the writeup I did on my blog for full details), but here’s a quick overview of some of the most popular options:

Reindent command

Pros:

• Ships with Sublime, so no plugin install needed

Cons:

• Doesn’t delete extra blank lines
• Can’t handle minified HTML, lines with multiple open tags
• Doesn’t properly format <script> blocks

Tag

Pros:

• Supports ST2/ST3
• Removes extra blank lines
• No binary dependencies

Cons:

• Chokes on PHP tags
• Doesn’t handle <script> blocks correctly

HTMLTidy

Pros:

• Handles PHP tags
• Some settings to tweak formatting

Cons:

• Requires PHP (falls back to web service)
• ST2 only
• Abandoned?

HTMLBeautify

Pros:

• Supports ST2/ST3
• Simple and no binaray dependencies
• Support for OS X, Win and Linux

Cons:

• Chokes a bit with inline comments
• Does expand minimized/compressed code

HTML-CSS-JS Prettify

Pros:

• Supports ST2/ST3
• Handles HTML, CSS, JS
• Great integration with Sublime’s menus
• Highly customizable
• Per-project settings
• Format on save option

Cons:

• Requires Node.js
• Not great for embedded PHP

Which is best?

HTML-CSS-JS Prettify is the winner in my book. Lots of great features, not much to complain about.

The Answer 3

The only package I’ve been able to find is Tag.

You can install it using the package control. https://sublime.wbond.net

After installing package control. Go to package control (Preferences -> Package Control) then type install, hit enter. Then type tag and hit enter.

After installing Tag, highlight the text and press the shortcut Ctrl+Alt+F.

The Answer 4

I recommend this plugin: HTML/CSS/JS Prettify, It really works.

After the installation, just select the code and press Ctrl+Shift+H.

Done!

The Answer 5

Just a general tip. What I did to auto-tidy up my HTML, was install the package HTML_Tidy, and then add the following keybinding to the default settings (which I use):

this runs HTML Tidy with every enter. There may be drawbacks to this, I’m quite new to Sublime myself, but it seems to do what I want 🙂

The Answer 6

Altough the question is for HTML, I would also additionally like to give info about how to auto-format your Javascript code for Sublime Text 2;

You can select all your code(ctrl + A) and use the in-app functionality, reindent(Edit -> Line -> Reindent) or you can use JsFormat formatting plugin for Sublime Text 2 if you would like to have more customizable settings on how to format your code to addition to the Sublime Text’s default tab/indent settings.

You can easily install JsFormat with using Package Control (Preferences -> Package Control) Open package control then type install, hit enter. Then type js format and hit enter, you’re done. (The package controller will show the status of the installation with success and errors on the bottom left bar of Sublime)

Add the following line to your key bindings (Preferences -> Key Bindings User)

I’m using ctrl + alt + 2, you can change this shortcut key whatever you want to. So far, JsFormat is a good plugin, worth to try it!

Hope this will help someone.

The Answer 7

There’s a plugin called SublimeHtmlTidy which works pretty well

The Answer 8

For me, the HTML Prettify solution was extremely simple. I went to the HTML Prettify page.

1. Needed the Sublime Package Manager
2. Followed the Instructions for installing the package manager here
3. typed cmd + shift + p to bring up the menu
4. Typed prettify
5. Chose the HTML prettify selection in the menu

Boom. Done. Looks great

The Answer 9

Simply go to

Edit -> Tag -> Auto-format tags on document

The Answer 10

I created a Package called HTMLBeautify that does a decent job of reformatting HTML. I based it off of a Perl script I found back in 1997—I updated it to work with all the new fangled modern tags. 🙂

Check it out and let me know what you think!

The Answer 11

I think this is what you’re looking for:

The Answer 12

I am yet to have the privilege to comment so this is simply additional information related to @peter’s answer above answer.

I found HTML did not align as expected if IE conditional comments in the header were not completely in-line e.g. flush to the left:

The Answer 13

There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.

The Answer 14

I’m using tidy together with custom build system to prettify HTML.

I have HTMLTidy.sublime-build in my Packages/User/ directory:

and tidy_config.cfg file in the same directory:

And just select build system and press ctrl+b or cmd+b to reformat file content. One minor issue with that is that ST2 does not automatically reload the file so to see the results you have to switch to some other file and back (or to other application and back).

On Mac I’ve used macports to install tidy, on Windows you’d have to download it yourself and specify working directory in the build system, where tidy is located:

or add it to the PATH.

The Answer 15

you can set shortcut key F12 easy!!!

see detail here.

Sublime Text is currently the text editor of choice for a number of developers in the open-source community. It’s sophisticated, has powerful text selection and customization support and also includes a feature not used by many - its build system. In this post, I’d like to take you through the Sublime build system and share build scripts for working with many of the languages and tools we use today.

These will include scripts for Grunt, CoffeeScript, SASS and others.

Introduction

Sublime Text build systems can be considered simplistic, but highly customizable. The basic idea is that each type of Build profile is powered by a “.sublime-build” file - a JSON representations of the commands, paths and configuration needed to build a project using a specific tool or set of tools.

Builds can be executed using a keyboard shortcut (Command+B on Mac is the default on Mac or F7 on Windows), via the Tools menu or when a file is saved. If a project is currently open, the build system we last selected (e.g grunt) will be remembered.

When Sublime is passed references to external tools/binaries via a “.sublime-build” files, it can execute these applications with any arguments or flags that may be necessary. It is also able to pipe back the output of calling any of these apps using the built-in console in Sublime. Effectively this allows us to easily build projects without the need to leave our editor.

Adding a custom Build System

Sublime populates its Tools/Build System menu based on the “.sublime-build” files stored in the Sublime “Packages” directory. Should one need to locate this, it can be found in “~/Library/Application Support/Sublime Text 2/Packages/User” (if using OS X) or the corresponding Packages/User directory on other platforms.

A basic “.sublime-build” file could be represented in key/value form as follows:

Keys supported include:

• cmd - An array containing a command to run and its desired arguments and flags. Note that Sublime will search your PATH for any tools listed unless an absolute path has been used to point to them.
• selector - An optional string used to locate the best builder to use for the current file scope. This is only relevant if Tools/Build System/Automatic is true.
• path - An optional string that replaces your current process’s PATH before calling the commands listed.
• working_dir - An optional string defining a directory to switch the current directory to prior to calling any commands.
• shell - An optional boolean that defines whether commands should be run through the shell (e.g bash).
• file_regex - An optional regular expression used to capture error output from commands.

For a comprehensive list of keys supported in Sublime build scripts, see the unofficial docs.

Build Variables:

In addition, Sublime supports variable substitutions in build files such as $file_path (for the path to the current file) and more. These include:

• $file_path - the directory of the current file being viewed
• $file_name - only the name portion of the current file (extension included)
• $file_base_name - the name portion of the current file (extension excluded)
• $project_path - the directory path to the current project
• $project_name - the name portion of the current project

A complete list of substitutions supported is also available.

Grouping build tasks

Some developers also like to group together tasks within an external bash script (or equivalent). For example, here’s a simple git-ftp deploy script you can use with Sublime to commit and push your latest changes with git and then upload your latest files to FTP.

Example: Commit, Push And Upload To FTP

deployment.sh:

deployment.sublime-build:

If you haven’t used git-ftp before, Alex Fluger has a solid article about using it that may be of interest.

Targeting Platforms:

Sublime build files also support specifying configuration data for specific platforms (namely, OS X, Windows and Linux). Targeting a platform can easily be done by specifying another element in our config with the name of the platform. e.g

Build files for popular front-end tools

To help you get started, I’ve written a collection of “.sublime-build” files for some of the front-end tools I’m aware web developers are using these days below.

Most of these will function fine without the need to specify path, but if you run into an issue with paths, try including it to your config (e.g 'path': '/usr/local/bin').

grunt:

Node Build Script:

CoffeeScript:

SASS:

Whilst a more verbose version with automatic minification and watch config could be written:

LESS:

Stylus:

(a more comprehensive version of this can be found in the LESS-build-sublime project.)

Jade:

Install Sublime Text 2

r.js (RequireJS Optimizer):

UglifyJS:

Node (just passing in directly):

Sublime Text New Build System

quot;(...*?)quot;, line ([0-9]*)', 'selector': 'source.js'}

Pandoc (Markdown to HTML):

(and when it’s released, Yeoman):

JSHint:

Sublime Text 3 Build

I imagine most web developers would want to run JSHint from within a broader build process, but if you’d also like to run it standalone via a Sublime build file, the sublime-jshint package has a build file that will work fine on both OS X and Windows.

Build files for specific programming languages

I also thought that while we were looking at build files, it would be useful to demonstrate how these can be used to build/compile with some popular programming languages. These may differ to those included with Sublime by default, but are useful for reference:

Ruby (using RVM):

Python:

quot;(...*?)quot;, line ([0-9]*)', 'selector': 'source.python'}

PHP:

Java:

.Net (Windows):

C:

C++ (via g++):

(Note that we’re also able to specify OS-specific configurations too, as in the below):

Sublime Text Editor For Mac

Haskell:

Conclusions

Sublime Text Download For Mac

Sublime build systems are awesome and can help you avoid the need to manually switch between your editor and external build tools regularly. As you’ve hopefully now learned, putting together your own custom build systems is a straight-forward process and I’d recommend trying it out if Sublime happens to be your editor of choice.

Sublime No Build System

(Technically reviewed by Sindre Sorhus)