Customizing Code Format Settings

Codux uses default formatting settings for Typescript when presenting your code in the built-in code editor. For example, the Codux code editor converts tabs to spaces by default, and uses 4 spaces for the indent size. These are all configurable using the formatting key in codux.config.json, so if you have your own preferences that you'd like to use, this is the article for you!
The formatting configuration key (object) has two properties:
  • formatSettings (object): Overrides default editor settings. See the table below for options.
  • formattingFile (object): Specifies which external EditorConfig configuration file to use for the editor. This file overrides settings specified under formatSettings (above).
Here are the available formatting options for formatSettings:
Name
Type
Description
semicolons
string "ignore" (default), "remove", "insert"
How to treat semicolons.
indentSize
number
Indent size to use.
tabSize
number
Tab size to use.
newLineCharacter
string "\n" (default), "\r\n"
New line character to use.
convertTabsToSpaces
boolean
Convert tabs to spaces.
indentStyle
string "None", "Block" or "Smart"
Indent style.
insertSpaceAfterConstructor
boolean
Insert space after constructor.
insertSpaceAfterCommaDelimiter
boolean
Insert space after comma delimiter.
insertSpaceAfterSemicolonInForStatements
boolean
Insert space after semicolon for statements.
insertSpaceBeforeAndAfterBinaryOperators
boolean
Insert space before and after binary operators.
insertSpaceAfterKeywordsInControlFlowStatements
boolean
Insert space after keywords in control flow statements.
insertSpaceAfterFunctionKeywordForAnonymousFunctions
boolean
Insert space after function keyword for anonymous functions.
insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis
boolean
Insert space after opening and before closing nonempty parenthesis.
insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets
boolean
Insert space after opening and before closing non-empty brackets.
insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces
boolean
Insert space after opening and before closing template string braces.
insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces
boolean
Insert space after opening and before closing JSX expression braces.
insertSpaceBeforeFunctionParenthesis
boolean
Insert space before function parenthesis.
placeOpenBraceOnNewLineForFunctions
boolean
Place open brace on new line for functions.
placeOpenBraceOnNewLineForControlBlocks
boolean
Place open brace on new line for control blocks.
trimTrailingWhitespace
boolean
Trim trailing whitespace.
Refer below for a complete implementation example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "formatting": {
        "formattingFile": {
            "type": "editorconfig",
            "filePath": "/src/myeditorconfig.ini"
        },
        "formatSettings": {
            "indentSize": 4,
            "tabSize": 4,
            "newLineCharacter": "\n",
            "convertTabsToSpaces": true,
            "indentStyle": 2,
            "insertSpaceAfterConstructor": false,
            "insertSpaceAfterCommaDelimiter": true,
            "insertSpaceAfterSemicolonInForStatements": true,
            "insertSpaceBeforeAndAfterBinaryOperators": true,
            "insertSpaceAfterKeywordsInControlFlowStatements": true,
            "insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
            "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
            "insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
            "insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
            "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
            "insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
            "insertSpaceBeforeFunctionParenthesis": false,
            "placeOpenBraceOnNewLineForFunctions": false,
            "placeOpenBraceOnNewLineForControlBlocks": false,
            "semicolons": "ignore",
            "trimTrailingWhitespace": true
        }
    }
}
Previous article
Next article