> For the complete documentation index, see [llms.txt](https://en.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en.docs.monaca.io/products_guide/new-monaca-cloud-ide/extension.md).

# 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="https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfWe1U2tFctp8FkP9W8%2Fuploads%2FyClzUmusX5d3GBYAjRO1%2Fselect-extension-activity-bar.png?alt=media&amp;token=93a43370-fecc-4674-a0c2-057b60450494" 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="https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfWe1U2tFctp8FkP9W8%2Fuploads%2FcrMrBeAwUDWhdN9SEgEO%2Ffile-before-install-vue-extension.png?alt=media&amp;token=6105cb7e-188b-4b6b-a812-d8ffbc924832" 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="https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfWe1U2tFctp8FkP9W8%2Fuploads%2FsDOceNtQWRhDx35lTHNC%2Finstall-vue-extension.png?alt=media&amp;token=cbd345b7-562d-451e-8e4e-1a901e057e66" 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="https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfWe1U2tFctp8FkP9W8%2Fuploads%2FOZWbisA297m2BYiTInTU%2Ffile-after-intall-vue-extension.png?alt=media&amp;token=9ea12018-c36e-429c-a4cd-de06e3d354fd" 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.