ipatalas / vscode-postfix-ts

Postfix notation for TypeScript/Javascript - extension for VS Code

vscode-postfix-ts

Postfix templates for TypeScript/JavaScript

Features

This extension features postfix templates that can be used to improve productivity. It's been inspired on former, great R# extension

I find it annoying to jump the cursor back and forth whenever I want to perform some simple operations. This extension makes it easier. I use this feature on daily basis in C# but was missing it in JS/TS until now.

A simple animation is worth more than words:

It also works pretty well with multiline expressions (v1.9.0+):

There is also a special handling for .not template which allows you to select specific expression to invert when having more options:

All available templates (expr means the expression on which the template is applied):

Template	Outcome
.if	if (expr)
.else	if (!expr)
.null	if (expr === null)
.notnull	if (expr !== null)
.undefined	if (expr === undefined) or if (typeof expr === "undefined") (see settings)
.notundefined	if (expr !== undefined) or if (typeof expr !== "undefined") (see settings)
.for	for (let i = 0; i < expr.Length; i++)
.forof	for (const item of expr)
.forin	for (const item in expr)
.foreach	expr.forEach(item => )
.not	!expr
.return	return expr
.var	var name = expr
.let	let name = expr
.const	const name = expr
.log	console.log(expr)
.error	console.error(expr)
.warn	console.warn(expr)
.cast	(<SomeType>expr)
.castas	(expr as SomeType)
.call	{cursor}(expr)
.new	new expr()
.promisify	Promise<expr>
.await	await expr

If for any reason you don't like either of those templates you can disable them one by one using postfix.disabledBuiltinTemplates setting.

Custom templates (1.6.0 and above)

You can now add your own templates if the defaults are not enough. This will only work for simple ones as some templates require additional tricky handling. To configure a template you need to set postfix.customTemplates setting. It's an array of the following objects:

{
  "name": "...",
  "description": "...",
  "body": "...",
  "when": ["..."]
}

name defines what will be the name of the suggestion description will show additional optional description when suggestion panel is opened body defines how the template will work (see below) when defines conditions when the template should be suggested

Template body

Template body defines how will the expression before the cursor be replaced. Body can be defined either as single string or array of strings. If it's an array then strings will be joined with a newline character. It supports standard Visual Studio Code Snippet syntax. There is also one special placeholder that can be used:

• {{expr}}: this will be replaced by the expression on which the template is applied so for example !{{expr}} will simply negate the expression
• this placeholder can have modifiers (uppercase, lowercase, capitalize) which can be used in the following way:

{
    "name": "useState",
    "body": "const [{{expr}}, set{{expr:capitalize}}] = React.useState();",
    "description": "const [{{expr}}, set{{expr:capitalize}}] = React.useState();",
    "when": []
}

This snippet will have the following outcome (name of the original identifier has been capitalized):

Template conditions

when condition can be zero or more of the following options:

• identifier: simple identifier, ie. variableName (inside an if statement or function call arguments)
• expression: can be either a simple expression like object.property.value or array[index] or a combination of them
• binary-expression: a binary expression, ie. x > 3, x * 100, x && y
• unary-expression: an unary expression, ie. !x, x++ or ++x
• new-expression: a new expression, ie. new Type(arg1, arg2)
• function-call: a function call expression, ie. func(), object.method() and so on
• type: type in function/variable definition, ie. const x: string
• string-literal: string literal, ie. 'a string' or "string in double quotes"

If no conditions are specified then given template will be available under all possible situations

Infer variable names (1.11.0 and above)

For var/let/const and forof/foreach templates the extension will try to infer a better name for the variable based on the subject expression. For instance fs.readFile() expression will result in variable named file instead of default name. Same applies to forof/foreach templates, but in this case the extension is trying to figure out a singular form of the subject. Of course this can still be easily changed, it's only a suggestion. Few examples on the image below:

If you have ideas for more "patterns" that could be easily handled please create an issue.

Configuration

This plugin contributes the following settings:

• postfix.languages: array of language identifiers in which the extension will be available. Default value is ['javascript', 'typescript', 'javascriptreact', 'typescriptreact']
• postfix.customTemplates: array of custom template definitions - see Custom templates (1.6.0 and above)
• postfix.customTemplates.mergeMode: determines how custom templates are shown if they share the same name with built-in template:
  • append - both built-in and custom template will be shown
  • override - only custom template will be shown (it overrides built-in one)
