Formatting in CodeMix

Formatting Code

The default shortcut for formatting is Ctrl/Cmd+Shift+F. This command formats the active editor selection; or, if no selection is made then the entire file if formatted. You can also format from the editor’s context menu.

When you format a file, an overlay at the top of the editor indicates which formatter is being used, and allows you to change it. 

Click the Configure link to see details for the currently active formatter, configure the formatting settings, or change the formatter entirely.

Note: It is also possible to use the Format Document/Selection commands from the command palette to format your code and change the default formatter, though the above dialog is the preferred way of making this change.

HTML

HTML Language Features

This is the default built-in formatter for HTML files. It can be configured at CodeMix>Formatter>HTML under Preferences or Project Properties (project specific).

For advanced formatting capabilities, including the ability to use external configuration files, we recommend changing the formatter for HTML to Beautify, refer to the Beautify section in the Appendix for details.

CSS / Less / Sass

Beautify

This is the default formatter for CSS, Less and Sass files in CodeMix. To change the formatting settings, you will need to create a .jsbeautifyrc file; refer to the Beautify section in the Appendix for details.

JavaScript/TypeScript

TypeScript and JavaScript Language Services

This is the default formatter for both JavaScript and TypeScript files in CodeMix. To configure formatting, look at the pages at CodeMix>Formatter>JavaScript/TypeScript under Preferences or Project Properties.

For advanced formatting capabilities, including the ability to use external configuration files, we recommend changing the formatter for JavaScript and TypeScript to Beautify, refer to the Beautify section in the Appendix for details.

Appendix

Beautify

The Beautify extension can handle formatting for HTML, JavaScript, JSON and CSS/Less/Sass. This extension is based on the js-beautify library, which is the same tech that is used by CodeMix’s default formatters for HTML and JavaScript; but, with the extension active, you have some additional flexibility with specifying formatting settings.

Configuring Beautify

Formatting settings are determined in the following way:

1. Settings will be picked up from a .jsbeautifyrc file in the current file’s directory, or in an ancestor of this directory up to the project root – these will be the only settings used.
2. In the absence of this file, settings from a .jsbeautifyrc file in your home directory will be considered – these will be the only settings used.
3. If no .jsbeautifyrc file is found, formatting settings from your workspace preferences or project properties for the corresponding language are used.
   — Open editor settings (tabs / spaces / indentation size) for the specific file are merged in
   — Editor config settings are searched for and are merged in

For additional details on how settings are determined, refer to this document.

Formatting Settings

For a list of the formatting settings possible, refer to this document. For an example of a .jsbeautifyrc file, see below:

{
    "indent_char": " ", // Indentation character
    "indent_size": 4, // Indentation size
    "html": {
   	 "max_preserve_newlines": 10,
   	 "preserve_newlines": true
    },
    "css": {
   	 "newline_between_rules": true,
   	 "end_with_newline": true
    },
    "js": {
   	 "brace_style": "collapse",
   	 "keep_array_indentation": false
    }
}