Styjun

I have a React Native snippet that is export default connect(mapStateToProps, mapDispatchToProps)($0) where the cursor appears in the final parens so I can enter the class name.

Assuming I'm always using this snippet in a file that has a class defined in it (class ClassName extends Component {), is there a way to write the snippet so that it automatically fills in the current ClassName? Using regexp or something, to start.

For example, given this code at the beginning of the file:

import React, Component from "react";
import connect from "react-redux";

class MyClass extends Component {
 ...
 ...

When I type, inside that file, my snippet shortcut for what is currently export default connect(mapStateToProps, mapDispatchToProps)($0) (which gives me that code with the cursor where the $0 is) I want it to instantly get this:

export default connect(mapStateToProps, mapDispatchToProps)(MyClass)

Perhaps it's something like this:

"body": "export default connect(mapStateToProps, mapDispatchToProps)(/class (w+) extends/)"```

You can't put a regular expression into a snippet except to transform one of the built-in variables. If MyClass was already on the clipboard you could just use $CLIPBOARD in your snippet:

"body": "export default connect(mapStateToProps, mapDispatchToProps)($CLIPBOARD)"

Assuming that you don't to always have the class name always on the clipboard there is another tricky way to find the class name, select it and copy it to the clipboard so it can be used in a snippet as $CLIPBOARD.

First, you will need a macro extension like multi-command.

Second, this setting in settings.json:

"multiCommand.commands": [
 
 "command": "multiCommand.regexSnippet", // name of the macro to use a keybinding
 "interval": 1000, // delay between the following commands, left long to watch it work
 // you don't need any interval, that option can be commented out

 "sequence": [
 // first command, on a blank line type out a regular expression
 
 "command": "type",
 "args": 
 "text": "(?<=class )(.*)(?= extends)"
 
 ,

 // select and cut that regex
 "cursorHomeSelect",
 "editor.action.clipboardCutAction",

 // now $CLIPBOARD has your class name on it

 // open the find widget
 "actions.find",

 // "toggleFindRegex", // you should have the find regex option already selected

 // paste the regex into the find widget
 "editor.action.clipboardPasteAction",

 // select and copy the match that the regex finds
 "editor.action.selectAllMatches",
 "editor.action.clipboardCopyAction",

 // go back to where you were in the code to insert the snippet
 "workbench.action.navigateToLastEditLocation",

 
 "command": "editor.action.insertSnippet",
 "args": 

 // "snippet": "export default $1($2, $3)($CLIPBOARD)",
 // use the above if those values are not pre-determined like in your question

 "snippet": "export default connect(mapStateToProps, mapDispatchToProps)($CLIPBOARD)"
 
 
 ]
 
],

Third, some keybinding to trigger this macro:

 "key": "shift-alt-2",
 "command": "multiCommand.regexSnippet"
,

Note: you are triggering a macro, not a snippet - so no intellisense.

Here is a gif with the long interval so you can see the steps in action ("Toggle Screencast Mode" to see the command keys):

A couple of important points:

1. You can delete or comment out the interval option and it will be instanteous.




2. The macro assumes you have the find regex option selected already - which I always have it so. Unfortunately, there is a command to toggle the find regex option but none to insure that it is on.




3. The macro appears huge but it is half explanatory comments.




4. Obviously, if you have more than the oneclass MyClass extends in the file this macro might not work.




5. You must trigger the macro (with a keybinding of your choice) on a blank line - otherwise the initial selection of the regex will be incorrect.

Let me know if this works for you.