• postfix.undefinedMode: determines the behavior of .undefined and .notundefined templates, either equality comparison or typeof
• postfix.inferVariableName: enables variable name inferring
• postfix.disabledBuiltinTemplates: allows to disable particular built-in templates (for instance discouraged var)

The postfix.languages setting can be used to make the extension available for inline JS/TS which is in other files like .html, .vue or others. You must still include javascript and typescript if you want the extension to be available there among the others.

Known issues

Feel free to open issues for whatever you think may improve the extension's value. New ideas for more templates are also welcome. Most of them are pretty easy to implement.

vscode-postfix-ts's Issues

[Request] - Packaging up dist with a bundler

Having the final out output still be loads of JS files can slow the editor down as there needs to be many I/O systems calls to open them all. tsc will convert back to JS but will do it file-for-file. I've noticed performance could be improved with this plugin by not having to load all the individual files.

Maybe consider using a bundler like webpack or ESbuild for your production build.

Add support for multiline expressions

Currently the extension only supports single-lined expressions. That makes it unusable in many real-life scenarios and hurts me as well :)

Incorrect insertion when in mid of expression

Hey! I have the following snippet:

{
    "name": "entries",
    "description": "",
    "body": "Object.entries({{expr}})",
    "when": ["identifier", "expression", "function-call"]
}

And I usually like to use it in the middle of expression to fix TS errors like this:

a.entries.a

However:

