If you’re going to do any serious amount of work with Vue, it’ll pay dividends in the long run to invest some time in setting up your coding environment. A powerful editor and a few well-chosen tools will make you more productive and ultimately a happier developer.
In this post, I’m going to demonstrate how to configure VS Code to work with Vue. I’m going to show how to use ESLint and Prettier to lint and format your code and how to use Vue’s browser tools to take a peek at what’s going on under the hood in a Vue app. When you’ve finished reading, you’ll have a working development environment set up and will be ready to start coding Vue apps like a boss.
Let’s get to it!
Want to learn Vue.js from the ground up? This article is an extract from our Premium library. Get an entire collection of Vue books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $9/month.
Installing and Setting Up Your Editor
I said that I was going to be using VS Code for this tutorial, but I’m afraid I lied. I’m actually going to be using VSCodium, which is an open-source fork of VS Code without the Microsoft branding, telemetry and licensing. The project is under active development and I’d encourage you to check it out.
It doesn’t matter which editor you use to follow along; both are available for Linux, Mac and Windows. You can download the latest release of VSCodium here, or download the latest release of VSCode here and install it in the correct way for your operating system.
Throughout the rest of this guide, for the sake of consistency, I’ll refer to the editor as VS Code.
Add the Vetur Extension
When you fire up the editor, you’ll notice a set of five icons in a toolbar on the left-hand side of the window. If you click the bottom of these icons (the square one), a search bar will open up that enables you to search the VS Code Marketplace. Type “vue” into the search bar and you should see dozens of extensions listed, each claiming to do something slightly different.
Depending on your use case, you might find something here to suit you. There are lots available. For example, TSLint for Vue could be handy if you’re working on a Vue project involving TypeScript. For now, I’m going to focus on one called Vetur.
Type “Vetur” into the search box and select the package authored by Pine Wu. Then hit Install.
Once the extension has installed, hit Reload to activate and you’re in business.
Exploring Vetur’s Features
If you visit the project’s home page, you’ll see that the extension gives you a number of features:
- syntax highlighting
- snippets
- Emmet
- linting/error checking
- formatting
- auto completion
- debugging
Let’s see some of these in action now.
Note: many of these features only work when you have a project set up. This means you need to create a folder to contain your Vue files, open the folder using VS Code and access the files via VS Code’s explorer.
Syntax highlighting
As your app grows, you’ll undoubtedly want to make make use of single-file components (SFCs) to organize your code. These have a .vue
ending and contain a template section, a script section and a style section. Without Vetur, this is what an SFC looks like in VS Code:
However, installing Vetur will make it look like so:
Snippets
As you can read on the VS Code website, snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. Vetur makes it possible for you to use these snippets in single-file components.
It also comes with some snippets of its own. For example, try typing “scaffold” (without the quotes) into an area outside a language region and it will generate all the code you need to get going with an SFC:
Emmet
Emmet takes the idea of snippets to a whole new level. If you’ve never heard of this and spend any amount of time in a text editor, I’d recommend you head over to the Emmet website and spend some time acquainting yourself with it. It has the potential to boost your productivity greatly.
In a nutshell, Emmet allows you to expand various abbreviations into chunks of HTML or CSS. Vetur ships with this turned on by default.
Try clicking into a region and entering the following:
div#header>h1.logo>a{site Name}
Then press Tab. It should be expanded to this:
Error Checking/Linting
Out of the box, Vetur offers some basic error checking. This can be handy for spotting typos in your code.
In the above example, Vetur has noticed that I’ve forgotten the colon following the object property name and has consequently underlined it in red. Opening up the error panel (click on the small cross in the bottom left-hand corner) gives you a description of the error.
Vetur also uses eslint-plugin-vue to lint templates. We’ll find out more about why linting your code is a good idea in the next section, but for now, let’s just see it in action.
Let’s add an items
key to our data
property:
export default {
data () {
return {
message: "Vetur is awesome!",
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}
}
Then add some code to output it in our template:
Hello, World!
{{ message }}
-
{{ item.message }}
Straight away we’ll see that
Well, you can hover over the offending code, or open the error console to see what’s bothering Vetur.
The error appears to be that we’ve forgotten to declare a key. Let’s remedy that:
{{ item.message }}
And the error vanishes from our editor.
IntelliSense
IntelliSense is one of my favorite features in VS Code, but it’s limited to a few formats that the editor can understand. Installing Vetur makes IntelliSense available in your .vue
file, which is mighty handy.
You can try this out by clicking into the region of a Vue component and typing “v-” on any tag (minus the quotes). You should see this:
This allows you to select from any of the listed directives, and also provides you with an explanation of what each does.
That’s not all that Vetur can do, but we’ll leave the extension there and turn our attention to setting up a project with Vue’s CLI.
An Example Project with Vue CLI
When building a new Vue app, the best way to get up and running quickly is using Vue CLI. This is a command-line utility that allows you to choose from a range of build tools which it will then install and configure for you. It will also scaffold out your project, providing you with a pre-configured starting point that you can build on, rather than starting everything from scratch.
Note: if the CLI is new for you, you might like to check out our tutorial “A Beginner’s Guide to Vue CLI” in this Vue series.
To get started, you’ll need to have Node installed on your system. You can do this by downloading the binaries for your system from the official website, or using a version manager. I recommend the second of the two methods.
With Node installed, execute the following command:
npm install -g @vue/cli
And create a new Vue project with the command:
vue create my-project
This will open a wizard which asks you to choose a preset. Choose to manually select features, then accept the defaults for everything, apart from when you’re asked to pick a linter/formatter config. In this step, be sure to select ESLint Prettier and Lint on save, and to place config files in package.json
.
Linting Your Code with ESLint
If you open this newly created project and take a peek inside the package.json
file, you’ll notice that the CLI has set up ESLint for you. This is a tool that can automatically check your code for potential problems. This provides many benefits, such as:
- keeping your code style consistent
- spotting potential errors and bad patterns
- enforcing quality when you follow a style guide
- saving time for all of the above reasons
Note: if you’d like to dive deeper into ESLint, check out our article “Up and Running with ESLint — the Pluggable JavaScript Linter”.
If you look at the devDependencies
property in package.json
, you’ll see that the CLI is also using eslint-plugin-vue. This is the official ESLint plugin for Vue.js, which is able to detect code problems in your .vue
files.
Let’s put that to the test.
Start the Vue dev server with npm run serve
and navigate to localhost:8080.
In VS Code, open up the project you just created with the CLI (File > Open Folder), then navigate to src/components/HelloWorld.vue
in the VS Code explorer. Let’s add a method to our Vue instance:
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
sayHi() {
console.log("hi");
}
}
}
Now, if you look at the terminal window in which the dev server is running, you’ll see Vue complaining.
This is because, under the hood, Vue CLI has configured ESLint to use the eslint:recommended
ruleset. This enables any rules marked with a check mark on the ESLint rules page, of which no-console is one.
While it’s nice that the CLI shows us ESLint errors in the terminal, wouldn’t it’d be nicer if we could see them in our editor, too? Well, luckily we can. Hop back into VS code, click the extensions icon and type in “ESLint” (without the quotes). The top result should be for a package named ESLint by Dirk Baeumer. Install that and restart VS Code.
Finally, you’ll need to edit your VS Code preferences. Go to File > Preferences > Settings and edit the User Settings file and add the following configuration:
"eslint.validate": [
"vue"
]
This will tell the ESLint plugin we just installed to perform validation for .vue
files.
Should you desire, you can turn this (or any) rule off in the rules: {}
section of package.json
:
"eslintConfig": {
...
"rules": {
"no-console": 0
},
...
}
Formatting Your Code with Prettier
Prettier is an opinionated code formatter. As you can read on the project’s home page, it enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
That might sound a little draconian at first, but once you get used to it, you literally never have to think about code formatting again. This is very useful if you’re part of a team, as Prettier will halt all the on-going debates over styles in their tracks.
Note: if you’re not convinced, you can read more about why you should use Prettier here.
The way Prettier works in conjunction with Vue CLI is similar to ESLint. To see it in action, let’s remove the semicolon from the end of the console.log("hi");
statement from our previous example. This should display a warning in the terminal:
warning: Insert `;` (prettier/prettier) at src/components/HelloWorld.vue:41:24:
39 | methods: {
40 | sayHi() {
> 41 | console.log("hi")
| ^
42 | }
43 | }
44 | };
1 error and 1 warning found.
1 warning potentially fixable with the `--fix` option.
It will also display a warning in VS Code, thanks to the ESLint plugin we installed previously.
We can also have Prettier fix any formatting errors for us whenever we save a file. To do this, go to File > Preferences > Settings and edit the User Settings file to add the following configuration:
"editor.formatOnSave": true
Now when you press save, everything will be formatted according to Prettier’s standard rule set.
Note, you can configure a handful of rules in Prettier via a "prettier"
key in your package.json
file:
"prettier": {
"semi": false
}
The above, for example, would turn the semicolon rule off.
You can read more about configuration options here.
In this section, I want to take a look at the the Vue.js devtools, which are available as a browser plugin for both Chrome and Firefox, and as a cross-platform Electron app, which can also debug Vue apps running on mobile devices.
Once you have them installed, you can access them by visiting a running Vue app, opening your browser’s console and hitting the Vue button. You’ll then see three further sections: Components, Vuex and Events.
The first section gives you a hierarchical view of all the components that make up your application. Selecting a component from the tree allows you to inspect its state (for example, the props
it received) in the right-hand pane. Some of its values (such as its data
object) can be dynamically edited while the app runs.
The Vuex tab is only active if a Vuex store is detected in the application. (For more information on this, check out “Getting Started with Vuex: a Beginner’s Guide” in this Vue series.) It allows you to examine the state of the store at any point in time, and all the mutations that have been committed. You can even move back and forth through the mutations, effectively time traveling through the state of your application.
The Events tab aggregates all the events emitted by your application, from anywhere in the component tree. Selecting an event will display more information about it in the right-hand pane, allowing you to see which component emitted it and any payload that was sent.
There’s a lot more to Vue’s browser tools than I’ve demonstrated here, so I encourage you to install them and experiment with them as your application grows.
Conclusion
And that’s a wrap. In this guide, I’ve demonstrated how to install the Vetur plugin for VS Code and highlighted several of its features. I’ve also shown how to use Vue CLI to generate a project and how to use ESLint and Prettier to ensure code quality and consistency. We also took a brief look at Vue’s browser tools and saw how to inspect the state of a running Vue application, something which is important for debugging purposes.
This should see you well on the way to having a sensible environment for writing Vue applications and hopefully make you a productive and happy developer.
Currently I work for SitePoint as editor of their JavaScript hubs and technical editor for various books (e.g. JavaScript: Novice to Ninja and Jump Start Vue.js).
I also work for my local university as a network admin / web dev where I spend a fair bit of my time working on Rails apps.
69 comments
Great site you have here.. It’s hard to find high-quality writing like yours these days.
I seriously appreciate individuals like you! Take care!!
Every weekend i used to pay a quick visit this site, because i want enjoyment, since this this website conations
truly good funny data too.
Does your website have a contact page? I’m having trouble locating it but, I’d like
to send you an email. I’ve got some recommendations
for your blog you might be interested in hearing.
Either way, great blog and I look forward to seeing it grow over time.
Excellent blog here! Also your web site loads up very fast!
What host are you using? Can I get your affiliate link to your host?
I wish my site loaded up as fast as yours lol
We’re a group of volunteers and opening a brand new scheme in our community.
Your website offered us with useful info to work on. You’ve done an impressive job
and our whole group will be grateful to you.
I am actually pleased to glance at this weblog posts which
includes lots of useful data, thanks for providing these kinds of statistics.
I blog quite often and I really appreciate your content.
This great article has truly peaked my interest. I’m going to bookmark your site and keep checking for new details about
once a week. I subscribed to your Feed as well.
Since the admin of this web site is working, no question very rapidly it
will be renowned, due to its quality contents.
Heya i’m for the first time here. I found this board and I find It really
useful & it helped me out much. I’m hoping to give
something back and aid others like you aided me.
Hi there, just wanted to tell you, I enjoyed this blog post.
It was funny. Keep on posting!
I just like the valuable info you provide in your articles.
I’ll bookmark your weblog and take a look at once more right here regularly.
I’m slightly certain I’ll be told many new stuff proper right here!
Best of luck for the following!
Quality articles or reviews is the crucial to attract the visitors to pay a visit the web site, that’s what this web site is providing.
You really make it seem so easy along with your presentation however I to find this matter to be actually something which I
believe I’d never understand. It seems too complicated and
very vast for me. I’m taking a look forward in your next post, I’ll attempt to
get the grasp of it!
Unquestionably believe that which you stated. Your favorite reason appeared to be at the net the easiest factor to bear in mind of.
I say to you, I certainly get annoyed at the same time as other
folks think about concerns that they plainly do not know about.
You controlled to hit the nail upon the top and also defined
out the entire thing without having side effect , other people could take a signal.
Will probably be again to get more. Thanks
Hi my loved one! I wish to say that this post is amazing, nice written and
come with almost all important infos. I’d like to peer extra
posts like this .
You really make it seem so easy with your presentation but I find this
topic to be actually something that I think I would never
understand. It seems too complicated and extremely broad
for me. I am looking forward for your next post, I will try to get the hang of it!
I used to be able to find good info from your articles.
I got this site from my pal who told me about this website
and at the moment this time I am visiting this site and reading very
informative content at this time.
I think everything composed made a ton of sense. However, what about this?
suppose you added a little information? I mean, I don’t want to tell you how to run your
website, but suppose you added something that makes
people want more? I mean How to Set Up a Vue
Development Environment – Pavvy Designs is a little boring.
You might peek at Yahoo’s home page and see how they
write article headlines to grab viewers interested. You might
add a related video or a related pic or two to grab readers interested about what you’ve written. In my opinion,
it might make your blog a little bit more interesting.
Thank you for the auspicious writeup. It in fact was a amusement account it.
Look advanced to far added agreeable from you! By the way, how can we
communicate?
It’s a shame you don’t have a donate button! I’d definitely donate
to this excellent blog! I guess for now i’ll settle for book-marking and
adding your RSS feed to my Google account. I look forward to fresh
updates and will share this site with my Facebook group.
Chat soon!
I got this web site from my buddy who told
me concerning this website and now this time I am visiting this site and reading
very informative articles at this time.
Your style is so unique compared to other folks I have read
stuff from. Many thanks for posting when you have the opportunity, Guess I will just bookmark this web site.
Have you ever considered creating an e-book or guest authoring on other websites?
I have a blog centered on the same subjects you discuss
and would really like to have you share some stories/information.
I know my audience would value your work.
If you are even remotely interested, feel free to shoot me an e-mail.
Its like you read my mind! You appear to know a lot about this,
like you wrote the book in it or something. I think that you could
do with some pics to drive the message home a bit, but instead of that,
this is great blog. A great read. I’ll certainly be back.
Appreciating the time and energy you put into your site
and detailed information you present. It’s nice to come across a blog
every once in a while that isn’t the same unwanted rehashed
material. Wonderful read! I’ve saved your site and I’m including your
RSS feeds to my Google account.
Quality articles is the crucial to invite the users to pay
a quick visit the web site, that’s what this site is providing.
I every time emailed this webpage post page to all my contacts, since if like
to read it afterward my friends will too.
Quality posts is the crucial to be a focus for the users to visit the site, that’s what this web
page is providing.
Hello! I know this is kind of off topic but I was wondering which blog platform are you using for this website?
I’m getting fed up of WordPress because I’ve had issues with hackers and I’m
looking at options for another platform. I would be fantastic
if you could point me in the direction of a good platform.
Hello friends, its wonderful paragraph concerning teachingand completely defined,
keep it up all the time.
Great post. I used to be checking continuously this blog and I
am impressed! Very helpful information specially the
remaining section 🙂 I care for such info much. I
was seeking this particular info for a long time.
Thanks and good luck.
Asking questions are truly nice thing if you are not understanding anything fully, but this post gives pleasant understanding yet.
What i don’t realize is actually how you’re not actually a lot more well-favored than you might be right now.
You’re so intelligent. You understand therefore
significantly when it comes to this subject, made me in my view
consider it from numerous numerous angles. Its like women and men don’t
seem to be interested until it is something to accomplish with Lady gaga!
Your individual stuffs nice. Always care for it up!
It’s awesome to visit this site and reading the views of all colleagues about this piece
of writing, while I am also keen of getting familiarity.
Wonderful article! This is the type of info that are supposed to be shared around the net.
Disgrace on Google for no longer positioning this
put up upper! Come on over and visit my web site . Thanks =)
For the reason that the admin of this web site is working, no doubt very rapidly it will be renowned, due to its feature contents.
If you would like to obtain much from this
article then you have to apply these strategies to your won weblog.
Undeniably believe that which you said. Your favorite justification appeared to be
on the web the simplest thing to be aware of.
I say to you, I certainly get annoyed while people think about worries that they just don’t know about.
You managed to hit the nail upon the top and also defined out the whole thing without having side effect , people
could take a signal. Will probably be back to get more.
Thanks
I all the time used to read paragraph in news papers but now
as I am a user of net so from now I am using net for posts, thanks to web.
Hello my family member! I want to say that this article is
awesome, nice written and come with almost all significant infos.
I’d like to peer extra posts like this .
Sweet blog! I found it while surfing around on Yahoo News.
Do you have any suggestions on how to get listed in Yahoo
News? I’ve been trying for a while but I never seem to
get there! Many thanks
Attractive section of content. I simply stumbled upon your website and in accession capital
to claim that I get in fact loved account your blog posts.
Any way I’ll be subscribing on your feeds or even I fulfillment you access constantly quickly.
You need to take part in a contest for one of the highest quality websites
on the internet. I most certainly will recommend this blog!
What’s Going down i am new to this, I stumbled upon this I’ve found It absolutely useful and it has helped me out loads.
I hope to give a contribution & help other users like its helped me.
Good job.
I’m not sure exactly why but this blog is loading extremely slow for me.
Is anyone else having this issue or is it a problem on my
end? I’ll check back later and see if the problem still exists.
Ahaa, its fastidious discussion about this piece of writing
at this place at this weblog, I have read all that, so at this time me also commenting
here.
Wow that was unusual. I just wrote an extremely long comment but after I clicked submit my comment didn’t
appear. Grrrr… well I’m not writing all that over again. Regardless, just
wanted to say fantastic blog!
Awesome article.
I am really thankful to the owner of this site
who has shared this fantastic piece of writing at here.
Hola! I’ve been following your website for some time now and finally got the courage to go
ahead and give you a shout out from Dallas Tx!
Just wanted to say keep up the excellent job!
Paragraph writing is also a excitement, if you be familiar with
after that you can write or else it is complicated to
write.
I like looking through an article that will make men and women think.
Also, thanks for allowing me to comment!
whoah this blog is great i like studying your articles.
Keep up the great work! You recognize, lots of people are
searching round for this info, you can aid them greatly.
Hi there! I simply would like to give you a huge thumbs up for your great info you have here on this post.
I am returning to your website for more soon.
Thanks for the marvelous posting! I actually enjoyed reading it,
you may be a great author.I will make sure to bookmark your
blog and will eventually come back later in life. I want to encourage one to continue your great writing, have a nice holiday weekend!
Wow, superb blog layout! How long have you been blogging for?
you made blogging look easy. The overall look of
your site is wonderful, let alone the content!
Wonderful article! That is the type of information that are meant to be shared across the
web. Shame on Google for no longer positioning this put up upper!
Come on over and discuss with my website . Thanks =)
Whats up very cool blog!! Guy .. Excellent .. Wonderful ..
I will bookmark your site and take the feeds also? I’m happy to search out numerous helpful information here within the
submit, we’d like develop extra strategies on this regard, thanks for
sharing. . . . . .
WOW just what I was searching for. Came here by
searching for joker123 deposit pulsa 10rb tanpa potongan
Hello! I just wanted to ask if you ever have any issues with hackers?
My last blog (wordpress) was hacked and I ended up losing several
weeks of hard work due to no data backup. Do you
have any solutions to stop hackers?
Everyone loves what you guys are up too. Such clever work and coverage!
Keep up the wonderful works guys I’ve included you guys to our blogroll.
My brother recommended I would possibly like this website.
He was totally right. This publish truly made my
day. You can not believe just how so much time I had
spent for this information! Thanks!
hello!,I like your writing very so much! share we keep up a correspondence more about your article on AOL?
I require a specialist on this area to unravel
my problem. Maybe that is you! Looking forward to peer
you.
It’s a shame you don’t have a donate button! I’d certainly donate to this fantastic blog!
I guess for now i’ll settle for bookmarking and adding your RSS
feed to my Google account. I look forward to new updates and will share this
site with my Facebook group. Chat soon!
You should take part in a contest for one of the greatest sites on the internet.
I am going to highly recommend this blog!
What i do not understood is actually how you’re no longer actually a lot more smartly-favored than you might
be right now. You are so intelligent. You recognize thus considerably in terms of this subject,
produced me in my opinion believe it from so many various angles.
Its like men and women don’t seem to be fascinated except it is something to
do with Woman gaga! Your individual stuffs great.
All the time handle it up!
Currently it seems like Expression Engine is the top blogging platform available right now.
(from what I’ve read) Is that what you are using on your blog?
Hey! I know this is kinda off topic however , I’d figured I’d ask.
Would you be interested in exchanging links or
maybe guest authoring a blog article or vice-versa? My blog
discusses a lot of the same topics as yours and I think
we could greatly benefit from each other.
If you happen to be interested feel free to send
me an e-mail. I look forward to hearing from you! Excellent blog by the way!