# IDE Code Support

### Intro

The component library provides the ability to highlight the component syntax for `webstorm` and `vscode`. 
the `Syntax highlight`,`Code completion`,`Documentation popup`, can be obtained through plugins and Settings.
The component library provides a separate helper plugin for `vscode`, which can be downloaded from the extension market

### Webstorm

Open the library properties documentation by setting 'editor-> general-> Code Completion->Show the documentation popup in ___ ms'.

<img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui-vue2/hl_wb_setting.png" alt="webstorm setting" />
<img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui-vue2/hl_wb.jpg" alt="webstorm highlight" />

### VSCode

#### Volar

Install the `Volar` plugin and configure `tsconfig.json` as follows to get type hints in the template.

```json
{
  "compilerOptions": {
    "types": ["@varlet-vue2/ui/types/global"]
  }
}
```

<img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui-vue2/hl_vsc_setting.png" alt="vscode setting" />

#### Varlet VSCode Extension

Search the `varlet-vscode-extension` installation in the `vscode` plugin market. When you hover over the component name, you can go directly to the component's document address via a link, and provides autocompletion for all components

<img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui-vue2/ext_vsc.png" alt="vscode ext" />
<img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui-vue2/varlet-vscode-extension.gif" alt="vscode ext link" />
