self-documenting-regex-and-vs-code-extensions.ts

// When one has to conform to using Regex, ameliorate the nasties and qualify/quantify as many identifiers as you can :boom: :tada:
// E.g. Self-documenting version of an unmaintainable Regex string
// 1. Break it up into readable functions/vars with doc comments
// 2. Build up the parts back into the final result
// Win. :lion: :gem:




// Does this look nice?
'([\w]{1,200}?)\b(\()([\w:,<>\t \[\]]{0,200})(\))[:\s]?(.+)?({)'

// How about this:
// Break it down

// Build the TypeScript function header :construction: regex pattern from the parts defined above.
// e.g. { @example `thisIsMyFunctionIsCoolTyper(superCoolVar: Array<Typo[]>, mittens: Classic[]): boolean {`         }                                       // Not sure if jsdoc plays well here.
// Regex pattern chunks for TypeScript function headers to fix up VS Code extension.
const regexFunctionNameWordFirstBounded = '([\w]{1,200}?)\b';  // Function name
const regexParenthesisOpen              = '(\()';              // Open rounded bracket ( for parameters

// Warning, doesn't check if real words or valid syntax, can having trailing characters, spaces etc.
const regexVarsAndTypesDefined              = '([\w:,<>\t \[\]]{0,200})';   // Allow types in function header params such as <Array<typo[]>>
const regexParameters                       = regexVarsAndTypesDefined;     // also allows the same syntax for types as parameters vars etc.
const regexParenthesisClosed                = '(\))';                       // Closed rounded bracket ) for parameters.
const regexReturnTypesDefinition            = regexVarsAndTypesDefined;     // also allows the same syntax for types as parameters vars etc.
const regexOpeningCurlyBraceForFunctionBody = '({)'                         // the end of the important match to obtain function header.

// Build the TypeScript function header :construction: regex pattern from the parts defined above.
// e.g. { @example `thisIsMyFunctionIsCoolTyper(superCoolVar: Array<Typo[]>, mittens: Classic[]): boolean {`         }                                       // Not sure if jsdoc plays well here.
const regexTSFullFunctionHeader: string = 
  regexFunctionNameWordFirstBounded +                                       // e.g. {@example `thisIsMyFunctionIsCoolTyper`                       }
  regexParenthesisOpen +                                                    // e.g. {@example `(`                                                 }
  regexParameters +                                                         // e.g. {@example `superCoolVar: Array<Typo[]>, mittens: Classic[]`   }
  regexParenthesisClosed +                                                  // e.g. {@example `)`                                                 }
  regexReturnTypesDefinition +                                              // e.g. {@example `: boolean`                                         }
  regexOpeningCurlyBraceForFunctionBody;                                    // e.g. {@example `{`                                                 }
console.log(regexTSFullFunctionHeader);


/* VS Code extension ideas while on this train of thought
1 Make better column alignment (comments, assignment, operators, etc) and learn how to do fancy string formatting, padding.
Readability vs spacing out. E.g. if you have a government form full of 100 fields, don't have the label spaced out from the input field like this:   'tfnlabel':                            ____ - _ _ _ _ _ _ _  - input [111 - 111 - 111 ]
2 Parse Gitmoji text into graphical emoji. VS Code already seems to support the graphical emoji (unicode): boom: : lion: 
2 (a) Parse gitmoji in cli
2 (b) Make sure it works when I'm using the terminals in Windows. git-bash, `mintty` (`mintty` has so many problems), linux subsystem, how about `powershell` and `cmd`?
3 Fix convenient informative console log generator
- or maybe just Test-driven development instead...
4 VS Code automatically delete tabbed whitespace when editing in the middle of the spaces (already aligned to a margin)
e.g. --->--->--->|
     --->hello-->| 
instead of
     --->hello--->--->|
 */

// Use readonly in TypeScript from now on. Only use readonly! ReadOnly all the things. ReadOnlyArray. readonly <typoo[]>

🎉 Looks verbose 📚

Implementation Details

Note: A "cursor" is actually a selection with a length of 0.

Inserts spaces to the left of selections until all the selection starts are aligned with the right-most selection start. Adds spaces to the end of selections until all selections are the same length as the longest selection (all section ends are aligned with the right most selection end).

Caveats

Multiline selections don't make much sense with this tool, but here's how they are handled: A multiline selection is split into two 0-length selections with one at the starting point and one at the end point of the multiline selection.

Likewise, multiple selections per line don't make much sense, but here's how they are handled: Multiple selections per line are combined into a single selection that starts at the left-most selection's starting point and ends at the right-most selection's end point.

Known Issues