# Flux VS Code Extension

Source: Nidhinkumar

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055309319/ff532910-4392-468f-9d56-6377a4674fb5.gif align="left")

Quick Read

### Overview

In, this blog we will see how to install the Flux Extension in VS Code and make connections to InfluxDB and write queries.

### Prerequisite

If you are new to InfluxDB check out the below blogs before reading this one 👇

[**InfluxDB (TICK Stack) — Part1**  
*Overview*medium.com](https://medium.com/codingtown/influxdb-tick-stack-part1-28bd04d10a18)

* InfluxDB with some data
    
* VS Code Text Editor
    

### Objectives

1. Installing Flux Extension
    
2. Connecting InfluxDB with VS Code
    
3. Writing Flux Query in VS Code
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055311303/159af1d2-fa1c-4216-8379-220afb13d8b6.gif align="left")

### 1\. Installing Flux Extension

Open VS Code Editor and then click Extensions and then type Flux like below

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055313951/c66a0b60-7a5d-4d9e-9270-c096095021eb.png align="left")

Flux Extension

Click **Install** to install the Flux extension

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055315909/d4c8cf41-d80d-479d-9fa1-4c6d05d4995c.png align="left")

Flux Extension

Once the extension is installed successfully you could see the InfluxDB on the sidebar like the below image

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055317970/96d50b7d-747c-4c2c-ae10-68834603945a.png align="left")

InfluxDB

Click the **‘+’** button to add a new connection.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055319789/0b55d8a6-e3a9-4645-a61d-0cbb6ad1d696.gif align="left")

### 2\. Connecting InfluxDB with VS Code

Now, we will connect the InfluxDB in VS Code. Click the ‘+’ button or by using the command palette **(Ctrl + Shift + p)** and then click the Add new connection.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055321741/b97b2d08-333c-449f-8e6a-cfe32c7d3344.png align="left")

Add new connection

Now select the connection and then add the InfluxDB token and then click the **Test** connection to check the connection.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055323694/de4553ab-6f3e-40d1-b1b3-f6bd6ed1f7d3.png align="left")

Test Connection

Once the connection is successful you could see the buckets and measurements that are available in the given organization like below

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055325542/420a7ffa-2de8-410c-b623-3d7f28dcf72c.png align="left")

Influx Buckets

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055327304/935bad3d-f401-4c45-88d1-91e77d2a054c.gif align="left")

### 3\. Writing Flux Query in VS Code

Now, will write the Flux query to check whether we can get the data from InfluxDB.

Create a new file in VS Code Editor with extension as .flux and write your flux query.

```javascript
from(bucket: "systemmetric")
|> range(start: -1h, stop: now())
|> filter(fn: (r) => r["_measurement"] == "cpu")
|> filter(fn: (r) => r["cpu"] == "cpu-total")
|> filter(fn: (r) => r["_field"] == "usage_user")
|> aggregateWindow(every: 1h, fn: mean, createEmpty: false)
|> yield(name: "mean")
```

Now run the flux query using the command **Ctrl + Alt + E**. Now you could see the result like below.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055329173/81db0eeb-ecd0-459b-932d-c00859c4ad1d.png align="left")

Flux Output

### Video Link

<iframe src="https://www.youtube.com/embed/yI5zCkhk6a0?feature=oembed" width="700" height="393"></iframe>

### Congratulations!

You have learned how to use the Flux Extension in VS Code. Will Catch you up in a new post till then Happy Learning:)