Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 25 additions & 87 deletions ggsql-vscode/README.md
Original file line number Diff line number Diff line change
@@ -1,104 +1,42 @@
# ggsql Syntax Highlighting for VSCode
# ggsql

Syntax highlighting for ggsql - SQL with declarative visualization based on Grammar of Graphics.
[ggsql](https://ggsql.org) is a SQL extension for declarative data visualization based on Grammar of Graphics principles. It combines SQL data queries with visualization specifications in a single, composable syntax.

## Features

- **Complete syntax highlighting** for ggsql queries
- **SQL keyword support** (SELECT, FROM, WHERE, JOIN, WITH, etc.)
- **ggsql clause highlighting**: (SCALE, PROJECT, FACET, LABEL, etc.)
- **Aesthetic highlighting** (x, y, color, size, shape, etc.)
- **String and number literals**
- **Comment support** (`--` and `/* */`)
- **Bracket matching and auto-closing**
- Complete syntax highlighting for ggsql queries.
- `.ggsql` file extension support.
- Language runtime integration for [Positron IDE](https://positron.posit.co).

## Installation

### From VSIX File (Recommended)

1. Download the latest `.vsix` file from the releases
2. Open VSCode
3. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
4. Click the "..." menu → "Install from VSIX..."
5. Select the downloaded `.vsix` file

Or via command line:
## Example

```bash
code --install-extension ggsql-0.1.0.vsix
```sql
SELECT date, revenue, region
FROM sales
WHERE year = 2024
VISUALISE date AS x, revenue AS y, region AS color
DRAW line
SCALE x SETTING breaks => 'month'
LABEL title => 'Sales by Region'
```

### From Source

```bash
# Clone the repository
git clone https://github.com/georgestagg/ggsql.git
cd ggsql/ggsql-vscode

# Install dependencies
npm install

# Install vsce (VSCode Extension Manager)
npm install -g @vscode/vsce

# Package the extension
vsce package
## Installation

# Install the generated .vsix file
code --install-extension ggsql-0.1.0.vsix
```
You can either install ggsql from the extension marketplace or download and install it manually:

### Development and Testing
1. Download [`ggsql.vsix`](https://github.com/posit-dev/ggsql/releases/latest/download/ggsql.vsix)
2. Install via the command line:

```bash
# Open extension folder in VSCode
cd ggsql-vscode
code .
# VS Code
code --install-extension ggsql.vsix

# Press F5 to launch Extension Development Host
# This opens a new VSCode window with the extension loaded
# Positron
positron --install-extension ggsql.vsix
```

### Test with Sample File

1. After installation, open the example file:

```bash
code ggsql-vscode/examples/sample.gsql
```

2. You should see syntax highlighting for:
- SQL keywords in one color
- ggsql keywords (VISUALISE, DRAW, SCALE, etc.) in another
- Geom types, aesthetics, scale types highlighted distinctly
- Comments, strings, and numbers properly highlighted

### Create a Test File

Create a new file with `.gsql` extension:

```sql
-- test.gsql
SELECT * FROM sales WHERE year = 2024
VISUALISE date AS x, revenue AS y
DRAW line
SCALE x SETTING type => 'date'
LABEL title => 'Sales Trends'
```

Verify that all keywords are highlighted correctly.

### Debug Highlighting Issues

If highlighting seems incorrect:

1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Run: "Developer: Inspect Editor Tokens and Scopes"
3. Click on any token to see its scope name
4. Compare with scopes defined in `syntaxes/ggsql.tmLanguage.json`

## About ggsql
Or install from within the editor: open the Extensions view, click the `...` menu, select "Install from VSIX...", and choose the downloaded file.

ggsql is a SQL extension for declarative data visualization. It combines SQL queries with Grammar of Graphics-inspired visualization specifications, enabling you to query data and define visualizations in a single, composable syntax.
## Learn More

ggsql extends SQL with a `VISUALISE` clause that acts as a terminal operation, producing visualizations instead of relational data. Global aesthetic mappings can be specified directly after VISUALISE (e.g., `VISUALISE date AS x, revenue AS y`).
Visit [ggsql.org](https://ggsql.org) to get started with ggsql, explore the documentation, and see more examples.
Binary file added ggsql-vscode/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions ggsql-vscode/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"url": "https://github.com/posit-dev/ggsql"
},
"license": "MIT",
"icon": "logo.png",
"contributes": {
"languages": [
{
Expand Down
Loading