How do I beautify in Sublime Text 2
Use:
HTML-CSS-JS 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.
Related videos on Youtube
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, 2022Comments
-
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?
-
Luis Arriojas about 8 yearsThank you @Enteleform . HTMLPrettify does exactly what I wanted. I can live without comma handling within quotes. Thank you a lot.