Formatting in CodeMix
CodeMix supports formatting for a number of file types out of the box. While the built-in formatters are very capable, if you want greater control over your formatting settings, you may want to install and use formatting extensions like Beautify and Prettier.
The CodeMix plugin is compatible with Eclipse-based IDEs and tools—like MyEclipse, Spring Tools Suite, and JBoss Tools—so you can continue working in the environment you are accustomed to.
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 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
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.
Formatting settings are determined in the following way:
- 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.
- 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.
- 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.
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