I wanted to share some of my favorite extensions as a front-end developer. There are thousands of extensions out there, however, some of them are more useful than others. So here is my (ever growing) list in alphabetical order.
Alphabetical Sorter (Ugur Erdal)
Speaking of alphabetical order, this is a nifty extension that will quickly sort a list in alphabetical order. I find this useful with <li> where you have multiple items that need to be sorted. Just write them out, and run the extension.
Auto Rename Tag (Jun Han)
I hate going in and changing the opening tag, and then the closing tag. Once I installed this extension, there was no going back.
But hey, VS Code has this built in now.
Yeah, I know. But I have a hard time getting it to work with .vue files. It is still nice to have or know about if the built in functionality doesn't work.
Autoprefixer ( mrmlnc)
I don't use this as much anymore since I use Sass and my setup automatically autoprefixes, but it is still nice if you are just writing CSS and want to add vender prefixes automatically.
Community Material Theme (Equinusocio)
There isn't really anything wrong with VS Code's default interface styles, but I really like using this one. My favorite is "Material Theme High Contrast"
FiraCode w/ Ligatures
This isn't an extension, but it is some customization to use a different font and use ligatures in VS Code. Check out the documentation for details on how to install it.
Git History (Don Jayamanne)
Version control is awesome, but as a front end developer, I don't just want to see the code from a point in time, I want to see what it looked like. With this extension you can do a hard reset (make sure that your latest changes are committed to a remote repository). Then you can run the site like it was at that point. When you are done, you just pull the latest change from your remote repository, and you are back to where you were.
Highlight Matching Tag (vincaslt)
This does exactly what it says, if your cursor is on <div> it will find the matching </div> and highlight it. This is another one that VS Code has some built in functionality for, but I just like how this one looks.
html-entities (christopherstyles)
There is no bigger pain than writing <pre> content, to find out that everything you wrote in it was rendered as HTML on your page. With this extension, you can type it out, highlight your code, then run this extension. Now all your < and > (and others) are translated into HTML entities; < and > respectively.
Live Sass Compiler (Ritwick Dey)
I am fortunately finding alternatives for this, but in some projects it is so helpful to just have a free Sass compiler. You hit a button in the bottom of the window, and all your Sass files in your project are rendered (except the ones prefixed with _). If your project doesn't have some sort of sass compiler built in, give this a try.
Live Server (Ritwick Dey)
This will turn your project into a hot-reloaded server. As long as you have an HTML page with a <body> it will open the page in a new tab and refresh it whenever you change a file. One thing I like about it is if you have a project that doesn't have an HTML file, but something else you want to hot reload, you can combine this with the Chrome extension (made by the same person, and named the same thing), and you can connect your two sites so when you make updates to a file, it tells another tab with a specific web address to refresh.
This extension is limited For example, you can't use a subdirectory as the root. You can look into Five Server (Yannick) which is maintained and gives you different options. I haven't tried it yet, but it looks promising.
Markdown All in One (Yu Zhang)
This helps me keep my markdown files formatted well. Also, it gives you a live preview of it, which I don't use much. The formatting is really what I use it for.
Material Icon Theme (Philipp Kief)
The default VS Code icons are ugly. Use this theme and they look much better. I especially don't like the default Vue icon. It doesn't have the right colors. Maybe it was a Vue 1.0 logo?
Nunjucks for VS Code (ExE Boss)
This isn't perfect, but it is the best Nunjucks extension in my opinion (I mostly use it with Eleventy). It doesn't have code snippets, or auto formatting, so you have to configure that a different way.
Path Autocomplete (Mihai Vilcu)
In most of my projects, the files I am trying to link to are in something like a pages directory. So my about.html file would be in /pages/about.html in my project, but the actual link should be to /about.html. When you try to link to the about file the intellisense doesn't pick it up because it is looking at the root of the project. With this extension, you can tell intellisense to also look in the pages directory. Typing /abo will pop up /about.html (you do need to configure that functionality).
Prettier (Prettier)
This if my favorite formatter. You can configure a lot of things in it, and even tell it to format one file type as another (like Nunjucks as HTML).
Project Manager (Alessandro Fragnani)
Workspaces are fine, but I prefer to keep my projects managed with this extension. Think of it as a shortcut to your project that you can open in the current window or a new window.
Vetur (Pine Wu)
If you use Vue, you already know about this. If you don't, then you probably don't need it or want it.
VsCode Action Buttons (Seun LanLege)
Some people might think this is unnecessary, but I absolutely love this extension! I don't love using the command line, but I end up using it a lot for things like npm run dev or bash deploy.sh. You can skip the typing, and set up an action button for a command (which will run that command in the command line).
vscode-pdf (tomoki1207)
If you have a PDF in your window, by default VS Code won't show it. With this extension it will open up in the window just like a browser.
Vue Peek (Dario Fuzinato)
This will let you command/control + click a component and it will open up that component. Or you can just look at it inline.
Top comments (0)