It’s been a while that I last blogged on Sitecore JSS development with Vue.js. So, let’s pick up where we were left at a while back when I started with my initial blog-posts on Sitecore JSS development with Vue.js.
In this blog-post I would like to walk you through the best Visual Studio Code Vue.js extensions that we can install while doing Sitecore JSS development with Vue.js
VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. In this case we need support for Vue.js development, so I’m going to walk you through the best VS Code extensions out there for Vue.js development.
Without Vue.js VS Code Extensions
Let’s start VS Code and open up the sitecore-jss-getting-started-vuejs directory I started on in my earlier blog-posts. As you can see in the screenshot below when we have no VS Code extensions installed and we open open up a .vue file, you’ll notice that VS Code doesn’t show any syntax highlighting and the .vue file is treated as Plain Text. Luckily for you we get a notification from VS Code, recommending that we should install the Vetur extension for the .vue file type.
Vetur – Vue tooling for VS Code
The Vetur extension supplies Vue.js language features such as syntax highlighting, IntelliSense, snippets, formatting to VS Code. In the notification popup, press install or Show recommendations to install either directly or first look at the extension details.
Press install to install the Vetur extension. Once the installation is complete (may take several minutes), best thing would be to reload VS Code to show you that the extension is enabled.
Now you should see that .vue is a recognized file type for the Vue language and you have language features such as syntax highlighting, bracket matching, and hover descriptions.
Vue VSCode Snippets by Sarah Drasner
One of the better VS Code extensions for Vue.js development is the extension by Sarah Drasner. As she describes it herself, “These snippets were built to supercharge my workflow in the most seamless manner possible. This repo was built particularly for real world use”.
Head over to the extensions section in VS Code, search on vue and select the Vue VSCode snippets extension to be installed.
The extension offers a lot of handy snippets for Vue.js development for templates (like vfor, vmodel etc….) and for script (like vimport, vmethod, vcomputed etc…). See the Vue VSCode Snippets page for a large list of handy snippets.
Vue VS Code Extension Pack by Sarah Dresner
Another VS Code extension I want to highlight for Vue.js development is the Vue VS Code extension pack by once again: Sarah Dresner. This extension installs a collection of extensions for working with Vue Applications in VS Code, such as the 2 mentioned above, but also a bunch of other ones.
Vue 2 Snippets
And finally just to be sure that I have the most popular Vue.js extension installed I also installed Vue 2 Snippets.
And that’s it for today.
Till next time… Sitecore JSS in Powerfull Ways…..
