How do I beautify in Sublime Text 2

11,154

Use:

HTML-CSS-JS Prettify

 

Prettify


  You can adjust the following settings @:

Menu > Preferences > Package Settings > HTML/CSS/JS Prettify > Set Prettify Preferences

 

"js": {
  "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],

  "brace_style": "collapse-preserve-inline",
  // collapse:                 (old default) Put braces on the same line as control statements
  // collapse-preserve-inline: (new default) Same as collapse but better support for ES6 destructuring and other features. https: //github.com/victorporof/Sublime-HTMLPrettify/issues/231
  // expand:                   Put braces on own line (Allman / ANSI style)
  // end-expand:               Put end braces on own line
  // none:                     Keep them where they are

  "break_chained_methods":     false, // Break chained method calls across subsequent lines
  "e4x":                       false, // Pass E4X xml literals through untouched
  "end_with_newline":          false, // End output with newline
  "indent_char":               " ",   // Indentation character
  "indent_level":              0,     // Initial indentation level
  "indent_size":               2,     // Indentation size
  "indent_with_tabs":          true,  // Indent with tabs, overrides `indent_size` and `indent_char`
  "jslint_happy":              false, // If true, then jslint-stricter mode is enforced
  "keep_array_indentation":    false, // Preserve array indentation
  "keep_function_indentation": false, // Preserve function indentation
  "max_preserve_newlines":     0,     // Maximum number of line breaks to be preserved in one chunk (0 disables)
  "preserve_newlines":         true,  // Whether existing line breaks should be preserved
  "space_after_anon_function": false, // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
  "space_before_conditional":  true,  // Should the space before conditional statement be added, "if(true)" vs "if (true)"
  "space_in_empty_paren":      false, // Add padding spaces within empty paren, "f()" vs "f( )"
  "space_in_paren":            false, // Add padding spaces within paren, ie. f( a, b )
  "unescape_strings":          false, // Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
  "wrap_line_length":          0      // Lines should wrap at next opportunity after this number of characters (0 disables)
}

 


Note:

It does not handle commas within quotes.
I also tested CoolFormat, which does not handle them either.

Share:
11,154

Related videos on Youtube

Luis Arriojas
Author by

Luis Arriojas

Software Engineer with 15+ years of experience developing high-performing software for different industries with a broad set of technologies, and deeply involved in different stages of the project from conception and architecture to backend and frontend development. Frontend: AngularJS, Angular 5, JavaScript, TypeScript, ECMAScript 2015, WebSocket, jQuery, jQuery UI, HTML5, CSS3, SASS, Bootstrap 3, Angular Material, and Jasmine. Backend: PHP7 and PHPUnit, Node.js 8, Express.js 4. Databases: MySQL, MongoDB 2, and Redis. Others: JIRA, Electron, Git, SEO, Responsive Web Design, Gulp, Bower, and NPM.

Updated on June 04, 2022

Comments

  • Luis Arriojas
    Luis Arriojas almost 2 years

    In Sublime 2, I know how to reindent the whole document and how to assign a key to this function, but I want to reindent as is do in WebStorm where spaces are added before and after a (=) or after and before a (:). Watch the image for the examples. How could I do that in Sublime or what package do this?

    Example of reindenting in WebStorm

  • Luis Arriojas
    Luis Arriojas about 8 years
    Thank you @Enteleform . HTMLPrettify does exactly what I wanted. I can live without comma handling within quotes. Thank you a lot.