Vs Code Vue Plugin

Posted on  by admin

A collection of extensions for working with Vue Applications in VS Code. These are some of my favorite extensions to make Vue application development easier and fun.

Vetur - Includes support for .vue files, including but not limited to: Syntax-highlighting, Emmet, Linting / Error Checking, Formatting, Auto Completion, Debugging. Vue Snippets - These are my own snippets to supercharge Vue application development 🚀.

Prettier - Never worry about formatting your code ever again, keep everything consistent with ease. My suggestion is to add "editor.tabCompletion": true, "editor.formatOnSave": true, to your settings file in preferences.

Formatting toggle This one is a lifesaver!

Vetur extension

I love Prettier, but there are times I'm submitting PRs to repos with different formatting rules than I have.

Rather than having to either shut off Prettier entirely, update my preferences to match theirs, or submit a noisy PR, I can use this extension to toggle formatting with a quickkey and get everything in!

Bracket Pair Colorizer - This extension allows matching brackets to be identified with colours.

The user can define which characters to match, and which colours to use. Bookmarks - Adds a bookmark to places you designate in your file, and allows you to quickly jump between them.

Other extensions

Type command + opt + K to create a bookmark and command + opt + J to jump between them 🔖. Jumpy - We lose a lot of time scanning with a mouse, time we can get back by using our keyboard instead.

Jumpy provides fast cursor movement by giving you a couple of keys that offer a hook to get to another part of the document. NPM Intellisense - a plugin that autocompletes npm modules in import statements.

ES6 Snippets - quickly spin up ES6 JavaScript with only 3 or 4 characters. Night Owl Syntax highlighting can be a very personal thing, so you might not want to use this, but I worked hard creating a theme you might like.

Especially great for your eyes at night, this theme was developed especially with contrast and colorblindness in mind.

Hello and welcome to this tutorial on Vue.JS with Visual Studio Code. In this series of tutorials, we will see how we can work with Vue.JS with VS Code and learn more about Vue.JS.

Vue VSCode Snippets

Note: Live demo video down below. Its a front end JS library like Angular or React.

It is getting very popular lately with a huge amount of support and plugins that can be used along with it.

[Vue VSCode Snippets] focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly.Source

Like Angular or React, it has component model system, routing, state management and many other features you want to find in a UI framework.

Linting

But, it’s main advantage it does not come shipped with all the libraries in the framework instead you select what you need to use.

For instance if you need state management you will need to install the vuex package. Same for routing. so this actually make it smaller in size. Okay for sure you want to make sure that you are using a high speed UI framework and does not have problems in performance.

Here are some comparison between Vue.JS performance vs other libraries from the official guide.

ESLint

Let’s Get Started! Now, make sure that you have VS Code up and running. Go to VS Code and select which folder will hold your Vue.JS folder.

After that you will notice your folder selected on the side. Now, let’s ope the integrated terminal so we can call the npm to get Vue.JS.

You can open the integrated terminal from the View menu or use (Ctrl+`) shortcut. Make sure you see the name of your folder in the terminal:.

Now, we can install Vue.JS directly but we want to use a template that can help us cut time and use some ready made features.

Welcome to Vue

So we are going to follow these steps from the Vue.JS Template Project:. And if everything goes smoothly, you will have Vue.JS up and running like this:.

Now let’s check out the project folder:. Most of the time, you will be working with the “src” folder. in the “src” folder all your Vue.JS app folders for components and parts will be.

By default, you will have the Hello component as your index page. So let’s expand the components folder and open the Hello.vue component.

Emmet

Notice that every component ends with .vue extension. Notice something that is missing?

Where is the coloring for the HTML part and JS code? since this is a .vue file VS code does not recognize it (Maybe in the future it will!) So let’s head over to the extensions and add some Vue.JS extensions to help us out.

Extensions Included

Let’s install Vetur (If you have a recent edition of VS Code, it will recommend out this extension and other extension for Vue.JS by default):.

Now we have a much better looking code! Now, lets play around with our component. Make sure you have the app running (Remember “npm run dev”). Now, let’s introduce a new varaible in the data and name it employee.

Just place a string value in it. And just add an h2 on the top as follow:.