Formatting Vue Templates (And More) with VS Code

Reed Barger
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.3 instructor rating • 21 courses • 38,710 students

Learn more from the full course

Full-Stack Vue with GraphQL - The Ultimate Guide

Build a complete Pinterest-inspired full-stack app from scratch with Vue, GraphQL, Apollo 2, Vuex, and Vuetify

09:55:53 of on-demand video • Updated December 2019

  • Learn in-depth how to use Apollo Server 2 and Apollo Boost to create powerful full-stack apps
  • Learn how to handle errors on the client and server with Apollo / GraphQL
  • Be able to implement session-based JWT authentication to GraphQL applications
  • Integrate Apollo with Vuex for more reliable and scalable state management
  • Implement infinite scrolling functionality using Vue-Apollo
  • Deploy full-stack JavaScript / GraphQL applications using Heroku and Netlify
  • Learn how to write queries and mutations in the GraphQL language on both the client and server
  • Utilize many useful MongoDB methods and features
  • Create attractive, sophisticated UIs using the Vuetify component framework
  • Use the best in ES6 - ESNext features like async / await, destructuring, spread operators, arrow functions, etc
English [Auto] Set the course of creating our project we're going to be working with a number of different file types. If you're using Visual Studio code is your code editor there are some extensions that we can install that will make working with these different files a lot easier. Currently I have this test that you file open. I'm going to give it some template tags. All the markup that we'll create for our project will be within these template tags. The first extension We'll look at will allow us to format all the markup within templates few templates so give it this div That's push over really far to represent some market that's out of place. Give us an H1 and this extension will do a few things for us. It will format our view templates. It'll give us some syntax highlighting make our code a bit easier to read and it will give us some intellisense. It'll give us some suggestions when writing markup broken just hit tab and it will expand the opening and closing tabs. So now since we have our markup just this demo markup that's out of place we're going to install our extension by hitting this box icon box button on the left hand side of Visual Studio code and we're going to type in the search feature an extension called the church should be the first result that comes comes up and you're going to want to click on the Install button. I have the Enable button since I've already installed it but click on install then reload. Once you click on reload and your code editor reloads you're going to want to go to the configuration file by going up to the top to code preferences and then settings. So this will open our configuration file for our editor. You can also go there by hitting command and comma and the configurations within this Jason object. We're going to add a new entry to it. And we're going to give it a name. We turned up format not default format or dot HVM out and set that to --'s dash beautified Dash 8 CMA and this will also be included in an attached file to this video. If you want to copy it from there. So we will do a number of things for us it gives us syntax highlighting gives us some Emett suggestions for our code. But in order to format on Save you can save here but it doesn't do anything for us. We need to add one more line to our configuration we're going to add this editor dot format on save line we're going to set that to true and once we save our user settings we head back to our view file when we hit save immediately. All of our markups are arranged neatly now. So just put this out of place again. Hit save and it's all formatted very neatly. We're also going to format in addition to our templates. We're going to take a look at how we can format our javascript file so any file ending with that jackass. And so I have this tested G-S file open I'll create a function some function declaration that's formatted very poorly. And you can make use of that editor format on save and try to use another extension which will as you can see format are javascript files immediately when we hit save we're going back to the extensions tab we're going to type in prettier. The very well known popular extension or javascript files. Once again you'll just hit install and then reload and then automatically save all of our Jasc files or be formatted automatically. So let's test that out one more time. It's a good idea to test it even once you install it just to make sure it's working properly. Put it out of place. It save formats for us will be a great help for us. Within our files as well as within our all of our javascript files and our back Bakken We're also going to have these dot GQ all files these graphical files. They're also given a ending of gradual. So I'm just going to write some code within test that GQ Well you can see that it's gray. So he can't really see all of the different parts of the code that we just wrote so it would be nice to add some syntax highlighting paragraph files and to do that just type engraft. Well you're going to want to install the extension grackle for us code. It gives us a lot of different things syntax highlighting winching autocomplete just need to get in saw. Reload and you should see all of our graphic code. Has a nice color too. You can see all the different parts of it. And so all of these extensions will be a great help for us when it comes to working with all of these files will just make our life a lot easier. And I'd even recommend if you don't normally use Visual Studio code it's worth taking a look at installing it for this particular course just so you can use these really great extensions that we have access to.