• Writing a.a and then adding .entries after first a without retriggering completions inserts Object.entries(a.).a (would be ideal if it didn't place that trailing .)

• Writing a.ent.a. (or a.entries.a) and only then triggering completions inserts postfix itself e.g. Object.entries(a.ent)a.

Incorrect type snippet inserting with indexed access

I have .t snippet that I use to wrap types into generics e.g. SomeType.t -> Partial<SomeType>, its really handy. However, I usually use it in combination with Extract so I can reduce amount of fields passing to the generic above e.g. Partial.

Snippet:

{
    "name": "t",
    "description": "",
    "body": "$1<{{expr}}>$2",
    "when": ["type"]
}

Works:

Extract<Config.t, ''> -> Extract<<Config>, ''>

Fails:

Extract<Config[''].t, ''> -> <Extract<Config['']>, ''> // notice incorrect insertion of opening <

The same applies for typeof:

Partial<Extract<typeof config.t, ''>> -> Partial<<Extract<typeof config>, ''>>

Expected:

Partial<Extract<typeof config.t, ''>> -> Partial<Extract<<typeof config>, ''>>

Hope I made it clear.

Suggestions should not be shown in JSDoc

When writing jsdoc (I use https://github.com/joelday/vscode-docthis because I'm lazy).
And you end your description with a dot and press tab to go to the next position (the extension usses templates) your sentence will be cast (it is the first suggestion) which is kind of annoying. The way to avoid it is by pressing esc before you press tab which is inconveniant. It would be great if this gets fixed.

question: How to disable built-in postfix snippet ?

I want to use my custom if/for/while.. snippet
But built-in postfix snippet has high priority,so that i have to select my custom snippet every time.

console templates are suggested for console itself

console. // shows suggestion for console log which shouldn't be the case

`.not` template command makes last character selected

1. a > 5 && a > 5.not
2. Accept second variant to invert whole expression

User can accidently remove this character if he continue typing

enumerable.forEach autocomplete adds additional '.array.forEach' using intellisense

From @james-gould on April 10, 2017 9:50

• VSCode Version: 1.12.0-insider
• OS Version: Windows 10

Steps to Reproduce:

1. Create an array and add a few elements.
2. Create a function and, using intellisense, write a forEach loop for the array you've just made as such:

var myArr = [1, 2, 3];

myArr.forE

press tab to complete the forEach statement

3. Autocomplete creates the statement, but adds in myArr.array.forEach and sets focus to array to be changed.

Would be nice to be able to autocomplete the foreach on a predefined array without needing to remove the array element from the statement when using autocomplete.

Copied from original issue: microsoft/vscode#24424

Incorrect expanding of `$a.$a` with double `{{expr}}` in snippet

Example snippet:

{
    "name": "that",
    "description": "",
    "body": "console.log('${1:{{expr}}}', {{expr}})$2",
    "when": ["identifier", "expression", "function-call"]
},

I don't really expect fix soon as I see I isn't maintained anymore, just recording for future work it here.

To reproduce:

1. Write $a.$a in empty file
2. Expand with .that (see snippet above)

Actual: console.log('$a.', $a.) (probably incorrect $ escaping)
Expected: console.log('$a.$a', $a.$a)

You can try this snippet with other expressions ($a.a for example) where it works correctly

No type suggestions in arrow functions for destructured args

Example:

const test = ({}: A) => { }
const test = ([]: A) => { }
// works fine if you name arg or change const to function

After A there are only identifier-suggestions, but should be only type as I started in #62 (comment)

Not template is not suggested for already negated expressions

!expression. // does not suggest .not template

It should be available and should actually remove the negation instead of introducing double negation

postfix does not work in function expression with variable declaration.

const f1 = function() {
  "test".  // not work. suggestions are only "cast", "castas", and "not".
}
function f2() {
  "test".  // work.
}

const f3 = () => {
  "test".  // not work. suggestions are only "cast", "castas", and "not".
}
() => {
  "test".  // work.
}

Using .log for object

Environment :
TS/JS postfix completion : 1.9.1

When I type <number | string | variable name | context>.log the snippet is shown and it works perfectly .

For example :

78.log
"foo".log
foo.log
this.log

But when I start to use this shortcut for an object <object>.log , the Postfix templates context menu item isn't shown, so I can't use the snippet .

For example :

{foo : "foo"}.log

By the way, your extension is really cool 👍 for this project !

return template does not work in some cases

Can't call return template when inside a callback which is a part of a return statement:

function test(items) {
  return items.map(x => {
    // ... some logic
    result.{cursor} // does not show return template here
  })
}

Shouldn't be suggested in JSX Elements & `JSXText`

Postfixes should not be suggested inside JSX text/Elements. Failing examples:

;<>a.castas</>
;<p.promisify></p>
;<p test.not></p>
;<p className="thing.log"></p>

But support for JSXExpression should be preserved:

;<p hidden={showMe.not}>test{thing.castas}</p>

Binary expression with equals regression

test = () => {
    wrapMe
}

Try to use .log after wrapMe:

console.log(test = () => {
wrapMe)
}

Results broken code, it doesn't seem to work anywhere in these functions.

Interesting fact that this is a binary expression with equals operator token.

[proposal] Add more context to postfix: `exprRegex`, `exprLastRegex`

For now, we can only use when to narrow down locations, in which postfixes are suggested. However there are variable name conventions (such as Idx or Index). Just a few examples:

Code Examples

const dotIdx = 0
dotIdx.notFound
// =>
if (dotIdx === -1) return

Template Examples

{
    "name": "notFound",
    "body": "if ({{expr}} === -1) ${1:return}",
    "exprLastRegex": "(Idx|Index)$",
    "when": [
        "identifier",
        "expression"
    ]
},

Of course, I could use just exprRegex here, but exprLastRegex can be useful for method calls.

It is really cool, as we can use different postfixes with the same name for different variable name patterns.

Why regexs? Because there are easy to construct. Also as I know regex engine in JS is pretty fast.

Postfixes should be suggested only after `.`

For now, postfixes are suggested after = and a few other characters (I can't remember other cases, sorry).

For example:

test.test = new // postfix is suggested, but it shouldn't appear here

Since as I suppose name can only be a single word (this is how builtin snippet works) why don't we check that character before current word is .?

await'ed expression - wrong replacement

Scenario: await func().const (const and pretty much all other templates)

Current outcome: await const name = func()
Expected outcome: const name = await func()

Templates do not work on nested property accessors

let obj = new ClassA();

obj. // this will suggest postfix templates

obj.contacts. // this will not but it should

Invert boolean expressions when using .not template

x > 3 should become x <= 3 instead of !(x > 3)

The same should apply to complex expressions like a > 1 || b < 100
Currently it will be changed to !(a > 1 || b < 100) which works well but would be more readable if it became a <= 1 && b >= 100

[proposal] `.null` & `.undefined` postfixes in `if`

What do you think of adding these postfixes inside if? For example:

if (b && a.null) -> if (b && a === null)

From my POV its quite common to compare something with undefined in existing if conditions

node_modules bundled in vsix

This make extension unnecessarily large.

Extension should be also activated on user defined extensions

Examples: .vue

Custom templates don't show up in the autocomplete menu

Here's my custom template:

"postfix.customTemplates": [
    {
      "name": "dl",
      "description": "detailed log",
      "body": "console.log('{{expr}}', {{expr}});$0",
      "when": [
        "expression"
      ]
    }
  ]

See this screen capture:

as typescript language service

sorry, this is not an issue but I want to share this idea with you. It would be interesting to implement this idea as a typescript language service plugin so it works on any editor supporting it (there are a lot now, vscode, atom, emacs, vim, webstorm, sublime, eclipse etc. ). I have experience with this technology, and for integrating with vscode, besides config contribution point is just a matter of using https://code.visualstudio.com/docs/extensionAPI/extension-points#_contributestypescriptserverplugins

well, just that, congrats, and keep it up! :)

Binary expression parentheses quickpick regression

Not suggesting multiple variants in these cases anymore:
if (a > b && (x * 100){not}) or if (b && (a > 50){not} && a)
But we have the following test: if (a > b && x * 100{not}) (without parentheses)

Don't display choice when only one variant is available

Hey! Thank you so much for releasing new version, however const and forof templates now always display popup suggestion, not only when there only one inferred variant, but even when the feature is toggled off. And after using new version for a while, I've found out they are distracting a bit.

I don't know maybe it's just me, but from POV we shouldn't display choice when there is actually no choice :)
I more like the old behavior when it was just inserting the text and cases where it can propose two variants are rare.
@ipatalas I saw you removed (see highlighted line) the length check and rewrite to single variant instead. Was this change accidental or intentional?

Template suggestion: truthy

Thanks a lot for this extension!

I would find a 'truthy' template useful, i.e. so that expr becomes !!expr.
What do you think?

Derive name for `const` and `forEach` from expression

Hey! I have awesome idea to derive variable names for builtin const and forEach snippets.

const

Improve variable name for const, let (and var?) snippets.

I simply use regexs to derive const name from expression.

We can use the part after get|read|create|retrieve|select|modify|update|use

Some examples:

someObject.getUser().const         ; const user = someObject.getUser()
// react or vue
useRouter().const                  ; const router = useRouter()
fs.readFile().const                ; const file = fs.readFile()
await updateRect(...anyArgs).const ; const rect = await updateRect(...anyArgs)

UPDATE: special handling of expression starting with new:

• just lowercase variable (if class starts with uppercase)

const mutationObserver = new MutationObserver().const

forEach

Also for forof snippet.

Just use singular form of last part of expression (if appliable).

1. Skip if identifier doesn't end with s or sList (or just List?)
2. Remove List part if appliable
3. Use pluralize with count 1 to get singular form

Example:

cookies.forEach(cookie => )

I'm using it for a while and can say its pretty neat.

Anyway I think it's much better than just name or item variables that should be renamed in 99% cases.

What do you think? Should we make this behaviour disableable?

does not work with strings, strange behaviour when ${} variables present in string literals

  "postfix.customTemplates": [
    {
      "body": "try{\n  const {\n    data,\n  } = await axios.request( {\n    method : \"${1:get}\",\n    url    : {{expr}},\n  } );\n  // handle result\n  $2\n}\ncatch( error ){\n  console.error( error );\n}",
      "description": "AxiosReq",
      "name": "axiosget",
      "when": []
    }
  ]

const userId=1;
const postId=1;
`/api/user/${userId}/posts/${postId}`.axiosget

expansion produces:

`/api/user/${userId}/posts/${try{
  const {
    data,
  } = await axios.request( {
    method : "get",
    url    : postId}`,
  } );
  // handle result
  
}
catch( error ){
  console.error( error );
}

