VSCode Custom Snippets: Powerful Feature That Boosts Your Productivity (Advanced)
Tags: vscode, productivity
Published: 2022-06-21 11:56:07

In [Part1](https://dev.to/jessewei/vscode-custom-snippets-powerful-feature-that-boosts-your-productivity-basic-2pb9-temp-slug-1997831) of this series, we learned,

- What snippets are in VSCode and why we need them.
- How to create simple snippets
- How to create more advanced snippets with multiple lines and placeholders.

In part 2, we will learn about **placeholder transform** and create a more sophisticated snippet using it.

- [Table of Contents](#table-of-contents)
- [Placeholder Transform](#placeholder-transform)
- [Variable Transform](#variable-transform)
- [Takeaways](#takeaways)

## Placeholder Transform

Sometimes when we replaced a placeholder with the target value, we want to make changes to it before inserting it to our code. For example, in React.js, it's a convention to use the `useState` hook like this,

```js
const [name, setName] = useState("");
```

The state variable (`name`) and the noun part of its updater function (`Name`) are normally the same except the latter is **capitalized**.

If we create a snippet like we did before, we get `setname` rather than the desired `setName`.

```json
"My useState": {
  "prefix": "us",
  "body": "const [${1:state}, set${1:state}] = useState($0)",
  "description": "My useState snippet"
},
```

![name substring in setname is not capitalized](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a04rw89pzo8xu9rfhq2e.gif) 

This is where **placeholder transform** comes in handy. In the example above, if we define the snippet like the following instead, we can get the desired result.

```json
"My useState": {
  "prefix": "us",
  "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0)",
  "description": "My useState snippet"
}
```

There's a lot going on here.

- First, we define a tab stop `$1` with a placeholder value `state`.
- We want `$1` to be used in the `set` part as well, only that the value of `$1` should be capitalized.
- So we perform a transformation by matching the whole string of `$1` (string `state`) using a regular expression `(.*)`.
- Then we reference the first capture group (here is the whole matched string `state`) and capitalize it with `${1:/capitalize}`.

![setname becomes setName](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99q3zmlvhfzli156id9a.gif)

## Variable Transform

VScode snippets also support *variable transform*. It works just like *placeholder transform* and shares the same syntax as *placeholder transform* with the only difference being the target to be transformed is a variable instead of a placeholder.

The variables can be used, however, are pre-defined so the use cases of variables are somewhat limited. But you may find yourself use it at certain point in your development.

For more information about variable transform, see [VSCode's official documentation](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variable-transforms).

## Takeaways

In part 2, we learned,

- When and how to use placeholder transform.
- Similar to placeholder transform is variable transform with limited pre-defined variables that can be used.