How to get your shared Vue components to show IntelliSense in VScode
Tags: vscode, vue
Published: 2019-06-10 06:15:45

Hello Everyone👋🏽,

I recently created my very first [vue component](https://www.npmjs.com/package/vgauge) and pushed it to npm.

I wrote about it [here](https://dev.to/amroessam/vgauge---created-my-first-npm-package-first-post-446o) and explained how to create something similar [here](https://dev.to/amroessam/publish-your-first-npm-package-vue-263h)

I made sure it was well documented and was easy to use, however, my colleague pointed out that he would've preferred if he could see intellisense when he uses the component, something that explains what's expected from him when he's using it.

If you've built anything with vue, and use vscode, I'm pretty sure you've used [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)

Here's a snippet of the functions Vetur provides
> * Syntax-highlighting
> * Snippet
> * Emmet
> * Linting / Error Checking
> * Formatting
> * Auto Completion
> * Debugging

It also has around 16 million installs, so it's pretty popular.

In a recent [iteration](https://vuejs.github.io/vetur/CHANGELOG.html#_0-14-0-2018-11-26-vsix), they've added framework support.

So to get intellisense and auto-completion on your vue components, we need to add 2 json files in your project folder, and reference them in `package.json` to get vetur to show you the intellisens and auto-completion.

So let's get started. I'll be using the [package](https://github.com/amroessam/simplealertcomponent) I created earlier for this tutorial

### 1. Create tags.json

If your package has multiple tags, you can start defining their attributes and their description. For now, we only have one tag, so create a new `tags.json` file in your project root next to `package.json`

```json
// tags.json

{
  "simple-alert": {
    "attributes": [
      "message",
      "timeout"
    ],
    "description": "A simple alert"
  }
}
```
### 2. Create attributes.json

Now we create the `attributes.json` file which defines each individual attribute as follows

```json
// attributes.json

{
  "simple-alert/message": {
    "type": "string",
    "description": "A string to replace the default message. Default message: Hello Dev.to"
  },
  "simple-alert/timeout": {
    "type": "number",
    "description": "Number of ms to show the alert. Default timeout: 0 ms"
  }
}
```

As you can see, we first defined the component tag, then we defined which attributes it supports in the `tags.json`. Then we define each attribute each tag has, it's expected type, and it's description in the `attributes.json` file

### 3. Tell Vetur which files to look for

In `package.json` we add the following

```json
// package.json

...
"vetur": {
    "tags": "tags.json",
    "attributes": "attributes.json"
  },
...
```

PS. add the tags.json and attributes.json to the files key in your json file, if you're building the package, so they get included when you push to npm. Like so.

```json
// package.json

...
"files": [
    ...,
    "attributes.json",
    "tags.json"
  ],
...
```

### 4. Update git and npm

So now that we've added vetur support, we need to push these updates to npm, so when users install our package they get intellisense and auto-completion

```shell
npm version patch
```
this increments your version patch by 1 and commits the update to git

![](https://thepracticaldev.s3.amazonaws.com/i/feai67w374yhnhueh3a1.PNG)

now we push to github

```shell
git push origin
```

Finally, we republish the package to npm

```shell
npm publish
```

If all works well we should get the below 

![](https://thepracticaldev.s3.amazonaws.com/i/7x5gi31ea99uf7qp22rb.PNG)

Now when anyone downloads our package and tries to use it, they'll get intellisense and auto-completion in vscode as follows

![](https://thepracticaldev.s3.amazonaws.com/i/f3fjjngukiq8qa4yqd0c.PNG)

![](https://thepracticaldev.s3.amazonaws.com/i/ckohy86e8tj64hzb8eh5.PNG)

I hope you guys enjoyed it, and found it useful.

If you have any questions feel free to shoot them down below😁