expected:

try{
  const {
    data,
  } = await axios.request( {
    method : "get",
    url    : `/api/user/${userId}/posts/${postId}`,
  } );
  // handle result
  
}
catch( error ){
  console.error( error );
}

actually, further investigation shows that it does not really work for strings.

Templates do not work on unary operator expression

let counter;

counter++.  // this does not open suggestions with postfix templates

.undefined should create a "typeof" check

Current postfixing .undefined to the end of an entry fixes it to:

if (value === undefined) {

}

It is safer to check if (tpyeof value === "undefined") { instead.

The same goes for notundefined

Alternatively, create a new postfix for this specific typeof scenario

Doesn't work correctly in complex binary expressions

Tested on latest develop commit.
Works fine with something like a && a && a.if, but:
Failing examples:

a && a * 5.if -> a && a && if (a * 5) {
    
}
// ---
a && a === undefined.const -> a && const name = a === undefined

Add a way to invert `if`/`while` condition

Example: if (a && a && b{not}) it would invert last identifier instead and it seems there is no way to invert whole condition in this case.

As a workaround I'm writing thing like a > 0.not at the end to invert an if condition.

WebStorm in example above would suggest multiple variants, however introducing this behavior would be too annoying for existing users, instead I think it can support this:

if (a && a && b).not {
    ...
}

Extension failed to activate because it couldn't find typescript

It was working and vscode updated and it broke.
Attached the log reporting that says that couldn't find typescript.
The package.json has typescript as a dependency but vscode is set to use the bundled typescript instead of the package.json one

[2022-09-21 10:18:16.355] [exthost] [error] Activating extension ipatalas.vscode-postfix-ts failed due to an error:
[2022-09-21 10:18:16.355] [exthost] [error] Error: Cannot find module 'typescript'
Require stack:
- c:\Users\Killa\.vscode\extensions\ipatalas.vscode-postfix-ts-1.11.1\out\src\postfixCompletionProvider.js
- c:\Users\Killa\.vscode\extensions\ipatalas.vscode-postfix-ts-1.11.1\out\src\extension.js
- c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-fork.js
	at Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
	at Module._load (node:internal/modules/cjs/loader:832:27)
	at c._load (node:electron/js2c/asar_bundle:5:13343)
	at s._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:111:14538)
	at p._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:106:62866)
	at E._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:106:62234)
	at Module.require (node:internal/modules/cjs/loader:1059:19)
	at p (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:4:699)
	at Object.<anonymous> (c:\Users\Killa\.vscode\extensions\ipatalas.vscode-postfix-ts-1.11.1\out\src\postfixCompletionProvider.js:5:12)
	at u._compile (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:4:1313)
	at Module._extensions..js (node:internal/modules/cjs/loader:1220:10)
	at Module.load (node:internal/modules/cjs/loader:1035:32)
	at Module._load (node:internal/modules/cjs/loader:876:12)
	at c._load (node:electron/js2c/asar_bundle:5:13343)
	at s._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:111:14538)
	at p._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:106:62866)
	at E._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:106:62234)
	at Module.require (node:internal/modules/cjs/loader:1059:19)
	at p (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:4:699)
	at Object.<anonymous> (c:\Users\Killa\.vscode\extensions\ipatalas.vscode-postfix-ts-1.11.1\out\src\extension.js:14:37)
	at u._compile (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:4:1313)
	at Module._extensions..js (node:internal/modules/cjs/loader:1220:10)
	at Module.load (node:internal/modules/cjs/loader:1035:32)
	at Module._load (node:internal/modules/cjs/loader:876:12)
	at c._load (node:electron/js2c/asar_bundle:5:13343)
	at s._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:111:14538)
	at p._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:106:62866)
	at E._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:106:62234)
	at Module.require (node:internal/modules/cjs/loader:1059:19)
	at require (node:internal/modules/cjs/helpers:102:18)
	at Function.r [as __$__nodeRequire] (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:5:101)
	at b._loadCommonJSModule (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:106:64346)
	at b._doActivateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:97:14941)
	at b._activateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:97:13880)
	at process.processTicksAndRejections (node:internal/process/task_queues:96:5)
	at async E._activate (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:85:8224)
	at async E._waitForDepsThenActivate (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:85:8166)
	at async E._initialize (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:85:7530)

