VSCode Extension - Arrow Function Snippets
Tags: vscode, productivity, webdev, showdev
Published: 2021-10-31 16:44:51

I'm in love with [terminal alias](https://dev.to/equiman/useful-alias-for-zsh-1j8b), [keyboard shortcuts](https://dev.to/equiman/javascript-operators-with-autohotkey-37kn), [emmet](https://code.visualstudio.com/docs/editor/emmet) and [VSCode snippets](https://dev.to/equiman/vscode-react-flavored-134h#snippets) for development.

I recently found myself writing a lot of JS arrow functions in a project and previously I've created an [AutoHotKey script](https://dev.to/equiman/javascript-operators-with-autohotkey-37kn) to write it with a combination of keys on my keyboard, but it was not enough.

So I've decided to search for a snippets extension for Arrow Functions and the only one that I found doesn't cover my needs and that's how was born [Arrow Functions Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.arrow-function-snippets) my very first VSCode extension.

![Arrow Function Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp20kgyx1a77saz79bmn.png)

I'm started only with arrow functions in mind, but actually also covers variable creation of different types and destructuring in Javascript, Typescript, React, and Vue. 

You are welcome to try it! 👩‍💻👨‍💻

---

## Examples

Create a named arrow function combining `cv` and `af`

![Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iwtn5p1eh44ws0qmb9l.gif)

Create a response for `fetch` promise with `afrj` and `afrd`

![Promise](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9oby4raayoqrukotgpl.gif)

---

## Snippets

Below is a list of all available snippets and the triggers of each one. The **→** means the `TAB` key and `█` means the final cursor position.

### Arrow Function

|  Trigger | Description                            | Result JS/TS                                                     |
| -------: | -------------------------------------- | ---------------------------------------------------------------- |
|    `af→` | implicit return without arg(s          | `() => █`                                                        |
|   `afa→` | implicit return with arg(s)            | `(arg) => █`                                                     |
|  `afad→` | implicit return with arg destructuring | `({prop, prop}) => █`                                            |
|   `afo→` | implicit return object                 | `() => ({prop: value█})`                                         |
|  `afoa→` | implicit return object with arg(s)     | `(arg) => ({prop: value█})`                                      |
|   `afe→` | explicit return                        | <code>() => {<br/>&nbsp;&nbsp;return █<br/> }</code>             |
|  `afea→` | explicit return with arg(s)            | <code>(arg) => {<br/>&nbsp;&nbsp;return █<br/> }</code>          |
| `afead→` | explicit return with arg destructuring | <code>({prop, prop}) => {<br/>&nbsp;&nbsp;return █<br/> }</code> |
|  `afee→` | explicit empty                         | <code>() => {<br/>&nbsp;&nbsp;█<br/> }</code>                    |
| `afeea→` | explicit empty with arg(s)             | <code>(arg) => {<br/>&nbsp;&nbsp;█<br/> }</code>                 |
|   `afp→` | explicit with parentheses              | <code>() => {<br/>&nbsp;&nbsp;(█)<br/> }</code>                  |
|  `afpa→` | explicit with parentheses and arg(s)   | <code>(arg) => {<br/>&nbsp;&nbsp;(█)<br/> }</code>               |
|  `iiaf→` | immediately invoque                    | `(() => █)()`                                                    |

### Promises

|  Trigger | Description                         | Result JS/TS                                                                  |
| -------: | ----------------------------------- | ----------------------------------------------------------------------------- |
|   `afr→` | implicit return response            | `(response) => █`                                                             |
|  `afrj→` | implicit return response json       | `(response) => response.json()█`                                              |
|  `afrd→` | implicit return response data       | `(response) => response.data█`                                                |
|  `afer→` | explicit return response            | <code>(response) => {<br/>&nbsp;&nbsp;return █<br/> }</code>                  |
| `aferj→` | explicit return response json       | <code>(response) => {<br/>&nbsp;&nbsp;return response.json()<br/> }█</code>   |
| `aferd→` | explicit return response data       | <code>(response) => {<br/>&nbsp;&nbsp;return response.data<br/> }█</code>     |

### Arrays

|  Trigger  | Description             | Result JS/TS                                                                             |
| --------: | ------------------------| ---------------------------------------------------------------------------------------- |
| `arfeq→`  | filter equal            | `const newArray = array.filter((element) => element === value)█`                         |
| `arfne→`  | filter not equal        | `const newArray = array.filter((element) => element !== value)█`                         |
| `arfoeq→` | filter object equal     | `const newArray = array.filter((element) => element.prop === value)█`                    |
| `arfone→` | filter object not equal | `const newArray = array.filter((element) => element.prop !== value)█`                    |
| `arsna→`  | sort number ascending   | `array.sort((a, b) => a - b)█`                                                           |
| `arsnd→`  | sort number descending  | `array.sort((a, b) => b - a)█`                                                           |
| `aruv→`   | unique values           | `const newArray = array.filter((current, index, arr) => arr.indexOf(current) == index)█` |

### Functions

|  Trigger | Description                                     | Result JS                                                                | Result TS                                                                      |
| -------: | ----------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
|   `edaf→` | export default anonymous arrow function        | <code>export default () => {<br/>&nbsp;&nbsp;█<br/> }</code>             | <code>export default () => {<br/>&nbsp;&nbsp;█<br/> }</code>                   |
|  `edaaf→` | export default async anonymous arrow function  | <code>export default async () => {<br/>&nbsp;&nbsp;█<br/> }</code>       | <code>export default async () => {<br/>&nbsp;&nbsp;█<br/> }</code>             |
|    `caf→` | const arrow function                           | <code>const name = () => {<br/>&nbsp;&nbsp;█<br/> }</code>               | <code>const name = () => {<br/>&nbsp;&nbsp;█<br/> }</code>                     |
|   `ecaf→` | export const arrow function                    | <code>export const name = () => {<br/>&nbsp;&nbsp;█<br/> }</code>        | <code>export const name = () => {<br/>&nbsp;&nbsp;█<br/> }</code>              |
|   `caaf→` | const async arrow function                     | <code>const name = async () => {<br/>&nbsp;&nbsp;█<br/> }</code>         | <code>const name = async () => {<br/>&nbsp;&nbsp;█<br/> }</code>               |
|  `ecaaf→` | export const async arrow function              | <code>export const name = async () => {<br/>&nbsp;&nbsp;█<br/> }</code>  | <code>export const name = async () => {<br/>&nbsp;&nbsp;█<br/> }</code>        |
|   `caft→` | const arrow function with type                 |                                                                          | <code>const name = () : type => {<br/>&nbsp;&nbsp;█<br/> }</code>              |
|  `ecaft→` | export const arrow function with type          |                                                                          | <code>export const name = () : type => {<br/>&nbsp;&nbsp;█<br/> }</code>       |
|  `caaft→` | const async arrow function with type           |                                                                          | <code>const name = async () : type => {<br/>&nbsp;&nbsp;█<br/> }</code>        |
| `ecaaft→` | export const async arrow function with type    |                                                                          | <code>export const name = async () : type => {<br/>&nbsp;&nbsp;█<br/> }</code> |

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)