# Extension

## Extensions

This section provides basic instructions on how to manage extensions in the new IDE, including installing, enabling, disabling, updating, and uninstalling extensions.

***

### 1. Opening the Extensions Marketplace

To manage extensions, follow these steps:

1. Click on the **Extensions** icon in the **Activity Bar** (left sidebar).
2. The **Extensions Marketplace** will open, displaying a list of installed extensions.

<figure><img src="/files/LKgF1gA3t7BKbR3hzTNd" alt="" width="563"><figcaption></figcaption></figure>

***

### 2. Installing an Extension

1. Open the **Extensions Marketplace**.
2. Use the **Search Bar** at the top to find the desired extension.
3. Click on the extension from the search results.
4. Click **"Install"** to install the extension.
5. The installation progress will be displayed, and once completed, the extension will be available for use.

***

### 3. Enabling and Disabling Extensions

#### Enable an Extension

1. Open the **Extensions Marketplace**.
2. Locate the extension under **Installed** extensions.
3. Click **"Enable"** if the extension is disabled.
4. The extension will now be active.

#### Disable an Extension

1. Open the **Extensions Marketplace**.
2. Locate the extension under **Installed** extensions.
3. Click **"Disable"** to deactivate the extension.
4. The extension will be disabled but not removed.

***

### 4. Updating an Extension

1. Open the **Extensions Marketplace**.
2. Check if any installed extensions have an **"Update"** button next to them.
3. Click **"Update"** to install the latest version.
4. The extension will be updated automatically.

***

### 5. Uninstalling an Extension

1. Open the **Extensions Marketplace**.
2. Locate the extension under **Installed** extensions.
3. Click **"Uninstall"**.
4. The extension will be removed from the IDE.

***

### Example: Enabling Syntax Highlighting for Vue Files

In this example, we will enable the **"Vue - Official"** extension to enable syntax highlighting for Vue files.

By default, the IDE only provides syntax highlighting for basic file types such as **HTML, CSS, and JavaScript**. If you open a **Vue (`.vue`) file**, syntax highlighting will not be applied.

#### Before Installing the Vue Extension

In the screenshot below, the **"App.vue"** file is opened, but the syntax is not highlighted.

<figure><img src="/files/T8BmANxrREH639dHZU8V" alt="" width="563"><figcaption></figcaption></figure>

#### Installing the Vue Extension

To enable syntax highlighting for Vue files, follow these steps:

1. Open the **Extensions Marketplace**.
2. In the search bar, type **"Vue highlight"**.
3. A list of extensions related to Vue will appear.
4. Read the descriptions and choose an extension that provides syntax highlighting.
5. Look for an extension with **high download numbers and positive user feedback** to ensure reliability and security.

<figure><img src="/files/xZh9r94JyfPQj07hrz12" alt="" width="563"><figcaption></figcaption></figure>

In this case, we selected **"Vue - Official"** because it is a trusted extension used by many developers.

#### Activating the Extension

1. Click **"Install"** and wait for the installation to complete.
2. Reload the browser to apply the changes.
3. Reopen the Vue file to see the updated syntax highlighting.

#### After Installing the Vue Extension

Now, the **Vue syntax highlighting** is properly applied.

<figure><img src="/files/ETtilTnWh8CqHghkBHHt" alt="" width="563"><figcaption></figcaption></figure>

***

### Notes

* Always verify the extension details before installing to ensure security and compatibility.
* Some extensions may require a **browser reload** or **IDE restart** to take effect.
* If an extension does not work as expected, try disabling and re-enabling it.
* Certain extensions may not be fully compatible with this IDE.
* Free-plan users may have limitations on available extensions.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://en.docs.monaca.io/products_guide/new-monaca-cloud-ide/extension.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.