Hope to have better support for other languages

I really like this plugin. At the moment it's great for ts/js languages, but it's not particularly useful for php. I hope to see full support for other languages.thank you.

Exclude intermediate step from editor history

Good idea and realization! Thanks 🌮

Now, if I want to cancel the action of the plugin I press cmd + Z. But in the story editor saved intermediate step (like log or if).

Just look at GIF

I remember that this was already decided in Emmet, but I can't find how to do it.

//cc @jrieken as VS Code Hero :P

Tsx support

Can you add support for tsx and jsx files?

Can we generalize this

I think there are a number of us coming from Jetbrains products- e.g. Webstorm, IntelliJ (me), PyCharm, Resharper, etc. that really miss this.

I am still working in mostly Java. I've been trying to see if I can get the Textmate snippet syntax to behave in this fashion using RegEx. But its hard.

It would be great if this could be generalized, accept some user input file, and work for other languages.
I saw a feature request for this ability in Python (where someone linked to this project and how I ended up here).

I could pick apart your extension and give it a go when I've got a bit of time. But I always like to suggest it first to the extension owner as A) You are way more familiar with the extension, B) I am way less familiar with TS/JS, and C) I always hate it when someone takes an extension, tweaks it slightly then pushes it as their own work. I mean I know its open source and all, but the academic part of me still cringes with plagarism nightmares.

