QueryScope - Smart SQL Block Highlighter

QueryScope is a Visual Studio Code extension designed to enhance your SQL coding experience by automatically detecting and highlighting SQL blocks. Whether you're writing SELECT, INSERT, UPDATE, or DELETE statements, QueryScope provides a visual outline to help you focus on your current query - similar to how DataGrip shows a green frame around SQL query blocks.

✨ Features

🔍 Smart SQL Block Detection

• Automatic Detection: Identifies SQL blocks from keywords (SELECT, INSERT, UPDATE, DELETE, WITH, CREATE, DROP, ALTER, TRUNCATE, MERGE) to semicolons
• Multi-language Support: Works in SQL files and embedded SQL in JavaScript, TypeScript, Python, PHP, Java, and C#
• Intelligent Parsing: Handles complex queries with subqueries, CTEs, and multi-line statements

🎨 Visual Highlighting

• Customizable Borders: Choose from solid, dashed, or dotted border styles
• Color Customization: Set your preferred highlight color (default: #00FF7F)
• Glow Effects: Optional glow effect for enhanced visibility
• Real-time Updates: Highlights update as you move your cursor

📊 Query Information

• Hover Tooltips: Shows query type, line numbers, and query preview
• Status Bar Integration: Displays current query type and line count
• Query Preview: First 100 characters of the query in tooltips

⚡ Productivity Features

• Auto-highlight: Automatically highlights SQL blocks on cursor movement
• Manual Control: Commands to manually highlight or clear highlights
• Run Query: Copy highlighted query to clipboard for execution
• Keyboard Shortcuts: Quick access via Ctrl+Shift+H and Ctrl+Shift+R

🚀 Installation

From Source

1. Clone the repository:

   git clone https://github.com/yourusername/queryscope.git
   

2. Navigate to the project directory:

   cd queryscope
   

3. Install dependencies:

   npm install
   

4. Compile the extension:

   npm run compile
   

5. Press F5 in VS Code to launch the extension in a new Extension Development Host window

From Marketplace (Coming Soon)

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "QueryScope"
4. Click Install

🛠️ Usage

Basic Usage

1. Open a file containing SQL code (.sql, .js, .ts, .py, etc.)
2. Click anywhere inside a SQL statement
3. The entire SQL block will be highlighted with a colored border
4. View query information in the hover tooltip and status bar

Commands

• QueryScope: Highlight SQL Block (Ctrl+Shift+H): Manually highlight the current SQL block
• QueryScope: Run Current Query (Ctrl+Shift+R): Copy the highlighted query to clipboard
• QueryScope: Clear Highlight: Remove current highlighting

Supported SQL Statements

• SELECT - Data retrieval queries
• INSERT - Data insertion statements
• UPDATE - Data modification statements
• DELETE - Data deletion statements
• WITH - Common Table Expressions (CTEs)
• CREATE - Table/index creation statements
• DROP - Object deletion statements
• ALTER - Schema modification statements
• TRUNCATE - Table truncation statements
• MERGE - Merge/upsert statements

⚙️ Configuration

Access settings via File → Preferences → Settings → Extensions → QueryScope

Available Settings

Example Configuration

{
    "queryscope.highlightColor": "#ff6b6b",
    "queryscope.borderStyle": "dashed",
    "queryscope.borderWidth": "3px",
    "queryscope.enableGlow": true,
    "queryscope.autoHighlight": true,
    "queryscope.showTooltip": true
}

🎯 Use Cases

Database Development

• Quickly identify and focus on specific SQL queries in large files
• Visual separation of multiple queries in migration scripts
• Enhanced readability when working with complex stored procedures

Application Development

• Highlight embedded SQL in JavaScript, Python, or other languages
• Identify SQL injection risks by visualizing dynamic queries
• Code review assistance for database-related code

Data Analysis

• Navigate through complex analytical queries
• Identify different parts of ETL scripts
• Visual assistance when working with data transformation queries

🔧 Development

Project Structure

queryscape-extension/
├── src/
│   ├── extension.ts          # Main extension entry point
│   ├── sqlBlockDetector.ts   # SQL block detection logic
│   ├── highlighter.ts        # Visual highlighting implementation
│   └── types/
│       └── index.ts          # TypeScript type definitions
├── package.json              # Extension manifest
├── tsconfig.json            # TypeScript configuration
└── README.md                # This file

Building and Testing

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch for changes during development
npm run watch

# Run extension in development mode
# Press F5 in VS Code or use the "Run Extension" debug configuration

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Add tests if applicable
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

🚀 Future Enhancements

• Multi-database Support: Syntax highlighting for PostgreSQL, MySQL, SQL Server dialects
• Query Execution: Direct integration with database connections
• Performance Analysis: Query execution plan visualization
• Code Completion: SQL-aware autocomplete within highlighted blocks
• Syntax Validation: Real-time SQL syntax checking
• Query History: Track and manage previously highlighted queries
• Block Folding: Collapse/expand SQL blocks
• Language Extensions: Support for more languages with embedded SQL

🔗 Similar Extensions & Inspirations

• DataGrip: The block frame feature that inspired this extension
• Bracket Pair Colorizer: Visual enhancement for code blocks
• SQLTools: Database management and query execution
• vscode-sql-formatter: SQL code formatting

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: your-email@example.com

🌟 Acknowledgments

• Inspired by JetBrains DataGrip's SQL block highlighting
• Built with the VS Code Extension API
• Thanks to the VS Code community for extension development resources

Happy SQL coding with QueryScope! 🔍✨