### Vue.js Single-File Component Example

Source: https://context7.com/dcloudio/hbuilderx/llms.txt

Demonstrates a basic Vue.js single-file component (SFC) structure, showcasing template, script, and style sections. This highlights HBuilderX's specialized support for Vue.js development with enhanced syntax highlighting and component recognition.

```vue
<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'Hello HBuilderX'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

<style scoped>
.app {
  padding: 20px;
}
</style>
```

--------------------------------

### JSON Configuration and Data Structure

Source: https://context7.com/dcloudio/hbuilderx/llms.txt

Provides an example of a JSON structure commonly used for project configurations or API data. HBuilderX enhances JSON editing with syntax validation, formatting, and intelligent navigation.

```json
{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^3.0.0",
    "axios": "^1.0.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "config": {
    "api": {
      "baseUrl": "https://api.example.com",
      "timeout": 5000
    }
  }
}
```

--------------------------------

### Keymap Configuration for Editor Transition

Source: https://context7.com/dcloudio/hbuilderx/llms.txt

Illustrates HBuilderX's keymap configuration, allowing users to switch to presets matching VSCode or Sublime Text. This facilitates a seamless transition for developers familiar with other editors.

```text
# Keymap switching
# Navigate to: Tools > Keymaps

Available keymap presets:
- Default (HBuilderX native)
- VSCode compatible
- Sublime Text compatible

# Common shortcuts (Default keymap):
# Ctrl+D        - Select next occurrence
# Alt+Click     - Go to definition
# Ctrl+Shift+K  - Delete line
# Ctrl+/        - Toggle comment
# Ctrl+Shift+F  - Search in files
```

--------------------------------

### Node.js Plugin Development for HBuilderX

Source: https://context7.com/dcloudio/hbuilderx/llms.txt

Demonstrates the structure of a Node.js plugin for HBuilderX, including the plugin manifest (plugin.json) and the entry point script (extension.js). This shows how to extend IDE functionality using JavaScript.

```javascript
// Example Node.js plugin structure for HBuilderX
// plugin.json - Plugin manifest
{
  "id": "my-hbuilderx-plugin",
  "name": "My Custom Plugin",
  "version": "1.0.0",
  "engines": {
    "HBuilderX": "^3.0.0"
  },
  "main": "./extension.js",
  "activationEvents": [
    "onCommand:myPlugin.hello"
  ],
  "contributes": {
    "commands": [
      {
        "command": "myPlugin.hello",
        "title": "Say Hello"
      }
    ]
  }
}

// extension.js - Plugin entry point
const hx = require('hbuilderx');

function activate(context) {
  let disposable = hx.commands.registerCommand('myPlugin.hello', () => {
    hx.window.showInformationMessage('Hello from HBuilderX plugin!');
  });
  context.subscriptions.push(disposable);
}

module.exports = { activate };
```

--------------------------------

### External Commands Configuration in JSON

Source: https://context7.com/dcloudio/hbuilderx/llms.txt

Shows how to configure external commands within HBuilderX using a JSON file. This allows integration with build tools, linters, and other utilities, with custom hotkey assignments.

```json
// External command configuration example
// Located in: Tools > External Commands
{
  "commands": [
    {
      "name": "Run ESLint",
      "command": "npx eslint ${file}",
      "workingDir": "${projectDir}",
      "hotkey": "Ctrl+Shift+L"
    },
    {
      "name": "Build Project",
      "command": "npm run build",
      "workingDir": "${projectDir}",
      "hotkey": "Ctrl+Shift+B"
    }
  ]
}
```

--------------------------------

### Multi-Cursor and Text Selection in JavaScript

Source: https://context7.com/dcloudio/hbuilderx/llms.txt

Illustrates HBuilderX's multi-cursor editing and smart text selection capabilities in JavaScript. Features like Ctrl+Click for multiple cursors and double-click for variable selection enhance rapid code manipulation.

```javascript
// Multi-cursor editing example
// Use Ctrl+Click to place multiple cursors
// Use Ctrl+D to select next occurrence

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

// Double-click to smart select variable names
// Alt+Left-click for Go to Definition
users.forEach(user => {
  console.log(`${user.name} is ${user.age} years old`);
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.