Looking through your code, most of it looks doable. There are a few language specific sticking points. I am still learning the VS Code API so IDK. I'll take another look as soon as I post this.

"when" on TypeScript types

I have a snippet for TypeScript which "promisifies" values, and it works great for custom types

- MyType.promisify
+ Promise<MyType>

However, I cannot target built-in types such as boolean, void, etc. in "when": [...].

Inline snippets too high priority

In the latest insiders postfix snippets are ontop of all other suggestions. I believe this behaviour is controlled by setting CompletionItem.sortText, however I couldn't solve it myself.

microsoft/vscode#26944

TM_CURRENT_LINE can not get correct value

I want to get current line code by TM_CURRENT_LINE, but i get a wrong value

1. write a custom template like thie:

 {
            "name": "test",
            "body": "${TM_CURRENT_LINE}",
            "description": "test",
            "when": []
 }

2. use this template with this code

someCode.test

3. result is

test

4. it should be

someCode.test

Doesn't suggest with non-null assertion at the end

example:
test!.const should be the same as test.const

Just saw you've fixed a bug, so there is a new one!
By the way thank you for your work, this one is on top of my time-saving extensions!

[proposal] Add `{{exprLast}}` template placeholder

Template Examples

{
  "name": "destruct",
  "body": "const { {{exprLast}}$1 } = {{exprRest}}",
  "when": [
    "expression",
  ]
},
{
  "name": "log2",
  "body": "console.log('{{exprLast}}', {{expr}})",
  "when": [
    "identifier",
    "expression",
    "function-call"
  ]
},

Usage Examples

defaultSettings.getGeneralSettings().clipboardLinkDetection.destruct
// => destruct
const { clipboardLinkDetection } = defaultSettings.getGeneralSettings()

(await fetchData()).customField.destruct
// => destruct
const { customField } = (await fetchData())

defaultSettings.general.clipboardLinkDetection.log2
// => log2
console.log('clipboardLinkDetection', defaultSettings.general.clipboardLinkDetection)

// update to include even more ideas

checkInterval.clear /* -> */ clearInterval(checkInterval)
closeTimeout.clear /* -> */ clearTimeout(closeTimeout) 

While {{exprLast}} can be useful in some scenarios like logging or usage for some custom function that accepts label as first argument. Another example would be usage with test() & capitalize filter.

However, for now I can imagine only one case, where {{exprRest}} can be useful (destruct example above).

`${{{expr}}}` does not work

  "postfix.customTemplates": [
    {
      "name": "log",
      "body": "console.log(`{{expr}}: ${{{expr}}}`)",
      "when": []
    }
  ],
  "postfix.customTemplate.mergeMode": "override"

then

name.log<Tab>

turns to

console.log(`name: `)

doesn't work in binary-expression when right side is identifier

Hi! I found it useful to write equality expression first and then using your binary-expression when case.
However I doesn't seem to work if right side of the expression is.

Example of useful snippet:

 {
    "name": "if",
    "body": "if ({{expr}}) ",
    "when": [
        "binary-expression"
    ]
},

Works well:

test === 'something'.if

Doesn't work well:

const userInput = 'something'
test === userInput.if

It doesn't even show the suggestion, however it is still binary expression, isn't it?

can't work in shorter syntax for method definitions on object

It works perfectly in normal way of method definitions for objects, like obj.fn1 and obj.fn2 , but can't work in shorter syntax for method definitions on objects, like obj.fn3.

const obj = {
  fn1: function (params) {
    params.return    //works
  },
  fn2: (params) => {
    params.return    //works
  },
  fn3(params) {
    params.return    //can't work
  },
};

My English expression may not be very good, please forgive me

Language-based context

This is a fantastic extension! I'd love to see it a bit more generalized with the ability to have language-dependent postfixes. For example, during ETL development, I'm often writing code like

[newColumn] = cast(db.dbo.sourceColumn as nvarchar(50))

and it would be really great to just be able to say [newColumn] = db.dbo.sourceColumn.nvar
But, I wouldn't want the templates to be available in other languages, and I definitely wouldn't need the other templates from javascript available when I'm editing a .sql file.