Over the course of the past 6 months I’ve found myself using Visual Studio Code as my goto html/css/javascript IDE. Much of the time I will use it in conjunction with VS2013 or VS2015. I find it easier to deal with when writing html, sass/css, or javascript. I’ve basically moved completely away from other IDE’s such as Sublime Text. I know they can both accomplish the same thing more or less. Almost a year ago when I first started using VS Code I wasn’t an immediate fan. In fact I might have said that I would never use it. Those days are long behind me because and VS Code is my #1 IDE for front end development. Here are a list of my top productivity tips and favorite extensions. If you’ve been using VS Studio then you most likely already know about these items but for those not aware please take a few minutes to see what I have to say.

1) Auto Save

This is such a simple thing that can save time. It was not enabled by default when I installed so be sure to enable it. I found it very useful to during development and using a live reload or deploying up to my site for testing.

auto-save

2) Integrations with Externals Tools via Tasks

Having the tasks running write there inside VS Code can save time from switching back and forth between command prompts or staring at another screen. You can get the results of your build, deploy, or test right inside VS Code.

tasks

3) Emmet Snippets

Right out of the box VS Code supports Emmet snippets. These are simply amazing and a major time saver for those that write handfuls of HTML. I’ve been able to churn through HTML once I found out of these snippets. It actually opened up my eyes to the other types of snippets out there. I never cared before but I do not because it’s actually saved me time. It even works with many CSS properties.

emmet-snippets

html_emmetsnippet

Another great post on the power of emmet snippets [I’ve found VS Code doesn’t support all these here]: https://www.smashingmagazine.com/2013/03/goodbye-zen-coding-hello-emmet/

4) Code Formatting

I like that this is already there. I’ve tried many of the other extensions and it just doesn’t work as easy and simply as the out of the box functionality. I’m OK with the no frills code formatting at the moment.

code-formatting

5) vscode-icons

There has to be some reason VS Code doesn’t come with any icons for the files. Well doesn’t matter because there are a number of VS icons in the marketplace. I’ve chosen the following because they look great and they have a ton of downloads and a high rating…so why not.

vsicons

6) jshint

I prefer to have hinting on both my javascript and css. I’m currently using this plugin by Dirk Baeumer which has been working well for me.

jshint

7) HTML CSS Class Completion

VS Code has some level of ability to be able to do this already but not in the capacity that this plugin brings to the table. It will scan your files inside your workspace and provide you with intellisense on the available classes.

html-class-completion

8) jQuery Code Snippets

Here is another great plugin that can save you time from looking up the proper implementation of various jQuery functions. I have most of them memorized by now but this would have been great starting out. Another plus is that it can help maintain consisting when using the snippets.

jquery-snippets

Even more snippets!

So I’m not going to go on and on about all the snippets. I will stop here but as you can see there are many more. I encourage you to go out and download some extension, rate and provide feedback to the authors. Let them know that if you like it or if you have suggestions. All of the items in the marketplace are open source so you can go direct to the repo and post issues or even download the code and fix it yourself!

more-snippets

I’ll be presenting this topic as one of the 6 lightning talks next month at the New Jersey Office 365 User Group. This blog is my topic for that event hence the purpose of writing it.

Comments

Leave a Reply