Hello Everyone👋🏽,
I recently created my very first vue component and pushed it to npm.
I wrote about it here and explained how to create something similar here
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
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, 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 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
// 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
// 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
// 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.
// 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
npm version patch
this increments your version patch by 1 and commits the update to git
now we push to github
git push origin
Finally, we republish the package to npm
npm publish
If all works well we should get the below
Now when anyone downloads our package and tries to use it, they'll get intellisense and auto-completion in vscode as follows
I hope you guys enjoyed it, and found it useful.
If you have any questions feel free to shoot them down below😁
Top comments (0)