Tab Autofill, Use It
Published: 2022-08-22 22:31:38

## Intro

I am in a class of people who just started coding for the first time. I noticed that a lot of the shortcuts and speedy things used in normal day to day programming are not intuitive to them.

If you are one of those students, hello! This guide is specifically for you. Feel free to ask me in-person if you want any more details on this stuff.

## Basic Tab Autofill
Type is slow, tab is fast.

Type the first 2-3 characters of anything, then use the <kbd>🠕</kbd>/<kbd>🠗</kbd> keys to select the exact thing you want.

### Basic Tab Autofill example

The following sequence of inputs, when done right, is significantly faster than typing the full thing.

<kbd>c</kbd><kbd>o</kbd>

![](https://i.imgur.com/MQRJ9Dt.png)

<kbd>🠗</kbd>

![](https://i.imgur.com/FbmtcGb.png)

<kbd>⇥ Tab</kbd>

![](https://i.imgur.com/oWDnpDn.png)

<kbd>.</kbd> <kbd>l</kbd>

![](https://i.imgur.com/KPFzh43.png)

<kbd>⇥ Tab</kbd>

![](https://i.imgur.com/rsTKGoD.png)

Take it slow to start with, your brain will pick it up and you will be doing tab autofill like a god.

## Tab Autofill - full statements

VSCode adds in a few extra tab autofill entries for making large functions.

The icon on the left of the autofill list entry can help you tell what its going to do:

| Icon        | Description |
| ----------- | ----------- |
| ![an isometric cube](https://i.imgur.com/M139jkO.png) | a function |
| ![a brick between square brackets](https://i.imgur.com/BTaUpEh.png) | a variable |
| ![a bunch of text or something](https://i.imgur.com/zFoQ8Y9.png) | statements |
| ![a square with a dotted underline](https://i.imgur.com/AO6Dt9S.png) | MAGIC FULL FUNCTION FILLING |

### for loops
depending on the type of thing you are looping through you select different things
![](https://i.imgur.com/XCXbAmd.png)

#### "standard" for loop example

<kbd>f</kbd><kbd>o</kbd><kbd>r</kbd>

![](https://i.imgur.com/4Zccv22.png)

<kbd>🠗</kbd><kbd>⇥ Tab</kbd>

![](https://i.imgur.com/xyVrGxX.png)

Once you press tab for on the *super magic full statement thing* you get put into "magic variable entry mode"

Note down the text is currently highlighted, think of a good name for it, then type it

In this case, I typically use `i` as the variable name for this type of for loop, so I press it

<kbd>i</kbd>

![](https://i.imgur.com/DzdwCyc.png)

Suddenly, all of the "index"es have turned to i

To enter the next variable of the *super magic full statement thing*, press tab, then type the name of it

for this example I thought of the excellent array name `example`, so I type that in and press tab again

<kbd>e</kbd><kbd>x</kbd><kbd>a</kbd><kbd>m</kbd><kbd>p</kbd><kbd>l</kbd><kbd>e</kbd>

![](https://i.imgur.com/S7RDyTN.png)

I then can press tab again to set a name for the inner element of this for loop, where I give it a great name:

![](https://i.imgur.com/GE2kQUN.png)

Pressing tab a final time will place your cursor inside the for loop

### other for loops

Looking at the other types of for loops we can quickly make gives a neat way to select them

![](https://i.imgur.com/XCXbAmd.png)

Sure you *could* press down repeatedly to get to the correct one for your usecase. Orrr, you can add a single letter and then press tab

### array foreach

<kbd>f</kbd><kbd>o</kbd><kbd>r</kbd><kbd>e</kbd> <kbd>⇥ Tab</kbd>

Use to access every element of an array, in order

![](https://i.imgur.com/nvPHA0L.png)

### object forin

Use this to access the value of every key of a object 

<kbd>f</kbd><kbd>o</kbd><kbd>r</kbd><kbd>i</kbd> <kbd>⇥ Tab</kbd>

![](https://i.imgur.com/eDFjXSw.png)

## Conclusion

Please look into doing stuff quicker.

I will be writing more blogs on this stuff.