How can I automatically insert semicolons at every optional location while typing?

Question

Summary

---

I recently discovered that VSCode has this remarkable feature that allows you to define fine-tuned automatic white-space and optional character handling behaviors which are applied to your code in real time as you type.

This is what my life has been missing. It is not always clear how the parser will insert semicolons, so it is advisable always insert the semicolons yourself. But this can be taxing, especially when this exists:

Unfortunately, I can't seem to get it to produce the results it advertises. See below for more information.

Demonstration of inconsistent behavior

---

Recreating the behavior: Settings

---

    {
        //  Relevant, Possibly Relevant
        "editor.acceptSuggestionOnCommitCharacter": true,
        "editor.detectIndentation": false,
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.insertSpaces": false,   
        "editor.trimAutoWhitespace": false,
        "javascript.format.enable": true,
        "javascript.format.insertSpaceAfterCommaDelimiter": true,
        "javascript.format.insertSpaceAfterConstructor": true,
        "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
        "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
        "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
        "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
        "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
        "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
        "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
        "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
        "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
        "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
        "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
        "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
        "javascript.format.semicolons": "insert",

        //  Not Relevant, Probably Not Relevant
        "editor.foldingHighlight": false,
        "editor.fontFamily": "'Cascadia Mono', 'tic-80 font', 'Courier New', monospace",
        "editor.fontSize": 13,
        "editor.glyphMargin": false,
        "editor.letterSpacing": 0,
        "editor.lineHeight": 2.5,
        "editor.lineNumbers": "on",
        "editor.matchBrackets": "never",
        "editor.minimap.renderCharacters": false,
        "editor.occurrencesHighlight": false,
        "editor.renderControlCharacters": true,
        "editor.renderWhitespace": "selection",
        "editor.scrollbar.verticalScrollbarSize": 0,
        "editor.smoothScrolling": true,
        "editor.tabSize": 4,
        "editor.tokenColorCustomizations": {
            "comments": "#16662B"
        },
        "editor.wordWrap": "wordWrapColumn",
        "editor.wordWrapColumn": 108,
        "editor.wrappingIndent": "same",
        "subtleBrackets.disableNative": false,
        "subtleBrackets.style": {
            "borderWidth": "2px",
            "borderColor": "#528BFF"
        },
        "terminal.integrated.cursorBlinking": true,
        "terminal.integrated.cursorStyle": "line",
        "terminal.integrated.cursorWidth": 2,
        "terminal.integrated.defaultLocation": "editor",
        "terminal.integrated.fontFamily": "tic-80 font",
        "terminal.integrated.fontSize": 12,
        "terminal.integrated.lineHeight": 1.75,
        "window.menuBarVisibility": "toggle",
        "window.titleBarStyle": "native",
        "workbench.colorCustomizations": {
            "[CyberWave]": {
                "statusBar.noFolderBackground": "#FFB608",
                "statusBar.noFolderBorder": "#FFB608",
                "statusBar.noFolderForeground": "#000000",
                "statusBarItem.hoverBackground": "#ff0000"
            }
        },
        "workbench.colorTheme": "CyberWave",
        "workbench.editor.showTabs": true,
    }

Recreating the behavior: Instructions

---

1. Type console.log() and press ENTER.

   • Notice the successful semicolon insertion.

---

2. Type { and press ENTER.

   Type console.log() and press ENTER.

   • Notice the missing semicolon is ignored by the formatter.

---

3. Type { and press ENTER.

   Press DELETE to remove the new line between the closing brace and the cursor.

   • The closing brace and the cursor should now be on the same line.

   Press DELETE to remove the white space between the cursor and the closing brace.

   Type console.log() and press ENTER.

   • Notice the successful semicolon insertion.

---

4. Left click to place the cursor on the right side of the closing brace on line 7 and press ENTER.

   Type console.log() and press ENTER.

   • Notice the successful semicolon insertion.

---

5. Left click to place the cursor on the right side of the closing brace on line 7 again and press ENTER.

   Type console.log() and press ENTER.

   • Notice the missing semicolon is again ignored by the formatter.

Expected results

---

console.log();          // Semicolon
{
    console.log();      // Semicolon
    {
        console.log();  // Semicolon
    }
}
console.log();          // Semicolon

console.log();          // Semicolon

Actual results

---

console.log();
{
    console.log()       // No semicolon
    {
        console.log();
    }
}
console.log()           // No semicolon

console.log();