Introduction and Downloading Visual Studio Code
What's up developers and welcome back to a new video where we're going to set up our Visual Studio Code to get the most out of our Symfony experience.
Quick pause: do you want to support the channel and want me to continue on creating content? You can support the channel on Patreon right now where you get benefits such as a private Discord group where you can share your coding issues and other developers will help you out. If you are interested to join, the link will be in the description down below.
Once you want to work with a framework such as Symfony, you need to make sure that you set up your code editor in the right way. In this tutorial we're going to use Visual Studio Code since it's free, it's super easy to add extensions to, and it makes your experience a lot better.
I'm on a Mac right now and I won't be creating a video on how you can set up Visual Studio Code on Windows or Linux because honestly it's the exact same software system but the buttons might be at another place.
At the moment I'm on code.visualstudio.com which is the official website of Visual Studio Code which I will link in the description down below and you'll see that I have a call to action button right here where I can download Visual Studio Code for Mac. This button will change based on the operating system you're using. If you have Windows it will probably say something along the lines of download it for Windows. Once you click on download make sure that you install it and I'll see you back once it's done.
Opening VS Code and Installing a Theme
All right, as you can see right now I've got Visual Studio Code open and the interface looks pretty straightforward. But there's always a but: my colors are probably different than yours. That can be changed with something which is called an extension. With an extension you can simply add stuffs like languages, debuggers, and tools that will support your development flow.
So first things first, let's install an extension that will change the interface of our code editor. When you want to install an extension you need to access the extensions market, which can be done through the sidebar right here where you need to click on the four squares.
Right here you will probably see some extensions that I have installed that you don't have, which is alright because I've deleted all my Symfony and PHP related extensions so we can download them together. Now the first extension that we're going to install is called Community Material Theme. Community Material Theme is an extension that allows you to change the colors of your interface.
Let me make my panel a little bit smaller. All right, now I've already got it installed so let me actually uninstall it. All right, it changed the interface. Click on install and the drop down menu has appeared right now with some themes that you can choose from. I personally like to work with the Community Material Theme darker high contrast because it doesn't hurt my eyes that much, which is the same that I had before.
Installing PHP Extensions: Intelephense and PHPDoc
I want to start off with PHP extensions because Symfony is obviously based on PHP so we need to make sure that we got our PHP extensions set up correctly. I'm also going to open a Symfony test project so once we install an extension I can show you what the extension allows you to do. So let me do that: let's open a folder. It's on my desktop workspace and it's a Symfony course name.
Now the second extension that we're going to install is called PHP Intelephense. It's the second one which is created by Ben Mewburn so let's click on install. This extension boosts your productivity because it does code completion, parameter help, find references, simple searches and way more. As you can see it has been installed so let me navigate to the explorer and I've got a DataMoviesController file so let me open it. You probably don't have it so don't worry about it.
Now let's scroll down to right below our public function index and what we can do right now is to write down pub and you can already see that it recognizes what we want to write down which is public, so it gives us an opportunity to auto complete the text. Let's hit enter and as you can see public has been printed out. Now let me remove it, save it, open the extensions market.
The next extension is called phpDoc Comment. It's the first one created by a rex she. Let's install it. Specifically in Symfony you'll be needing to add phpDoc blocks. This extension allows you to automatically create it for a function, variable, or a class.
So let me navigate back to the code and let's open the MoviesController again and scroll up. And right here we have a public function index. Now let's select it including oops the route and what we can do next is to right click on it and we can add phpDoc blocks. But it also has a shortcut which is way easier, so let's escape it: press the Shift button, Command button with the I.
If you're not familiar with phpDocs this might look like a comment section but it's a bit different when it comes to Symfony because we've just added phpDoc blocks which you'll get to understand better later on, but you can define things right here that are related to your controller, even routes.
Namespace Resolution and Using Statements
All right, now let's open the extensions market again. Now let's add the next one which is called PHP Namespace Resolver. Honestly this is a pretty cool one because it allows us to resolve namespaces and add them inside the use statement of our file. It's the first one created by Mahadi Hassan so let's install it.
Let's open our MoviesController again and if we scroll up you'll see that we have a couple use statements right here. What we're doing right here is basically pulling in the Response class, the Route class, and the AbstractController. These are all being used inside the class that we have as well as you can see MoviesController is extending the AbstractController which is coming from this line of code.
Now let's delete the AbstractController use statement and it's throwing us an error right here. So what we can do is to remove it and write down AbstractController and right here you can see that we can pull it in and it's also pulling in the use statement. So let's click on it and as you can see the use statement of our AbstractController is back.
Twig and Frontend Snippets for Templates
Now Symfony is a framework that uses HTML but inside a template engine called Twig, so let's focus on some extensions that we can use for our front-end components.
The first one is a simple one which you probably have installed called HTML Snippets. This extension allows you to add full HTML snippets. It's the first one created by Mohammed Abu Saeed. Let's install it. I'm not going to show this one because it kind of speaks for itself because you can make HTML snippets.
Now let's do the same thing for our JavaScript, so let's search for JavaScript. It's the first one created by Charalampos Charalampidis — I'm not sure if I'm pronouncing your name right now. Just like the HTML snippets it allows you to add code snippets for JavaScript and ES6 syntax.
When working with the Twig templating engine we need to make sure that we add the extension called Symfony Code Snippets. Now let's scroll down because I can't need it all right it's this one created by Nadim Updoe. Let's install it and what this extension allows us to do is to use more than 100 Symfony code snippets. As you can see it also supports Twig.
Now let me show it to you. Let me go back to my code and I have a templates folder where I store views right here. Let's open the base.html.twig and don't worry we will be learning all these words file names later on, I just want to show you what it does so just bear with me. If we then go let's say inside our body, write down block and hit tab you'll see that a Twig block has been created for us which is incredible because this is so much work to write yourself.
Now let me undo it, save it and close out the file and let's open the extensions market again.
Symfony VS Code Extension and Twig Language Support
Now there's a pretty fun extension called Symfony for VS Code. Now it's the first extension and I completely forgot to uninstall it but this extension helps you to develop your project much faster because it provides auto completion of your Symfony container. Now I can't really test this out right now so let's search for another one which is called Twig. It's the first one; it has been created by Whatwedo.
And as you can see in the left panel let's actually install it. You'll see that we have a lot more Twig options in the market so let's also install Quick Language 2 and this one which is Twig Language. These extensions help you with syntax highlighting, snippets, Emmet formatting, hovering and Intellisense.
VS Code Helpers: Icons, Bracket Colorizer, and Emmet Live
Next to all these PHP and Symfony extensions there are some helpers for Visual Studio Code so let's install these as well. The one I personally love is called VSCode Great Icons. It's created by Emmanuel Beziat and what this extension will do is adding an icon of the file extension right in front of your file name. This is super handy because it allows you to see what type of file you're working with right now. It also has it but I just don't like these icons, so let's install it, let's enable it and as you can see we have just added new icons and even for our folders.
The next extension is called Bracket Pair Colorizer. Since we're going to work with a lot of brackets of classes, methods, conditional statements and loops we got to make sure that we match brackets with a specific color and that's what Bracket Pair Colorizer created by CoenraadS does. So let's install it.
And let's add another one as well which is called Emmet Live. Now Emmet is installed by default in Visual Studio Code but Emmet Live expands your Emmet dynamically while you're typing which is pretty cool. So let's install this one created by Yuri Samanjuk.
And that's it. I think that these extensions are must-haves in Visual Studio Code. We will definitely run into situations where we need to add another one here and there but this is a very good starting point when working with Symfony. That being said this was it for this video where we went over all necessary extensions to get the most out of our Symfony experience. If you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit that subscribe button.
You
