Flux VS Code extension (#1858)
* WIP vscode plugin * WIP vs code extension, added keybind shortcode * review draft of flux vscode ext, closes #678, closes #1466, closes #1781 * fixed typos in vs code page descriptions * fixed typo in flux vs code docs * addressed PR feedback for VS Code docpull/1873/head
Scott Anderson
GitHub
parent
86fe195c4d
commit
637944c1b6
|
|
@ -333,6 +333,27 @@ WHERE time > now() - 15m
|
|||
{{< /code-tabs-wrapper >}}
|
||||
~~~
|
||||
|
||||
### Keybinds
|
||||
Use the `{{< keybind >}}` shortcode to include OS-specific keybindings/hotkeys.
|
||||
The following parameters are available:
|
||||
|
||||
- mac
|
||||
- linux
|
||||
- win
|
||||
- all
|
||||
- other
|
||||
|
||||
```md
|
||||
<!-- Provide keybinding for one OS and another for all others -->
|
||||
{{< keybind mac="⇧⌘P" other="Ctrl+Shift+P" >}}
|
||||
|
||||
<!-- Provide a keybind for all OSs -->
|
||||
{{< keybind all="Ctrl+Shift+P" >}}
|
||||
|
||||
<!-- Provide unique keybindings for each OS -->
|
||||
{{< keybind mac="⇧⌘P" linux="Ctrl+Shift+P" win="Ctrl+Shift+Alt+P" >}}
|
||||
```
|
||||
|
||||
### Related content
|
||||
Use the `related` frontmatter to include links to specific articles at the bottom of an article.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
// Dynamically update keybindings or hotkeys
|
||||
function getPlatform() {
|
||||
if (/Mac/.test(navigator.platform)) {
|
||||
return "osx"
|
||||
} else if (/Win/.test(navigator.platform)) {
|
||||
return "win"
|
||||
} else if (/Linux/.test(navigator.platform)) {
|
||||
return "linux"
|
||||
} else {
|
||||
return "other"
|
||||
}
|
||||
}
|
||||
|
||||
const platform = getPlatform()
|
||||
|
||||
function addOSClass(osClass) {
|
||||
$('.keybinding').addClass(osClass)
|
||||
}
|
||||
|
||||
function updateKeyBindings() {
|
||||
$('.keybinding').each(function() {
|
||||
var osx = $(this).data("osx")
|
||||
var linux = $(this).data("linux")
|
||||
var win = $(this).data("win")
|
||||
|
||||
if (platform === "other") {
|
||||
if (win != linux) {
|
||||
var keybind = '<code class="osx">' + osx + '</code> for macOS, <code>' + linux + '</code> for Linux, and <code>' + win + '</code> for Windows';
|
||||
} else {
|
||||
var keybind = '<code>' + linux + '</code> for Linux and Windows and <code class="osx">' + osx + '</code> for macOS';
|
||||
}
|
||||
} else {
|
||||
var keybind = '<code>' + $(this).data(platform) + '</code>'
|
||||
}
|
||||
|
||||
$(this).html(keybind)
|
||||
})
|
||||
}
|
||||
|
||||
addOSClass(platform)
|
||||
updateKeyBindings()
|
||||
|
|
@ -106,6 +106,7 @@
|
|||
"article/expand",
|
||||
"article/feedback",
|
||||
"article/flex",
|
||||
"article/keybinding",
|
||||
"article/lists",
|
||||
"article/note",
|
||||
"article/pagination-btns",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
$osxFont: -apple-system, BlinkMacSystemFont, $rubik, 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
.keybinding {
|
||||
font-family: $rubik;
|
||||
code { font-family: $rubik; }
|
||||
&.osx code {font-family: $osxFont;}
|
||||
code.osx {font-family: $osxFont;}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: Use the Flux VS Code extension
|
||||
seotitle: Use the Flux Visual Studio Code extension
|
||||
description: >
|
||||
The [Flux Visual Studio Code (VS Code) extension](https://marketplace.visualstudio.com/items?itemName=influxdata.flux)
|
||||
provides Flux syntax highlighting, autocompletion, and a direct InfluxDB Cloud server
|
||||
integration that lets you run Flux scripts natively and show results in VS Code.
|
||||
weight: 103
|
||||
menu:
|
||||
influxdb_cloud:
|
||||
name: Use the Flux VS Code extension
|
||||
parent: Tools & integrations
|
||||
---
|
||||
|
||||
{{< duplicate-oss >}}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
title: Use the Flux VS Code extension
|
||||
seotitle: Use the Flux Visual Studio Code extension
|
||||
description: >
|
||||
The [Flux Visual Studio Code (VS Code) extension](https://marketplace.visualstudio.com/items?itemName=influxdata.flux)
|
||||
provides Flux syntax highlighting, autocompletion, and a direct InfluxDB OSS server
|
||||
integration that lets you run Flux scripts natively and show results in VS Code.
|
||||
weight: 60
|
||||
menu:
|
||||
influxdb_1_8:
|
||||
name: Flux VS Code extension
|
||||
parent: Tools
|
||||
v2: /influxdb/v2.0/tools/flux-vscode/
|
||||
---
|
||||
|
||||
The [Flux Visual Studio Code (VS Code) extension](https://marketplace.visualstudio.com/items?itemName=influxdata.flux)
|
||||
provides Flux syntax highlighting, autocompletion, and a direct InfluxDB server
|
||||
integration that lets you run Flux scripts natively and show results in VS Code.
|
||||
|
||||
{{% note %}}
|
||||
#### Enable Flux in InfluxDB 1.8
|
||||
To use the Flux VS Code extension with InfluxDB 1.8, ensure Flux is enabled in
|
||||
your InfluxDB configuration file.
|
||||
For more information, see [Enable Flux](/influxdb/v1.8/flux/installation/).
|
||||
{{% /note %}}
|
||||
|
||||
##### On this page
|
||||
- [Install the Flux VS Code extension](#install-the-flux-vs-code-extension)
|
||||
- [Connect to InfluxDB 1.8](#connect-to-influxdb-18)
|
||||
- [Query InfluxDB from VS Code](#query-influxdb-from-vs-code)
|
||||
- [Explore your schema](#explore-your-schema)
|
||||
- [Debug Flux queries](#debug-flux-queries)
|
||||
- [Upgrade the Flux extension](#upgrade-the-flux-extension)
|
||||
- [Flux extension commands](#flux-extension-commands)
|
||||
|
||||
## Install the Flux VS Code extension
|
||||
The Flux VS Code extension is available in the **Visual Studio Marketplace**.
|
||||
For information about installing extensions from the Visual Studio marketplace,
|
||||
see the [Extension Marketplace documentation](https://code.visualstudio.com/docs/editor/extension-gallery).
|
||||
|
||||
## Connect to InfluxDB 1.8
|
||||
To create an InfluxDB connection in VS Code:
|
||||
|
||||
1. Open the **VS Code Command Pallet** ({{< keybind mac="⇧⌘P" other="Ctrl+Shift+P" >}}).
|
||||
2. Run `influxdb.addConnection`.
|
||||
3. Provide the required connection credentials:
|
||||
- **Type:** type of InfluxDB data source. Select **InfluxDB v1**.
|
||||
- **Name:** unique identifier for your InfluxDB connection.
|
||||
- **Hostname and Port:** InfluxDB host and port.
|
||||
4. Click **Test** to test the connection.
|
||||
5. Once tested successfully, click **Save**.
|
||||
|
||||
## Query InfluxDB from VS Code
|
||||
1. Write your Flux query in a new VS Code file.
|
||||
2. Save your Flux script with the `.flux` extension or set the
|
||||
[VS Code Language Mode](https://code.visualstudio.com/docs/languages/overview#_changing-the-language-for-the-selected-file) to **Flux**.
|
||||
3. Execute the query with the `influxdb.runQuery` command or {{< keybind mac="⌃⌥E" other="Ctrl+Alt+E" >}}.
|
||||
4. Query results appear in a new tab. If query results do not appear, see [Debug Flux queries](#debug-flux-queries).
|
||||
|
||||
## Explore your schema
|
||||
After you've configured an InfluxDB connection, VS Code provides an overview of buckets,
|
||||
measurements, and tags in your InfluxDB organization.
|
||||
Use the **InfluxDB** pane in VS code to explore your schema.
|
||||
|
||||
{{< img-hd src="/img/influxdb/1-8-tools-vsflux-explore-schema.png" alt="Explore your InfluxDB schema in VS Code" />}}
|
||||
|
||||
## Debug Flux queries
|
||||
To view errors returned from Flux script executions, click the **Errors and Warnings**
|
||||
icons in the bottom left of your VS Code window, and then select the **Output** tab in the debugging pane.
|
||||
|
||||
{{< img-hd src="/img/influxdb/2-0-tools-vsflux-errors-warnings.png" alt="VS Code errors and warnings"/>}}
|
||||
|
||||
## Upgrade the Flux extension
|
||||
VS Code auto-updates extensions by default, but you are able to disable auto-update.
|
||||
If you disable auto-update, [manually update your VS Code Flux extension](https://code.visualstudio.com/docs/editor/extension-gallery#_update-an-extension-manually).
|
||||
After updating the extension, reload your VS Code window ({{< keybind mac="⇧⌘P" other="Ctrl+Shift+P" >}},
|
||||
and then `Reload Window`) to initialize the updated extensions.
|
||||
|
||||
## Flux extension commands
|
||||
|
||||
| Command | Description | Keyboard shortcut | Menu context |
|
||||
|:------- |:----------- |:-----------------: | ------------: |
|
||||
| `influxdb.refresh` | Refresh | | |
|
||||
| `influxdb.addConnection` | Add Connection | | view/title |
|
||||
| `influxdb.runQuery` | Run Query | {{< keybind mac="⌃⌥E" other="Ctrl+Alt+E" >}} | editor/context |
|
||||
| `influxdb.removeConnection` | Remove Connection | | view/item/context |
|
||||
| `influxdb.switchConnection` | Switch Connection | | |
|
||||
| `influxdb.editConnection` | Edit Connection | | view/item/context |
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
title: Use the Flux VS Code extension
|
||||
seotitle: Use the Flux Visual Studio Code extension
|
||||
description: >
|
||||
The [Flux Visual Studio Code (VS Code) extension](https://marketplace.visualstudio.com/items?itemName=influxdata.flux)
|
||||
provides Flux syntax highlighting, autocompletion, and a direct InfluxDB OSS server
|
||||
integration that lets you run Flux scripts natively and show results in VS Code.
|
||||
weight: 103
|
||||
menu:
|
||||
influxdb_2_0:
|
||||
name: Use the Flux VS Code extension
|
||||
parent: Tools & integrations
|
||||
---
|
||||
|
||||
The [Flux Visual Studio Code (VS Code) extension](https://marketplace.visualstudio.com/items?itemName=influxdata.flux)
|
||||
provides Flux syntax highlighting, autocompletion, and a direct InfluxDB server
|
||||
integration that lets you run Flux scripts natively and show results in VS Code.
|
||||
|
||||
##### On this page
|
||||
- [Install the Flux VS Code extension](#install-the-flux-vs-code-extension)
|
||||
- [Connect to InfluxDB](#connect-to-influxdb)
|
||||
- [Query InfluxDB from VS Code](#query-influxdb-from-vs-code)
|
||||
- [Explore your schema](#explore-your-schema)
|
||||
- [Debug Flux queries](#debug-flux-queries)
|
||||
- [Upgrade the Flux extension](#upgrade-the-flux-extension)
|
||||
- [Flux extension commands](#flux-extension-commands)
|
||||
|
||||
## Install the Flux VS Code extension
|
||||
The Flux VS Code extension is available in the **Visual Studio Marketplace**.
|
||||
For information about installing extensions from the Visual Studio marketplace,
|
||||
see the [Extension Marketplace documentation](https://code.visualstudio.com/docs/editor/extension-gallery).
|
||||
|
||||
## Connect to InfluxDB
|
||||
To create an InfluxDB connection in VS Code:
|
||||
|
||||
1. Open the **VS Code Command Pallet** ({{< keybind mac="⇧⌘P" other="Ctrl+Shift+P" >}}).
|
||||
2. Run `influxdb.addConnection`.
|
||||
3. Provide the required connection credentials:
|
||||
- **Type:** type of InfluxDB data source. Select **InfluxDB v2**.
|
||||
- **Name:** unique identifier for your InfluxDB connection.
|
||||
- **Hostname and Port:** InfluxDB host and port
|
||||
(see [InfluxDB OSS URLs](/influxdb/v2.0/reference/urls/) or [InfluxDB Cloud regions](/influxdb/cloud/reference/regions/)).
|
||||
- **Token:** InfluxDB [authentication token](/influxdb/v2.0/security/tokens/).
|
||||
- **Organization:** InfluxDB organization name.
|
||||
4. Click **Test** to test the connection.
|
||||
5. Once tested successfully, click **Save**.
|
||||
|
||||
## Query InfluxDB from VS Code
|
||||
1. Write your Flux query in a new VS Code file.
|
||||
2. Save your Flux script with the `.flux` extension or set the
|
||||
[VS Code Language Mode](https://code.visualstudio.com/docs/languages/overview#_changing-the-language-for-the-selected-file) to **Flux**.
|
||||
3. Execute the query with the `influxdb.runQuery` command or {{< keybind mac="⌃⌥E" other="Ctrl+Alt+E" >}}.
|
||||
4. Query results appear in a new tab. If query results do not appear, see [Debug Flux queries](#debug-flux-queries).
|
||||
|
||||
## Explore your schema
|
||||
After you've configured an InfluxDB connection, VS Code provides an overview of buckets,
|
||||
measurements, and tags in your InfluxDB organization.
|
||||
Use the **InfluxDB** pane in VS code to explore your schema.
|
||||
|
||||
{{< img-hd src="/img/influxdb/2-0-tools-vsflux-explore-schema.png" alt="Explore your InfluxDB schema in VS Code" />}}
|
||||
|
||||
## Debug Flux queries
|
||||
To view errors returned from Flux script executions, click the **Errors and Warnings**
|
||||
icons in the bottom left of your VS Code window, and then select the **Output** tab in the debugging pane.
|
||||
|
||||
{{< img-hd src="/img/influxdb/2-0-tools-vsflux-errors-warnings.png" alt="VS Code errors and warnings"/>}}
|
||||
|
||||
## Upgrade the Flux extension
|
||||
VS Code auto-updates extensions by default, but you are able to disable auto-update.
|
||||
If you disable auto-update, [manually update your VS Code Flux extension](https://code.visualstudio.com/docs/editor/extension-gallery#_update-an-extension-manually).
|
||||
After updating the extension, reload your VS Code window ({{< keybind mac="⇧⌘P" other="Ctrl+Shift+P" >}},
|
||||
and then `Reload Window`) to initialize the updated extensions.
|
||||
|
||||
## Flux extension commands
|
||||
|
||||
| Command | Description | Keyboard shortcut | Menu context |
|
||||
|:------- |:----------- |:-----------------: | ------------: |
|
||||
| `influxdb.refresh` | Refresh | | |
|
||||
| `influxdb.addConnection` | Add Connection | | view/title |
|
||||
| `influxdb.runQuery` | Run Query | {{< keybind mac="⌃⌥E" other="Ctrl+Alt+E" >}} | editor/context |
|
||||
| `influxdb.removeConnection` | Remove Connection | | view/item/context |
|
||||
| `influxdb.switchConnection` | Switch Connection | | |
|
||||
| `influxdb.editConnection` | Edit Connection | | view/item/context |
|
||||
|
|
@ -5,7 +5,8 @@
|
|||
{{ $influxdbURLs := resources.Get "js/influxdb-url.js" }}
|
||||
{{ $featureCallouts := resources.Get "js/feature-callouts.js" }}
|
||||
{{ $notifications := resources.Get "js/notifications.js" }}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs $featureCallouts $notifications | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $keybindings := resources.Get "js/keybindings.js" }}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs $featureCallouts $notifications $keybindings | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
|
||||
<!-- Load cloudUrls array -->
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{{- $scratch := newScratch -}}
|
||||
{{- with .Get "other" -}}{{- $scratch.Set "default" . -}}{{- end -}}
|
||||
{{- with .Get "all" -}}{{- $scratch.Set "default" . -}}{{- end -}}
|
||||
{{- $default := $scratch.Get "default" | default "" -}}
|
||||
{{- $mac := .Get "mac" | default $default -}}
|
||||
{{- $win := .Get "win" | default $default -}}
|
||||
{{- $linux := .Get "linux" | default $default -}}
|
||||
<span class="keybinding" data-osx="{{ $mac }}" data-win="{{ $win }}" data-linux="{{ $linux }}"><code>{{ $default }}</code></span>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Loading…
Reference in New Issue